Next.js中Server Side Rendering未生成问题求助

核心原因 #

你的ContextProvider或其内部逻辑大概率使用了仅客户端可用的API（比如window、document），或者在组件初始化阶段执行了只能在浏览器环境运行的代码。Next.js在服务端渲染时无法执行这些代码，导致HTML生成中断，最终只能在客户端完成渲染，所以页面源代码看不到对应内容。

具体修复方案 #

1. 隔离客户端专属逻辑 #

把依赖浏览器环境的代码放到useEffect钩子（仅客户端执行）里，App Router下需用use client指令标记组件为客户端组件：

// 示例：兼容SSR的ContextProvider
'use client'; // App Router必填，Page Router可忽略

import { createContext, useContext, useEffect, useState } from 'react';

const MyContext = createContext();

export function MyContextProvider({ children }) {
  const [state, setState] = useState(null);

  useEffect(() => {
    // 这里写需要window/document的逻辑，比如读取localStorage、监听窗口变化
    const savedState = window.localStorage.getItem('myState');
    if (savedState) setState(JSON.parse(savedState));
  }, []);

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
}

2. 确保ContextProvider服务端可安全执行 #

如果Context的初始化逻辑不需要客户端API，要保证它能在服务端正常运行：

• 禁止在组件顶层直接调用window/document
• 服务端需要的数据，可通过getServerSideProps（Page Router）或异步组件（App Router）提前获取后传入Context

3. 正确的包裹方式 #

App Router（Next.js 13+）

在app/layout.js中包裹ContextProvider：

// app/layout.js
import { MyContextProvider } from '@/components/MyContextProvider';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <MyContextProvider>{children}</MyContextProvider>
      </body>
    </html>
  );
}

Page Router（Next.js 12及以下）

在pages/_app.js中包裹：

// pages/_app.js
import { MyContextProvider } from '../components/MyContextProvider';

export default function MyApp({ Component, pageProps }) {
  return (
    <MyContextProvider>
      <Component {...pageProps} />
    </MyContextProvider>
  );
}

4. 验证SSR生效 #

修复后右键查看页面源代码，若能看到页面核心HTML内容，说明SSR恢复正常。若仍有问题，检查：

• 是否还有其他组件在服务端执行了客户端API
• 用next build && next start生产模式验证（开发模式可能存在客户端渲染优化）

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