带着你一步步从零开始使用 React + Koa 开发 SSR 案例（二）

写在前面

本来在上周就想写下这篇文章，但是在学习的过程中，越来越觉得之前的很多思路需要修改，所以就下定决心，等我重构完这个项目之后再写第二篇教程。

看过我第一篇文章的朋友们应该已经大致了解了 React SSR 的基本思路了，如果没有看第一篇文章的同学建议先看教程一，但是只是掌握这些还是远远不够的。

本文涵盖了项目的整个构建过程，包括在 React 项目中使用 Koa 作为 HTTP 服务器、在 Koa 中使用中间件来处理 HTTP 请求，以及在 React 组件中使用 SSR 来渲染页面。

开始

安装依赖

npm install koa react react-dom

创建 Koa 服务

在项目中创建一个名为 app.js 的文件，然后在其中添加以下代码：

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx, next) => {
  ctx.body = 'Hello World!';
});

app.listen(3000);

创建 React 组件

在项目中创建一个名为 App.js 的文件，然后在其中添加以下代码：

import React from 'react';

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

export default App;

在 Koa 中使用 React SSR

在 app.js 文件中，在 ctx.body 的赋值之前添加以下代码：

const React = require('react');
const ReactDOMServer = require('react-dom/server');

const App = require('./App.js');

ctx.body = ReactDOMServer.renderToString(<App />);

运行项目

在终端中运行以下命令：

node app.js

然后打开浏览器并访问 http://localhost:3000，你应该可以看到 "Hello World!" 显示在页面上。

结语

本文只是介绍了如何使用 React + Koa 开发 SSR 项目的基础知识，要想深入了解，还需要进一步学习和实践。