Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Header tags missing when using useSearchParams in layout component in production #44868

Open
1 task done
hamza512b opened this issue Jan 13, 2023 · 1 comment
Open
1 task done

Header tags missing when using useSearchParams in layout component in production #44868

hamza512b opened this issue Jan 13, 2023 · 1 comment
Labels
template: bug A user has filled out the bug report template. Issue needs triaging

Comments

@hamza512b
Copy link

Verify canary release

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

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 18.12.1
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.1.2-canary.8
eslint-config-next: N/A
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/hamza512b/next-13-layout-issue

To Reproduce

Run build command and start the server:

npm run build
npm run start

open the website on localhost and view the source code html file. It all messed and the header tags are missing.

Describe the Bug

When adding useSearchParams hook in layout file the html file get messed up. It looks like this. The header tags are missing and nothing is static is appended to the html file.

<!DOCTYPE html>
<html id="__next_error__">
  <head>
    <script
      src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"
      nomodule=""
    ></script>
  </head>
  <body>
    <script
      src="/_next/static/chunks/webpack-8735b88e08106ef9.js"
      async=""
    ></script>
    <script src="/_next/static/chunks/17-863c1e401a8d9d7d.js" async=""></script>
    <script
      src="/_next/static/chunks/main-app-f5f82bea125ee053.js"
      async=""
    ></script>
  </body>
</html>
<script>
  (self.__next_f = self.__next_f || []).push([0]);
</script>
<script>
  self.__next_f.push([1, 'J0:"@1"\n']);
</script>
<!-- More script tags -->

Expected Behavior

When adding useSearchParams hook in layout file, this should not happen instead header tags should be in the page source.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response
@hamza512b hamza512b added the template: bug A user has filled out the bug report template. Issue needs triaging label Jan 13, 2023
@GabenGar
Copy link

Yeah, because you are using a client-side hook:

  • During static rendering, any component using the useSearchParams hook will skip the prerendering step and instead be rendered on the client at runtime.
  • To access search params in Pages (Server Components), use the searchParams prop.

Not to mention you marked root layout as client-side component, which means the entire app renders client-side only.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
template: bug A user has filled out the bug report template. Issue needs triaging
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hamza512b @GabenGar