"use client" directive not respected with non interactive components

[Foxxite]

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 Education
Binaries:
      Node: 18.12.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
Relevant packages:
      next: 13.4.5-canary.0
      eslint-config-next: 13.4.4
      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

https://codesandbox.io/p/sandbox/intelligent-lovelace-tnwuq9

To Reproduce

1. Initialize a Next.JS project with all default options (using app router)
2. Create 2 client components using the "use client" directive:
   • One following the example at: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive
   • One that show window.location as a JSON string
3. Try to build the app with npm run build

Describe the Bug

Trying to build the app with the client component that only renders a JSON string using the window object (or any browser API) results in the following error on build:

info  - Collecting page data  
[    ] info  - Generating static pages (0/3)ReferenceError: window is not defined
    at UseClientNonInteractive (/project/home/foxxite/workspace/.next/server/app/page.js:326:34)
    at ae (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:99:272)
    at ae (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:104:142)
    at Z (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:91)
    at be (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:107:98)
    at de (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:106:424)
    at Z (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:222)
    at be (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:107:98)
    at de (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:106:424)
    at Z (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:222)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: window is not defined
    at UseClientNonInteractive (/project/home/foxxite/workspace/.next/server/app/page.js:326:34)
    at ae (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:99:272)
    at ae (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:104:142)
    at Z (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:91)
    at be (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:107:98)
    at de (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:106:424)
    at Z (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:222)
    at be (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:107:98)
    at de (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:106:424)
    at Z (/project/home/foxxite/workspace/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.production.min.js:105:222)
info  - Generating static pages (3/3)

> Build error occurred
Error: Export encountered errors on following paths:
        /page: /
    at /project/home/foxxite/workspace/node_modules/next/dist/export/index.js:417:19
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (/project/home/foxxite/workspace/node_modules/next/dist/trace/trace.js:79:20)
    at async /project/home/foxxite/workspace/node_modules/next/dist/build/index.js:1317:21
    at async Span.traceAsyncFn (/project/home/foxxite/workspace/node_modules/next/dist/trace/trace.js:79:20)
    at async /project/home/foxxite/workspace/node_modules/next/dist/build/index.js:1176:17
    at async Span.traceAsyncFn (/project/home/foxxite/workspace/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/project/home/foxxite/workspace/node_modules/next/dist/build/index.js:69:29)

Expected Behavior

No matter what the component does, if the 'use client' directive is used, NextJS should treat it as such and not try to make it a static / server component.

Which browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

N/A

[itaquito]

As the documentation says, client components are pre-rendered on the server (this is where window is not defined) and hydrated on the client.

https://nextjs.org/docs/getting-started/react-essentials#client-components

Client Components enable you to add client-side interactivity to your application. In Next.js, they are pre-rendered on the server and hydrated on the client.

[liningpan]

@itaquito Does it mean it is impossible to use any client-side Web API directly in a Next.js component?

[sannajammeh]

@itaquito Does it mean it is impossible to use any client-side Web API directly in a Next.js component?

Same as you would do in a Pages directory, use useEffect hook.

[Foxxite]

@itaquito Does it mean it is impossible to use any client-side Web API directly in a Next.js component?

You have to disable SSR on the component you want to use client sided API's in.

Not sure if this is the recommended way, but it works.

const ClientComponent = dynamic(() => import('@/components/ClientComponent'), {
    ssr: false,
});

[shuding]

Exactly what @itaquito said. You can think of that every component in pages/ is a Client Component. They're SSR'd and then hydrated in the browser. In app/, Server Components are SSR'd but never hydrated in the browser, but Client Components are still the same.

Besides the next/dynamic approach that @Foxxite mentioned, you can also use useSearchParams() to opt-out SSR for an entire boundary:

https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering