返回

服务端渲染：如何给你的 React 应用插上翅膀

前端

服务端渲染（SSR）是一种将 React 组件渲染为 HTML 字符串并将其发送到客户端的技术。与传统的客户端渲染相比，SSR 具有以下优势：

  • 更快的页面加载时间： SSR 可以预先渲染页面，从而缩短首次内容绘制（FCP）和首次有意义绘制（FMP）的时间。
  • 更好的 SEO： SSR 提供的预渲染内容可以让搜索引擎轻松抓取和索引你的网站，从而提高你的 SEO 排名。
  • 更稳定的性能： SSR 可以消除客户端环境的差异，确保在所有设备上提供一致的体验。

要将你的 React 应用转换为 Universal React 应用，你可以遵循以下步骤：

  1. 安装必要的依赖项：

    • npm i react-dom/server
    • npm i @babel/node

  2. 创建服务端渲染入口：
    在你的项目中创建一个名为 server.js 的文件，并添加以下代码：

    import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

const express = require('express');
const app = express();

app.get('*', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`<!DOCTYPE html>${html}</html>`);
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

  3. 配置 Webpack：
    在你的 Webpack 配置中，将 target 设置为 node，并添加 server.js 作为入口：

    module.exports = {
  target: 'node',
  entry: './server.js',
  ...
};

  4. 运行服务端：
    使用以下命令启动服务端：

    node server.js

现在，你的 React 应用将同时在客户端和服务端渲染。这将显著提高你的页面的加载速度、SEO 和性能。