Data fetching strategy with Next.js for a dashboard-like app
Hi
I hope this is the right place for a discussion like this 🙂
In the past, I was mainly developing mostly static websites with a few interactive elements. Now I'm planning to do a personal project with a more app-like behaviour and was wondering what the best practice is regarding data fetching with Next.js, especially with the T3 Stack.
Some challenges that come to mind:
-
getServerSideProps is probably preferred over getInitialProps, since caching is only so useful if you want to analyze live-data as a user.
- Different users may want to display different data on the home page, so I need to have a way to prepare that view for each user seperately.
- Some data may come from a 3rd party API that won't be as quick to respond as the main data source.
- Loading states and navigation should be smooth.
What I thought could work:
- Use client side queries for all the data that is user-specific.
- Use getServerSideProps to fetch all the non-user specific stuff on a page. E.g. navigation bar state, form views (where you can edit entities) etc.
What I ask myself:
- Is it worth to make this distinction, or should I just go with client-side fetching all the way?
- Also, what about the future of the stack with Next.js' app folder and server components. Will the transition be easier if I fetch everything client side?3 Replies
since its a dashboard, presumably SEO isnt really important, so i'd default to client side fetching unless needed otherwise. tRPC and react query make this really nice to work with (aka t3 stack)
we dont know the full story for data fetching stuff in /app folder yet (stuff like mutation are still wip), but it seems like they would not be a replacement for long session data handling stuff (e.g. periodic fetching or optimistic update, stuff that react query currently already handles), so i think it would be fine
I think it would be better to use tRPC in the component level, that would make your life a lot easier
Thanks for the insights! I think I'll go with client side fetching and probably not use the server side at all then.