从零搭建 React 服务端渲染，拥抱高效开发

前端

2023-09-16 18:04:12

React服务端渲染：终极指南

随着数字世界的飞速发展，用户对网站和应用程序的性能期望不断提高。为了满足这些期望，前端开发人员正在不断探索新的技术和方法来优化Web应用程序的性能。服务端渲染（SSR） 就是其中一种非常有效的技术。

什么是服务端渲染？

SSR是一种技术，它允许在服务器端渲染React组件，并将结果HTML返回给客户端。这与客户端渲染（CSR）形成对比，在CSR中，组件是在客户端浏览器中渲染的。

服务端渲染的优势

SSR相对于CSR具有许多优势，包括：

更快的页面加载速度： 由于组件已在服务器端渲染，因此页面可以更快地加载。
更好的交互性： 页面可以在加载时与之交互，即使在网络条件较差的情况下也是如此。
更友好的SEO： SSR可以生成静态HTML页面，这更有利于搜索引擎的抓取和索引。

如何从头开始构建React服务端渲染框架

构建自己的基于React的SSR框架并不难。以下是如何做到的：

1. 安装必要的依赖项

npm install react react-dom @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime serverless-http express

2. 创建项目结构

mkdir my-ssr-app
cd my-ssr-app

3. 初始化项目

npm init -y

4. 创建必要的配置文件

在项目根目录中创建一个名为.babelrc的文件，内容如下：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

在项目根目录中创建一个名为package.json的文件，内容如下：

{
  "name": "my-ssr-app",
  "version": "1.0.0",
  "description": "My React SSR App",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "serverless-http": "^3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.13",
    "@babel/plugin-transform-runtime": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "@babel/preset-react": "^7.12.13"
  }
}

5. 创建React组件

在src目录中创建一个名为components的目录，并在其中创建一个名为App.js的文件，内容如下：

import React from "react";

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

export default App;

6. 创建服务端渲染函数

在src目录中创建一个名为server.js的文件，内容如下：

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

export function renderToString(req, res) {
  const html = ReactDOMServer.renderToString(<App />);

  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        
      </head>
      <body>
        <div id="root">${html}</div>
      </body>
    </html>
  `);
}

7. 创建Express服务器

在src目录中创建一个名为index.js的文件，内容如下：

import express from "express";
import { renderToString } from "./server";
import { serverlessHttp } from "serverless-http";

const app = express();

app.get("/", (req, res) => {
  renderToString(req, res);
});

export const handler = serverlessHttp(app);