Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
useSearchParams - bailout to client rendering during static generation (
#43603) Currently `useSearchParams` bails out of static generation altogether, forcing the page to be dynamic. This behaviour is wrong. Instead it should still be statically generated, but `useSearchParams` should only run on the client. This is achieved by throwing a "bailout to client rendering" error. If there's no suspense boundary the whole page will bailout to be rendered on the client. If there is a suspense boundary it will only bailout from that point. ~This PR also adds handling for `export const dynamic = 'force-static'` combined with `useSearchParams`. If it is enabled it will return an empty `ReadonlyURLSearchParams` and skip the bailout to client rendering. Since the `staticGenerationAsyncStorage` only is available on the server - `forceStatic` is sent to the `app-router` to enable sending an empty `URLSearchParams` to match the server response.~ #43603 (comment) the implementation was wrong, added skipped tests and todo comment for now. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
- Loading branch information
1 parent
d2c23bb
commit b3dfa03
Showing
10 changed files
with
204 additions
and
65 deletions.
There are no files selected for viewing
19 changes: 19 additions & 0 deletions
19
packages/next/client/components/bailout-to-client-rendering.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { suspense } from '../../shared/lib/dynamic-no-ssr' | ||
import { staticGenerationAsyncStorage } from './static-generation-async-storage' | ||
|
||
export function bailoutToClientRendering(): boolean | never { | ||
const staticGenerationStore = | ||
staticGenerationAsyncStorage && 'getStore' in staticGenerationAsyncStorage | ||
? staticGenerationAsyncStorage?.getStore() | ||
: staticGenerationAsyncStorage | ||
|
||
if (staticGenerationStore?.forceStatic) { | ||
return true | ||
} | ||
|
||
if (staticGenerationStore?.isStaticGeneration) { | ||
suspense() | ||
} | ||
|
||
return false | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 0 additions & 7 deletions
7
test/e2e/app-dir/app-static/app/hooks/use-search-params/[slug]/layout.js
This file was deleted.
Oops, something went wrong.
19 changes: 19 additions & 0 deletions
19
test/e2e/app-dir/app-static/app/hooks/use-search-params/force-static/page.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
export const dynamic = 'force-static' | ||
|
||
import Link from 'next/link' | ||
import { Suspense } from 'react' | ||
import UseSearchParams from '../search-params' | ||
|
||
export default function Page() { | ||
return ( | ||
<Suspense fallback={<p>search params suspense</p>}> | ||
<UseSearchParams /> | ||
<Link | ||
id="to-use-search-params" | ||
href="/hooks/use-search-params?first=1&second=2&third=3" | ||
> | ||
To / | ||
</Link> | ||
</Suspense> | ||
) | ||
} |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/app-static/app/hooks/use-search-params/page.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import UseSearchParams from './search-params' | ||
|
||
export default function Page() { | ||
return ( | ||
<> | ||
<p id="hooks-use-search-params" /> | ||
<UseSearchParams /> | ||
</> | ||
) | ||
} |
6 changes: 1 addition & 5 deletions
6
...pp/hooks/use-search-params/[slug]/page.js → .../hooks/use-search-params/search-params.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/app-static/app/hooks/use-search-params/with-suspense/page.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { Suspense } from 'react' | ||
import UseSearchParams from '../search-params' | ||
|
||
export default function Page() { | ||
return ( | ||
<Suspense fallback={<p>search params suspense</p>}> | ||
<UseSearchParams /> | ||
</Suspense> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters