如何在Next.js 13的pages目录中实现页面客户端渲染

核心问题原因 #

生产构建时，即使添加了客户端指令，若依赖window的代码在组件初始化（而非客户端挂载后）执行，预渲染阶段仍会触发错误——因为预渲染在服务端/无浏览器环境中运行，不存在window对象。

有效解决方法 #

• 确保"use client"指令位置正确
  必须放在文件的最顶部，早于任何import语句。如果页面依赖的子组件也用到window，这些子组件同样需要添加该指令。示例：

  "use client";
  import React from 'react';
  
  export default function ClientOnlyPage() {
    // 组件逻辑
  }
  

• 用useEffect延迟执行window相关代码
  useEffect的回调函数不会在预渲染阶段运行，仅在客户端组件挂载后执行，可安全访问window：

  "use client";
  import { useEffect, useState } from 'react';
  
  export default function ClientPage() {
    const [windowValue, setWindowValue] = useState('');
  
    useEffect(() => {
      // 仅客户端执行的代码
      setWindowValue(window.innerWidth.toString());
    }, []);
  
    return <div>当前窗口宽度：{windowValue || '加载中...'}</div>;
  }
  

• 动态导入依赖window的第三方库
  若第三方库在导入时就访问window，需通过动态导入延迟加载，确保仅在客户端执行：

  "use client";
  import { useEffect, useState } from 'react';
  
  export default function LibPage() {
    const [ThirdPartyComp, setThirdPartyComp] = useState(null);
  
    useEffect(() => {
      import('依赖window的第三方库').then(mod => {
        setThirdPartyComp(mod.default);
      });
    }, []);
  
    if (!ThirdPartyComp) {
      return <div>加载中...</div>;
    }
  
    return <ThirdPartyComp />;
  }
  

• 排查路由与构建配置
  若使用App Router，确保页面未被错误配置为静态生成（如未使用generateStaticParams）；若使用Pages Router，避免给该页面添加getStaticProps/getServerSideProps这类服务端渲染函数。

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