Next.js Discord

Discord Forum

curious about cache behavior and searchParams in React Server Component

Unanswered
Long-horned bees posted this in #help-forum
Open in Discord
Long-horned beesOP
I'm learning nextjs and practicing the official dashboard project next recommend.

In chapter 11: Adding Search and Pagination https://nextjs.org/learn/dashboard-app/adding-search-and-pagination

Please try searching on the web I deployed and help me with this issue!
I setup the project code as the same the docs suggest and have the invoices page correctly. When I enter an input the search will update invoices table and it work fine but I try to refresh the page when it have a search param: https://next-dashboard-git-main-lehoangan1503s-projects.vercel.app/dashboard/invoices?query=ste

The response still work correct with 4 records, I have set limit of db query to 6. When I'm deleting input gradually the invoices page still update for "query=st", "query=s" but when delete all and delete query param the invoices page turn back to query=ste result but It should be 6 records with url https://next-dashboard-git-main-lehoangan1503s-projects.vercel.app/dashboard/invoices

And if you stop when the query "query=s" and click to other tab and wait a seconds and turn back to app delete "s" input the invoices table have a different result with 6 records as it should be.

I curious about this behavior and guess this is nextjs cache but I think it not. I opt in noStore() in query db function to disable Data Cache and if this behavior is Router Cache on the client then the url (https://next-dashboard-git-main-lehoangan1503s-projects.vercel.app/dashboard/invoices) is not have first request yet (it cannot router cache because i read that when we using "searchParams" RSC will become dynamic rendering on user first request the Router Cache will skip).

I wonder the development env and production env will have different so i deployed the project. But it behaves similarly. Hope you can help me figure out.

Thanks!

I'm expecting that when delete all input the invoices will fetch new data with 6 records not 4 record like first render.

0 Replies