如何将React JS项目中单个组件转为Next JS以实现服务端渲染

1. 在现有React项目里引入Next.js #

不用重构整个项目，直接在现有项目根目录安装Next依赖：

npm install next react react-dom

然后在package.json里添加Next的运行脚本：

{
  "scripts": {
    "next:dev": "next dev",
    "next:build": "next build",
    "next:start": "next start"
  }
}

2. 把目标组件改成Next.js的SSR页面 #

在项目根目录新建pages文件夹（Next.js默认的路由入口），创建一个比如ssr-target.js文件，把你要做SSR的组件代码移进去，加上服务端数据获取逻辑：

// pages/ssr-target.js
function MySSRComponent({ serverData }) {
  // 组件渲染逻辑，直接用服务端传过来的props
  return <div>服务端渲染的数据：{serverData.content}</div>;
}

// 服务端获取数据的方法，Next会在每次请求时在服务端执行这个函数
export async function getServerSideProps() {
  // 这里写服务端专属的逻辑，比如调用后端API、读取数据库
  const res = await fetch('https://your-api.com/data');
  const serverData = await res.json();

  // 返回的props会传给组件，在服务端完成渲染
  return {
    props: { serverData }
  };
}

export default MySSRComponent;

3. 测试SSR组件 #

运行Next开发服务器：

npm run next:dev

访问http://localhost:3000/ssr-target，查看页面源码（右键→查看页面源代码），如果能看到渲染好的服务端渲染的数据：xxx，说明SSR生效了。

4. 把SSR组件嵌入现有React项目 #

有两种常用方式：

• iframe嵌入：直接在现有React组件里用iframe加载Next的SSR页面，开发环境用http://localhost:3000/ssr-target，生产环境换成你部署后的Next服务地址：

  // 现有React项目里的某个组件
  function App() {
    return (
      <div>
        {/* 现有组件内容 */}
        <iframe 
          src="http://localhost:3000/ssr-target" 
          style={{ width: '100%', border: 'none' }}
        />
      </div>
    );
  }
  

• 整合服务器（推荐）：如果现有项目用Express这类Node服务器，可以把Next和现有服务整合到同一个端口，避免跨域和iframe的样式问题。比如新建server.js：

  const express = require('express');
  const next = require('next');
  const path = require('path');
  
  const dev = process.env.NODE_ENV !== 'production';
  const nextApp = next({ dev });
  const nextHandler = nextApp.getRequestHandler();
  
  nextApp.prepare().then(() => {
    const app = express();
  
    // 托管现有React项目的静态文件（假设现有项目build后在build文件夹）
    app.use('/app', express.static(path.join(__dirname, 'build')));
  
    // 处理Next的SSR路由
    app.all('/ssr/*', (req, res) => {
      return nextHandler(req, res);
    });
  
    app.listen(3000, () => {
      console.log('服务运行在http://localhost:3000');
    });
  });
  

  然后修改package.json的启动脚本为"start": "node server.js"，这样现有项目访问/app，SSR组件访问/ssr/ssr-target，共享同一个服务。

5. 生产部署 #

• 先build现有React项目：npm run build
• 再build Next项目：npm run next:build
• 最后启动整合后的服务器：npm run start
• 部署时可以用PM2、Docker等工具管理进程，确保两个部分都正常运行。

注意事项 #

• 组件里如果有依赖window、document这类浏览器对象的代码，要放到useEffect里执行，避免服务端渲染时报错。
• 服务端数据获取逻辑必须放在getServerSideProps里，不要在组件渲染时异步获取数据，否则会在客户端重复执行。
• 如果现有项目用了React Router，要注意路由前缀，避免和Next的路由冲突。

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