SSR Dashboard Boilerplate with Clientside UI Library
Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
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.
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.
4 Replies
Siberian Flycatcher
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
@Siberian Flycatcher > 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
Cuvier’s Dwarf CaimanOP
It's a nice idea, but I feel like it doesn't scale, especially once we get multiple components on page.
Is there a better way? Or should I just transition my app into an SPA lol
Is there a better way? Or should I just transition my app into an SPA lol
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?
that way you only write reusable function thats used in Server Component and Server Action