"use client" directive not respected with non interactive components #50738
Replies: 8 comments 1 reply
-
|
As the documentation says, client components are pre-rendered on the server (this is where https://nextjs.org/docs/getting-started/react-essentials#client-components
|
Beta Was this translation helpful? Give feedback.
-
|
@itaquito Does it mean it is impossible to use any client-side Web API directly in a Next.js component? |
Beta Was this translation helpful? Give feedback.
-
Same as you would do in a Pages directory, use |
Beta Was this translation helpful? Give feedback.
-
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,
}); |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for this, it helped me fixing my problem with using document in a layout. I didn't need the ssr: false option though. |
Beta Was this translation helpful? Give feedback.
-
|
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 https://nextjs.org/docs/app/api-reference/functions/use-search-params#static-rendering |
Beta Was this translation helpful? Give feedback.
-
|
It also affects const template = useMemo(() => {
const templateContent = document.createElement("template");
templateContent.innerHTML = content;
return templateContent;
}, [content]); |
Beta Was this translation helpful? Give feedback.
-
|
What is confusing to me is why is there a different behaviour in a layout compared to a page. Even when in a Client component, in a layout I have to use dynamic to load a component which would use document or window. In a page, I can use a client component using windows or document without using dynamic. Maybe it's documented somewhere, but very strange and confusing to me. |
Beta Was this translation helpful? Give feedback.
-
|
I realise this is an old thread, but layouts and pages should be considered as entirely seperate things. If you have a component in a page that suspends, you should add a suspense boundary to the page. Same goes for layout, if a component in the layout suspends, you should add a suspense boundary there. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Verify 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.4Which 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
window.locationas a JSON stringnpm run buildDescribe 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:
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
Beta Was this translation helpful? Give feedback.
All reactions