Next 14 default SSR/RSC vs SWR.
Answered
Hink posted this in #help-forum
HinkOP
Sort of a newb question but I've been second guessing myself on this one. I'm building out a dashboard where users CRUD locations, contacts, notifications, and files. I'm using Prisma and API routes to fetch data using the default Next configuration... I was recently advised to avoid using router.refresh() to refresh data and update state with fetched data from an API... what is the best approach in this case? I'm leaning towards a client-side option like SWR or fetch but wanted some more context. Thanks -Jake
Answered by Hassib
Hi Jake, hope all is well.
I have done something like that in one of my projects. I used react-query for fetching requests. The react-query package has a function called
You can programmatically do something like this if you don't use react-query.
Note: I wouldn't recommend implementing the logic by yourself as it would take much more time and the maintenance would be harder. Use a library/package instead.
Take a look at this: https://tanstack.com/query/v4/docs/react/guides/query-invalidation
If you need to do it on server components, you can check the following link. Next.js allows you to revalidate queries in two ways, time-based and on-demand revalidation.
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data
I have done something like that in one of my projects. I used react-query for fetching requests. The react-query package has a function called
invalidateQueries which automatically invalidates and fetches new results after for example the success of a request.You can programmatically do something like this if you don't use react-query.
Note: I wouldn't recommend implementing the logic by yourself as it would take much more time and the maintenance would be harder. Use a library/package instead.
Take a look at this: https://tanstack.com/query/v4/docs/react/guides/query-invalidation
If you need to do it on server components, you can check the following link. Next.js allows you to revalidate queries in two ways, time-based and on-demand revalidation.
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data
3 Replies
Hi Jake, hope all is well.
I have done something like that in one of my projects. I used react-query for fetching requests. The react-query package has a function called
You can programmatically do something like this if you don't use react-query.
Note: I wouldn't recommend implementing the logic by yourself as it would take much more time and the maintenance would be harder. Use a library/package instead.
Take a look at this: https://tanstack.com/query/v4/docs/react/guides/query-invalidation
If you need to do it on server components, you can check the following link. Next.js allows you to revalidate queries in two ways, time-based and on-demand revalidation.
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data
I have done something like that in one of my projects. I used react-query for fetching requests. The react-query package has a function called
invalidateQueries which automatically invalidates and fetches new results after for example the success of a request.You can programmatically do something like this if you don't use react-query.
Note: I wouldn't recommend implementing the logic by yourself as it would take much more time and the maintenance would be harder. Use a library/package instead.
Take a look at this: https://tanstack.com/query/v4/docs/react/guides/query-invalidation
If you need to do it on server components, you can check the following link. Next.js allows you to revalidate queries in two ways, time-based and on-demand revalidation.
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data
Answer
HinkOP
Thank you @Hassib ... I will probably go this route.
No worries 😊