vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.72k stars 26.94k forks source link

Dynamic Server Usage: Headers, Cookies or SearchParams #50634

Open XEngine opened 1 year ago

XEngine commented 1 year ago

Verify 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: 8.1.1
    Relevant packages:
      next: 13.4.4
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.0.4

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

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

I cant make a reproduction rn

To Reproduce

use headers() or cookies() or searchParams parameter from page.js files inside server components or utilities called by server controllers

Describe the Bug

This occures whenever I used next server side functions inside server componets, like If I call a "headers()" function to get the request headers inside page.js, I am facing with the issue. This issue however is not a stopper. Next works as intented, it's completly functional. But strangely it prints these errors.

When I used those functions and npm run build. In sentry this is what I see: image image

Another Dynamic Server Usage error is, when I try to dynamic import of a component with {ssr: false} parameter. I does render the component, component works as intented but when I try to view source of the page this is what I see

image

Expected Behavior

I don't know. Maybe these are not errors, not even warnings but informations. Any info about it?

Which browser are you using? (if relevant)

Chrome 113.0.5672.127

How are you deploying your application? (if relevant)

custom server

darthrommy commented 1 year ago

same "Dynamic Server Usage: cookies" issue during next build.

What worked for me is to mark static pages as "force-static". Maybe you should try it.

// app/static-page/page.tsx

export const dynamic = "force-static";

export default function SomeStaticPage() {
  return //...
};