React + Koa SSR 从入门到放弃实践 （一）

SPA和SSR的概念区别就不再多说了，干货直接开整。

目标：使用koa服务器渲染react组件，生成一个静态文件

项目初始化三连

mkdir react-ssr cd react-ssr npm init

使用Koa搭建Node服务

---

npm install koa -save

创建src/index.js文件

|-- src
    |-- index.js
|-- package.json

const Koa = require("koa");
const koa = new Koa();

// 生成一个有内容静态网页
koa.use( ctx => {
  ctx.body = '<h1>hello,koa</h1>';
})

// 用koa创建一个服务器
koa.listen(3000,()=>{
  console.log("koa 服务器已启动 端口：3000");
});

---

webpack的配置

---

安装webpack

npm install webpack webpack-cli -save-dev

创建webpack.server.js文件

|-- src
    |-- index.js
|-- package.json
|-- webpack.server.js

安装 babel

npm install @babel/cli @babel/core @babel/preset-env babel-loader -save-dev

安装 webpack-node-externals

npm install webpack-node-externals -save-dev

webpack-node-externals作用是为了不将node_modules中的依赖捆绑在一起，生成外部函数

打开 webpack.server.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports={
  target: 'node', // 和webpack-node-externals配套使用
  externals: [nodeExternals()],
  devtool: 'inline-source-map',// 用于调试
  mode: 'development',// 开发模式
  entry: './src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test: /\.(js|jsx)$/,
        // 只编译app文件夹下的文件
        include: path.resolve(__dirname,'src'),
        use: {
            loader: 'babel-loader',
            options: {
                presets: [
                    '@babel/preset-env',
                    '@babel/preset-react',// 后面KOA服务器渲染React安装
                ],
            }
        }
      }
    ]
  }
}

然后对src/index.js进行修改

    const Koa = require("koa");
+   import Koa from "koa";// 使用babel 后支持 esmodule

通过下面进行打包

webpack --config webpack.server.js

node build/bundle.js

---

KOA服务器渲染React

---

安装 react react-dom 用来创建 组件 npm install react react-dom -save

安装 preset-react 使用webpack打包时可以支持react组件 npm install @babel/preset-react -save-dev

打开 src/index.js

import Koa from "koa";// 使用babel 后支持 esmodule
import React from "react";// 创建react组件必须使用
import { renderToString } from "react-dom/server";// 
const koa = new Koa();

// 创建一个无状态组件
const Home = () => <div>'欢迎来到我的首页'</div>
// 生成一个有内容静态网页
koa.use( ctx => {
  ctx.body = renderToString(<Home/>);
})

// 用koa创建一个服务器
koa.listen(3000,()=>{
  console.log("koa 服务器已启动 端口：3000");
});