什么是JavaScript服务端渲染？如何实现同构应用开发？

JavaScript服务端渲染指的是在Node.js环境中将前端组件渲染为完整的HTML字符串，再返回给客户端，客户端拿到HTML后直接展示，无需等待前端JS加载完成后再渲染页面。同构应用则是同一套代码可以同时运行在服务端和客户端，实现逻辑复用和状态同步。

服务端渲染的核心优势

相比传统的客户端渲染，服务端渲染主要有两方面的突出优势：

• 首屏加载速度快：用户请求页面时直接拿到渲染完成的HTML，不需要等待前端JS下载、解析、执行后再生成DOM，大幅缩短首屏可见时间。
• SEO友好：搜索引擎爬虫可以直接抓取到完整的页面内容，避免客户端渲染导致的爬虫无法识别动态内容的问题。

同构应用的核心设计思路

同构应用要实现服务端和客户端复用同一套代码，需要解决几个核心问题：

1. 环境差异处理

服务端没有DOM、Window等浏览器全局对象，代码中如果直接调用这些对象会报错，需要做环境判断：

// 环境判断工具函数
export const isClient = typeof window !== 'undefined' && typeof document !== 'undefined';

// 调用浏览器API时做判断
if (isClient) {
  console.log('当前运行在浏览器环境');
  window.addEventListener('resize', handleResize);
}

2. 路由匹配

服务端需要根据请求的URL匹配对应的前端路由组件，客户端则使用前端路由库管理页面切换，两者需要共享路由配置：

// 共享路由配置 routes.js
import Home from './pages/Home';
import About from './pages/About';

export default [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

3. 状态同步

服务端渲染时获取的数据需要同步到客户端，避免客户端重新请求数据。通常的做法是将服务端获取的数据挂载到HTML的全局变量中，客户端初始化时读取这个变量作为初始状态。

同构应用完整实现示例

下面以React框架为例，演示一个简单的同构应用实现流程，Node.js服务端使用Express框架。

1. 项目初始化与依赖安装

先初始化项目并安装所需依赖：

mkdir ssr-demo && cd ssr-demo
npm init -y
npm install express react react-dom react-router-dom
npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-react @babel/preset-env

2. 服务端渲染逻辑实现

服务端接收请求后，匹配路由、渲染组件、拼接HTML返回给客户端：

// server.js
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router-dom/server');
const fs = require('fs');
const path = require('path');

const app = express();
// 静态资源托管，客户端打包后的JS放在这里
app.use(express.static(path.resolve(__dirname, 'dist/client')));

// 读取客户端打包后的HTML模板
const template = fs.readFileSync(path.resolve(__dirname, 'dist/client/index.html'), 'utf-8');

app.get('*', (req, res) => {
  // 匹配路由的组件，这里简化逻辑，实际项目需要结合路由配置匹配
  const context = {};
  const jsx = React.createElement(StaticRouter, { location: req.url, context }, React.createElement('div', { id: 'root' }, React.createElement('h1', null, '当前页面：', req.url)));
  // 渲染为HTML字符串
  const content = ReactDOMServer.renderToString(jsx);
  // 将渲染内容插入模板
  const html = template.replace('<div id="root"></div>', `<div id="root">${content}</div>`);
  res.send(html);
});

app.listen(3000, () => {
  console.log('服务启动在 http://127.0.0.1:3000');
});

3. 客户端激活逻辑

客户端拿到服务端返回的HTML后，需要执行JS将静态页面转换为可交互的动态页面，这个过程叫做激活：

// client.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  React.createElement(BrowserRouter, null, React.createElement('div', null, React.createElement('h1', null, '当前页面：客户端激活完成')))
);

4. 构建配置

需要分别配置客户端和服务端的打包规则，这里给出简化的Webpack配置示例：

// webpack.client.js 客户端打包配置
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './client.js',
  output: {
    path: path.resolve(__dirname, 'dist/client'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      }
    ]
  }
};

// webpack.server.js 服务端打包配置
const path = require('path');

module.exports = {
  mode: 'development',
  target: 'node',
  entry: './server.js',
  output: {
    path: path.resolve(__dirname, 'dist/server'),
    filename: 'server.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      }
    ]
  }
};

同构应用的注意事项

开发同构应用时还需要注意几个常见问题：

• 避免在组件顶层直接使用浏览器特有的API，所有浏览器相关逻辑都要做环境判断。
• 服务端渲染时不能使用随机值、时间戳等每次执行结果不同的逻辑，否则会导致服务端和客户端渲染结果不一致，出现激活错误。
• 数据请求需要在服务端渲染前完成，确保返回的HTML包含完整数据，避免客户端重复请求。

通过以上步骤，就可以实现一个基础的JavaScript同构应用，实际项目中还可以结合状态管理库、数据请求库等扩展功能，满足更复杂的业务需求。

JavaScript服务端渲染同构应用SSRNode.js修改时间：2026-07-07 07:36:37