TTC
Theo's Typesafe Cult•16mo ago
michaelschufi

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
cornflour
cornflour•16mo ago
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
Abuzeid
Abuzeid•16mo ago
I think it would be better to use tRPC in the component level, that would make your life a lot easier
michaelschufi
michaelschufi•16mo ago
Thanks for the insights! I think I'll go with client side fetching and probably not use the server side at all then.
Want results from more Discord servers?
Add your server
More Posts
Parent model in child model in Prisma?Sorry for the confusing title, I'm looking to do something like this: ```ts model Parent { id Noob Question Many-to-Many in prisma after nextAuthHello all! I'm trying to create my first many-to-many relationship in Prisma. schema: ```schema moProper way to handle a protected route with react-queryGreetings all, I need to protect a specific page and show it users only if they have a certain "staCustom data fetching hookHey guys, It would be really helpful if someone can provide some examples as to how to configure a Why am I getting these TypeScript ESLint errors even though VSCode doesn't complain?Here is my repo. It was bootstrapped with `create-t3-app`: https://github.com/ChromeUniverse/luccanoWhy useQuery runs multiple times?my first time of using react query and facing issue of running API request multiple times, I dont knIs these animations a lot for a library like react?I want to make an algorithm visualizer, like this one: https://www.toptal.com/developers/sorting-algTRPC + RedisHey Guys, I'm exploring using redis to make my data real time and using trpc as a rest like API. I