Stale data after navigation when using internal API and SSR (app router) about next.js HOT 8 OPEN

Is it a good practice to run router.refresh function when submitting any info in the form? Or sometimes maybe even on every page that could be highly dynamic?

Just use client components in that case - no need to get the RSC payload from the server, when you only have to fetch the data dynamically.

from next.js.

the repo you linked has nothing apart from the boilerplate code from create-next-app.

from next.js.

the repo you linked has nothing apart from the boilerplate code from create-next-app.

That's true, sorry. It's updated now

from next.js.

This is not an issue with nextjs. I see the following issues in your code:

1. try to build the project and it will not work. the home page will try to prerender by fetching data from localhost:3000/... but there's nothing running on that port.
2. you need to add export const dynamic = "force-dynamic"; to your page.tsx file disable prerendering
3. when you build the project you will see this output. notice /api/users is prerendered as static content. you dont want that to happen. so have export const dynamic = "force-dynamic"; in your api route as well. the other api route is not static because it uses dynamic params.

4. the home page is a server component, and when you navigate on the client side (by going back from edit page), nextjs will not run the fetch again. so you need to have a separate userlist component as a client component, and fetch the data in a useEffect.
5. if you do not have a client component, and instead stick to the server component, you'll notice that after editing and going back to the homepage, when you refresh, you still get the same old data. that is because of data cache, and you can opt out of it using the cache option. read more here: https://nextjs.org/docs/app/api-reference/functions/fetch

from next.js.

@abhi12299

Thank you for looking into my issue! The main purpose of the api + db file was to simulate an API interacting with a database, and it works as intended in dev mode only.
To make this clearer, I've updated the example project by using SQLite3 and made the /api/users route dynamic. In the updated version, I'm using both the unstable_noStore function and cache: 'no-store' for the fetch call, but the data still doesn't update when using the browser's back button. I suspect this happens because the new page isn't being requested, and only client-side navigation is occurring. Isn't there way to get actual data when having server components? I don’t recall having this issue with older Next.js versions that used getServerSideProps, but feel free to correct me if I'm wrong.

from next.js.

I suspect this happens because the new page isn't being requested, and only client-side navigation is occurring. Isn't there way to get actual data when having server components?

The answer is in your question. When client side navigation occurs, the homepage is not rendered again - it is loaded from the client side router cache. Read about it here: https://nextjs.org/docs/app/building-your-application/caching#client-side-router-cache - it also shows how you can invalidate the cache by calling router.refresh, so maybe that helps with your usecase.

Also, from the docs, unstable_noStore can be used to declaratively opt out of static rendering and indicate a particular component should not be cached.

This means that you can mark the page as dynamic, but it won't server-render it again after client side navigation.

from next.js.

you can invalidate the cache by calling router.refresh, so maybe that helps with your usecase.

Thank you, this approach helped! It's quite a good solution, considering that now when data changes, I can have the same effect as in the previous Next.js flow using getServerSideProps, as shown here: https://github.com/sidletski/next-cache-issues-ssr/tree/main/src
Is it a good practice to run router.refresh function when submitting any info in the form? Or sometimes maybe even on every page that could be highly dynamic?

from next.js.

@abhi12299 Thank you! Would be also nice to have all the new features like a separate loading layout and fetching using server components, but CSR will work for me, too.

from next.js.