next.js: [NEXT-599] Using searchParams in a RSC page component does not bail out to dynamic rendering

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:29 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T8101
Binaries:
  Node: 18.12.1
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.1.2-canary.4
  eslint-config-next: 13.1.1
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/samtgarson/appdir-reproduction-app

To Reproduce

This could be a misunderstanding from my end, but it appears that the Next.js or Vercel caching behaviour does not take into consideration Search Params when caching pages?

https://appdir-reproduction-app.vercel.app/?page=1

If this is not a misunderstanding, what is the intended method of supporting server generated pages with pagination, without server rendering every single request?

To reproduce:

create a RSC page in the new App Dir
Use search params from the page props to interact with some data source (e.g. pagination in a database)
Do not use useSearchParams, this issue is about server rendered pages not client rendered ones.

Describe the Bug

Run next dev and the search params are respected
Run next start and the search params are ignored
In the example reproduction, the page says Page 0 regardless of the search param

Expected Behavior

I would expect the page to show a version of the page with the search params respected.

Which browser are you using? (if relevant)

Not relevant

How are you deploying your application? (if relevant)

next start

_NEXT-599

About this issue

Original URL
State: closed
Created a year ago
Reactions: 2
Comments: 15 (8 by maintainers)

Most upvoted comments

@filipkowal if you use searchParams on your page, it would normally turn your page into a dynamic page.

If you want your page to be static but still be able to use search params, you would have to call useSearchParams in a client component and do your search in the client.

If you want to fetch your data with searchParams on a server components it have to be a dynamic page, because server components only run in the server.

Fredkiss3 on Feb 8, 2023

I am experiencing the same issue. The page (Server Component) fetches data based on searchParams. It does not refetch on searchParams change, unfortunately. The fact that it does refetch in dev environment is confusing.

Setting the route as dynamic is a trade-off I would rather not take, as most of the time the route is used without searchParams. I’ve chosen the app directory mainly because of the performance gain of static rendering, which now is lost.

Is there any other way to refetch on searchParams change in a Server Component? Are there plans to implement such a feature?

filipkowal on Jan 26, 2023

Yes, searchParams prop on a server component

Fredkiss3 on Jan 10, 2023