nextjs runtime_error ai_generated true

Error: 'ssr: false' option in dynamic() is not supported in Server Components. Use dynamic() with 'ssr: false' only in Client Components.

ID: nextjs/dynamic-import-ssr-false-client-component

Also available as: JSON · Markdown · 中文

90%Fix Rate

88%Confidence

1Evidence

2024-11-01First Seen

Version Compatibility

Version	Status	Introduced	Deprecated	Notes
Next.js 14.x	active	—	—	—
Next.js 15.x	active	—	—	—

Root Cause

The dynamic() import with { ssr: false } is used in a Server Component, but this option only works within Client Components because Server Components always render on the server.

generic

中文

在服务端组件中使用了带有 { ssr: false } 的 dynamic() 导入，但此选项仅在客户端组件中有效，因为服务端组件总是在服务端渲染。

Official Documentation

https://nextjs.org/docs/app/api-reference/functions/dynamic

Workarounds

90% success Move the dynamic() import to a Client Component by adding 'use client' at the top of the file. Example: 'use client'; import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false });
```
Move the dynamic() import to a Client Component by adding 'use client' at the top of the file. Example: 'use client'; import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false });
```
88% success If you cannot convert the parent to a Client Component, create a separate wrapper Client Component that handles the dynamic import, and import that wrapper in your Server Component.
```
If you cannot convert the parent to a Client Component, create a separate wrapper Client Component that handles the dynamic import, and import that wrapper in your Server Component.
```
75% success Use next/dynamic without ssr: false and instead handle browser-only code inside a useEffect with a mounted state check.
```
Use next/dynamic without ssr: false and instead handle browser-only code inside a useEffect with a mounted state check.
```

中文步骤

通过在文件顶部添加 'use client' 将 dynamic() 导入移到客户端组件中。示例：'use client'; import dynamic from 'next/dynamic'; const MyComponent = dynamic(() => import('./MyComponent'), { ssr: false });

如果无法将父组件转换为客户端组件，请创建一个单独的包装器客户端组件来处理 dynamic 导入，然后在服务端组件中导入该包装器。

使用不带 ssr: false 的 next/dynamic，而是在 useEffect 中使用 mounted 状态检查来处理浏览器专用代码。

Dead Ends

Common approaches that don't work:

60% fail
The component may rely on browser-only APIs (window, document, etc.) that will crash during server-side rendering. Removing 'ssr: false' without client isolation will cause ReferenceError.
100% fail
This is a build-time validation error that occurs before runtime. The framework throws it during module resolution, so try-catch cannot intercept it.
80% fail
Server Components do not have access to the window object, and conditional imports in Server Components still attempt to resolve the module during server-side rendering, leading to the same error or different import failures.