文档说我可以通过添加'use client'到仅需要客户端渲染的文件的顶部来禁用服务器端渲染。
然而，在实践中，我已将此标头添加到项目中的每个文件中，并且我看到布局和页面都在服务器端呈现。
我可以通过一个简单的页面确认这一点：
'use client';
export default () => {
console.log('SERVER RENDER (page)');
return (
<div>test</div>
);
};
我希望next dev不会输出“SERVER RENDER（页面）”，但它确实输出。
看起来即使一个组件被标记'use client'，它仍然会被预渲染。
客户端组件使您能够向应用程序添加客户端交互性。在 Next.js 中，它们在服务器上预渲染并在客户端上进行水化。您可以将客户端组件视为 Next.js 12 和以前版本的工作方式（即页面/目录）。
https://beta.nextjs.org/docs/rendering/server-and-client-components#client-components
@Nikolai 正确地指出了这一点，但没有回答如何禁用 SSR。
然而，既然我们知道 Next 13 的行为与 12 相同，我们也可以应用与以前版本中使用的相同的水合解决方法。
TLDR 是您希望将布局包装在一个组件中，该组件根据是否检测到浏览器环境有条件地呈现元素，例如
const Dynamic = ({ children }: { children: React.ReactNode }) => {
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
if (!hasMounted) {
return null;
}
return <>{children}</>;
};
export default ({ children }: { children: React.ReactNode }) => {
return (
<html lang="en">
<head />
<body>
<Dynamic>{children}</Dynamic>
</body>
</html>
);
};
显然，请确保您知道自己在做什么。尽管也有例外，但这通常不是期望的行为。
如果您正在阅读此页面，您还应该了解路线段配置：
// 'auto' | 'force-dynamic' | 'error' | 'force-static'
export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
// 'auto' | 'default-cache' | 'only-cache' | 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'
export const fetchCache = 'auto'
// 'nodejs' | 'edge'
export const runtime = 'nodejs'
// 'auto' | 'global' | 'home' | string | string[]
export const preferredRegion = 'auto'
export default function MyComponent() {}
| 归档时间： |
|
| 查看次数： |
10604 次 |
| 最近记录： |