如何在Next.js v13中完全禁用服务端渲染？

首先得明确：Next.js 里的 'use client' 并不是完全禁用服务端渲染，它的作用是标记组件为客户端组件，让组件可以使用客户端特有的API（比如 useState、useEffect，或者访问 window 对象），但客户端组件依然会在服务端完成首次渲染（也就是SSR），然后在客户端进行水合（Hydrate）。

你测试代码里的 console.log('SERVER RENDER (page)') 会在服务端输出，是因为首次渲染阶段服务端会执行组件代码生成HTML，这个 log 就会在服务端控制台打印。如果要验证组件是否真的是客户端组件，可以把 log 放到 useEffect 里，因为 useEffect 只会在客户端执行：

'use client';

import { useEffect } from 'react';

export default () => {
  useEffect(() => {
    console.log('CLIENT SIDE ONLY');
  }, []);

  return (
    <div>test</div>
  );
};

这样执行 next dev 时，服务端不会输出这个 log，只有浏览器控制台会打印，这才是客户端组件的特征。

另外，Layout 和 Page 组件即使加了 'use client'，Next.js 依然会在服务端做首次渲染，这是框架的默认行为，目的是保证首屏性能和SEO。如果确实需要完全不在服务端渲染某个组件，可以考虑把它放到一个动态导入的组件里，并且禁用SSR：

// 父组件（可以是Page或Layout）
import dynamic from 'next/dynamic';

const ClientOnlyComponent = dynamic(() => import('./ClientComponent'), {
  ssr: false,
  loading: () => <div>Loading...</div>
});

export default function Page() {
  return <ClientOnlyComponent />;
}

这样 ClientComponent 就只会在客户端渲染，不会在服务端执行任何代码。

内容的提问来源于stack exchange，提问作者Gajus