Best Practices for Structuring a High-Performance Next.js Dashboard with Supabase
Unanswered
Barbary Lion posted this in #help-forum
Barbary LionOP
Hello everyone!
I'm building a dashboard in my Next.js application and looking for advice on structuring and planning the components, especially in terms of separating server-side and client-side logic. I aim to create a high-performing, client-side isolated dashboard that includes features like filtering and searching. Here's what I have so far (attached a screenshot of my best guess directory structure).
The data will be fetched from Supabase using their JS client, and I'm planning to use the shadcn data table component which relies on @tanstack/react-table for table functionalities.
I have a few specific questions:
1. What are the best practices for organizing server-side and client-side components in a Next.js dashboard app?
2. How can I ensure optimal performance for client-side operations like filtering and searching?
3. When integrating server actions, should they be implemented on the client or server side in a Next.js app? How do they fit in here?
4. Any advice or resources on constructing an efficient component/data-fetching hierarchy, considering Supabase as the data source?
I would appreciate any examples or insights into how you’ve structured similar projects or any recommended patterns.
Thank you in advance for your help! â¤ï¸
I'm building a dashboard in my Next.js application and looking for advice on structuring and planning the components, especially in terms of separating server-side and client-side logic. I aim to create a high-performing, client-side isolated dashboard that includes features like filtering and searching. Here's what I have so far (attached a screenshot of my best guess directory structure).
The data will be fetched from Supabase using their JS client, and I'm planning to use the shadcn data table component which relies on @tanstack/react-table for table functionalities.
I have a few specific questions:
1. What are the best practices for organizing server-side and client-side components in a Next.js dashboard app?
2. How can I ensure optimal performance for client-side operations like filtering and searching?
3. When integrating server actions, should they be implemented on the client or server side in a Next.js app? How do they fit in here?
4. Any advice or resources on constructing an efficient component/data-fetching hierarchy, considering Supabase as the data source?
I would appreciate any examples or insights into how you’ve structured similar projects or any recommended patterns.
Thank you in advance for your help! â¤ï¸