#SSR Dashboard Boilerplate with Clientside UI Library

5 messages · Page 1 of 1 (latest)

rough python
#

Does anyone know of any good NextJS 13 + (any) UI lib Boilerplates? Like a Server Side Rendered Dashboard, with proper efficient data fetching examples.

I feel like I'm losing my mind, had server side dashboard with client components wrapped around server components that pass data through props, but now I wanna add an additional dropdown and filters to the client component so I'm re-building the server component as an api route? (so the client can re-fetch, via useEffect on filter change) Idk I just feel like I'm not seeing the full picture.

Like I can't find an example of best practice where the UI library is only supported on the client

I've looked and found lots of dashboard boilerplates but they all use NextJS 12- was wondering if anyone could share or shed some light on this.

shadow streamBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

shell brook
#

I feel like I'm losing my mind, had server side dashboard with client components wrapped around server components that pass data through props, but now I wanna add an additional dropdown and filters to the client component so I'm re-building the server component as an api route? (so the client can re-fetch, via useEffect on filter change) Idk I just feel like I'm not seeing the full picture.

Hey 👋

Try moving your client state (filters from the dropdown) to the URL. Then, you can fetch new data in the Server Component based on the URL.

Here is a quick example
https://twitter.com/asidorenko_/status/1683137200781762560

rough python
eternal linden
#

but now I wanna add an additional dropdown and filters to the client component so I'm re-building the server component as an api route? (so the client can re-fetch, via useEffect on filter change) Idk I just feel like I'm not seeing the full picture.
Have you tried using Server Actions?