使用 React + Koa 从零开始一步一步的带你开发一个 36kr SSR 案例

最新推荐文章于 2025-05-25 16:29:50 发布

原创

最新推荐文章于 2025-05-25 16:29:50 发布 · 2.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#react #koa #web #ssr #nodejs

前言

本项目源码地址 https://github.com/zwmmm/react-ssr-36kr 喜欢的给个star鼓励下作者，有问题可以提issue。

也许你看过其他的ssr教程都会先说一说spa和ssr的区别以及优缺点，但是我相信能点进来看的小伙伴们肯定是对这两个概念有过了解的，也无需我在这里多费口舌。不懂的可以直接看这里

那么我们就直接进入正题了!!!

搭建目录结构

首先我们创建一个react-ssr文件夹, 执行git init初始化git仓库，添加如下目录和文件。

.
|-- app
|-- build
|-- server
|-- template
|-- package.json
|-- README.md
|-- .gitignore

.gitignore忽略文件

node_modules
.cache
.idea

webpack的配置

安装webpack

npm install --save-dev webpack webpack-cli

推荐使用 --save-dev 安装，因为现在webpack版本很多，全局安装不利于各个项目管理。

配置react环境

首先我们明确下目标，要想运行react的代码,首先将react中的jsx编译成js代码。

先在app下创建入口文件main.js

|-- app
|   |-- main.js

在template下创建模板文件app.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

在build文件夹中创建utils.js文件。先写一些公共的方法。

const path = require('path');

exports.resolve = (...arg) => path.join(__dirname, '..', ...arg);

在build文件夹中创建webpack.base.config.js文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
   
    resolve } = require('./utils');

module.exports = {
   
   
    entry: resolve('app/main.js'),
    output: {
   
   
        path: resolve('dist'),
        filename: 'index.js'
    },
    module: {
   
   
        rules: [
            {
   
   
                test: /\.(js|jsx)$/,
                // 只编译app文件夹下的文件
                include: resolve('app'),
                use: {
   
   
                    loader: 'babel-loader',
                    options: {
   
   
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react',
                        ],
                    }
                }
            },
        ]
    },
    resolve: {
   
   
        // 设置路径别名
        alias: {
   
   
            '@': resolve('app'),
        },
        // 文件后缀自动补全, 就是你import文件的时候如果没写后缀名就会优先找下面这几个
        extensions: [ '.js', '.jsx' ],
    },
    // 第三方依赖，可以写在这里，不打包
    externals: {
   
   },
    plugins: [
        new HtmlWebpackPlugin({
   
   
            filename: 'index.html',
            template: resolve('template/app.html')
        })
    ]
}

安装下上面用到的包

npm i -D @babel/cli @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin

简单说下这几个配置的作用

entry 指定入口
output 设置出口并确定输出的文件名称
rules 配置loader
babel 编译代码，将代码转成浏览器可以运行的代码
HtmlWebpackPlugin 自动生成html的插件

如果不熟悉babel的同学可以看这篇文章，不过我使用了babel7 所以在包名上会有不同，新版的babel统一有@babel前缀

配置好了就需要我们写点react代码测试下啦

首先下载react相关的资源包

npm i --save react react-dom

在app/main.js编写如下代码

import React from 'react';
import { render } from 'react-dom';

function App() {
    return <div>Hello React</div>
}

render(<App/>, document.getElementById('app'));

在package.json中增加一条script命令

{
   
   
  "scripts": {
   
   
    "start": "webpack --config build/webpack.base.config.js"
  },
}

执行npm start
打开dist/index.html就可以查看效果，正确情况下会显示Hello React

到此我们就已经完成我们的第一阶段，可以编写react代码

配置开发环境

上面我们说了如何编译react代码，但是在我们实际开发中不可能每次修改代码都要npm start，所以在上面的基础上配置一个dev环境

在配置dev环境之前先介绍下webpack-dev-server，这个插件可以在本地启动一个本地服务，并且提供了非常丰富的功能，例如热更新，接口代理。首先我们安装下

npm i -D webpack-dev-server

在build下新建webpack.dev.config.js

const merge = require('webpack-merge');
const webpack = require('webpack');
const baseConfig = require('./webpack.base.config');

module.exports = merge(baseConfig, {
   
   
    // 用于调试, inline-source-map模式效率比较高, 所以在dev模式下推荐使用这个
    devtool: 'inline-source-map',
    mode: 'development',
    // 设置dev服务器
    devServer: {
   
   
        // 设置端口号,默认8080
        port: