详解基于React.js和Node.js的SSR实现方案

下面我将为你详细讲解“详解基于React.js 和Node.js的SSR实现方案”的完整攻略。

什么是SSR

SSR（Server-Side Rendering ）是指在服务器端生成组件对应的 HTML 字符串，并将其响应给客户端。与传统的SPA（Single Page Application）开发模式不同，SSR不仅可以提高首屏加载速度，而且可以提高SEO搜索引擎收录效果。

React.js和Node.js的SSR实现方案

在实现React.js和Node.js的SSR方案之前，需要先配置本地开发环境。具体过程如下：

1.安装Node.js环境

在官网中下载安装Node.js环境，并查看是否安装成功：

node -v

2.使用create-react-app脚手架工具创建React应用项目

create-react-app react-ssr-demo
cd react-ssr-demo
yarn start

3.添加SSR依赖

在React项目的根目录下，执行以下命令：

yarn add express
yarn add react-dom react-router-dom axios
yarn add webpack webpack-cli webpack-dev-middleware webpack-hot-middleware

4.添加服务端代码文件

在项目根目录下创建server.js文件，并输入以下代码：

const express = require('express');
const { renderToString } = require('react-dom/server');
const { StaticRouter } = require('react-router-dom');
const path = require('path');
const fs = require('fs');
const app = express();
app.use(express.static(path.resolve(__dirname, '..', 'build')));
app.get('*', (req, res) => {
  const html = fs.readFileSync(path.resolve(__dirname, '..', 'build', 'index.html'), 'utf8');
  const App = require('../src/App').default;
  const context = {}
  const markup = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  const responseHtml = html.replace('{{SSR}}', markup);
  res.send(responseHtml);
});
const port = process.env.PORT || 8000;
app.listen(port, function () {
  console.log(`server started on http://localhost:${port}`);
});

5.启动应用

在终端执行以下命令：

yarn build
node server.js

在浏览器访问http://localhost:8000，即可看到SSR渲染后的页面。

示例说明1

下面以一个简单的用户列表为例进行详细说明。

在React项目中，创建一个UserList组件，在该组件中返回一个用户列表。具体代码如下：

import React from 'react';

const userList = [
  { name: '张三', age: 18, gender: '男' },
  { name: '李四', age: 22, gender: '女' },
  { name: '王二', age: 30, gender: '男' },
];

export default function UserList() {
  return (
    <div>
      <h2>User List</h2>
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          {userList.map((user, index) => (
            <tr key={index}>
              <td>{user.name}</td>
              <td>{user.age}</td>
              <td>{user.gender}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

在服务端代码中使用上文提到的renderToString将UserList组件渲染成HTML字符串。具体代码如下：

const html = fs.readFileSync(path.resolve(__dirname, '..', 'build', 'index.html'), 'utf8');
const App = require('../src/App').default;
const context = {}
const markup = renderToString(<StaticRouter location={req.url} context={context}><App/></StaticRouter>);
const responseHtml = html.replace('{{SSR}}', markup);
res.send(responseHtml);

示例说明2

下面以使用axios进行数据请求为例进行详细说明。

在React项目中，创建一个News组件，在该组件中使用axios进行数据请求并渲染数据列表。具体代码如下：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export default function News() {
  const [newsList, setNewsList] = useState(null);

  useEffect(() => {
    axios.get('/api/news').then(res => {
      setNewsList(res.data.newsList);
    });
  }, []);

  return (
    <div>
      <h2>News List</h2>
      {newsList ? (
        <ul>
          {newsList.map((news, index) => (
            <li key={index}>
              <a href={news.link} target="_blank">
                {news.title}
              </a>
            </li>
          ))}
        </ul>
      ) : (
        <div>正在加载中...</div>
      )}
    </div>
  );
}

在服务端中添加路由和接口，使用axios获取模拟数据并返回。具体代码如下：

const axios = require('axios');
app.get('/api/news', function (req, res) {
  axios.get('https://api.apiopen.top/getWangYiNews').then(response => {
    const newsList = response.data.result;
    res.json({ code: 0, newsList });
  });
});

启动应用后，在浏览器访问http://localhost:8000/news即可看到SSR渲染后的数据列表。

总结

本文主要介绍了React.js和Node.js的SSR实现方案，通过搭建开发环境、添加SSR依赖、添加服务端代码文件等步骤实现了SSR渲染。并提供了两条使用示例，一是渲染用户列表，一是通过axios进行数据请求并渲染数据列表。