從零開始最小實現 react 伺服器渲染

前言

最近在寫 koa 的時候想到，如果我部分程式碼提供api，部分程式碼支援ssr，那我應該如何寫呢？（不想拆成 2個服務的情況下）

而且最近寫的專案裡面也用過一些服務端渲染，如nuxt，自己也搭過next的專案，確實開發體驗都非常友好，但是友好歸友好，具體又是如何實現的呢，諸位有沒有考慮過？

本著求真務實的折騰態度，選了react作為研究物件（主要是vue寫的有點多，噁心了），那下面就簡單就以最小成本寫一個react的服務端渲染 demo

用到的技術棧

react 16 + webpack3 + koa2

看看它是如何實現服務端渲染的，here we go！

---

為什麼要用服務端渲染

優點

無非就是兩點

1. SEO 友好
2. 加快首屏渲染，減少白屏時間

那麼問題來了什麼是SEO

直接放文章不做贅述，前端後端分離，怎麼解決SEO優化的問題呢？ - 知乎， 一句話介紹就是，現在我們做的大多是SPA網站，所有頁面啊資料啊都是ajax來的，搜尋引擎的spider來收錄網頁的時候，發現全空？那麼你覺得你的網站收錄的權重跟效果是好還是不好？

而我們對SEO優化，也是下面內容所描述的核心就是：

下面是重點！

讓伺服器把有內容的HTML返回給我們，事件的話瀏覽器再渲染一次來進行掛載
複製程式碼

---

搭建 koa 環境

新建一個 ssr 專案，並在專案中初始化 npm

mkdir ssr && cd ssr
npm init
複製程式碼

下面的程式碼我們用到了 import jsx 等語法，node環境是不支援的，所以需要配置babel

在當前專案中新建檔案 server.js跟index.js，然後

babel的入口， index.js程式碼如下

require('babel-core/register')()

require('babel-polyfill')
require('./server')

複製程式碼

我們專案的入口， server.js程式碼如下

import Koa from 'koa'
const app = new Koa()

// response
app.use((ctx) => {
  ctx.body = 'Hello Koa'
})

app.listen(3000)
console.log("系統啟動，埠：3000")

複製程式碼

根目錄下新建一個.babelrc檔案 內容是：

{
  "presets": ["react", "env"]
}
複製程式碼

安裝上面所需要的依賴

npm install babel-core babel-polyfill babel-preset-env babel-preset-react nodemon --save-dev

npm i koa --save
複製程式碼

配置啟動指令碼

package.json

"scripts": {
  "dev": "nodemon index.js",
}
複製程式碼

到這裡你執行 npm run dev 開啟localhost:3000

你就會看到 hello Koa了

是不是很簡單就起了一個服務

---

安裝React

cnpm install react react-dom --save
複製程式碼

在根目錄下新建一個app資料夾，並在資料夾中個新建一個main.js

main.js程式碼如下

import React from 'react'

export default class Home extends React.Component {
  render () {
    return <div>hello world</div>
  }
}
複製程式碼

修改之前server.js

import Koa from 'koa'
import React from 'react'
import { renderToString } from 'react-dom/server'
import App from './app/main'

const app = new Koa()

// response
app.use(ctx => {
  let str = renderToString(<App />)

  ctx.body = str
})

app.listen(3000)

console.log('系統啟動，埠：8080')

複製程式碼

這個時候再 npm run dev 你就會看到螢幕上出現hello world

再開啟chrome 開發者工具檢視我們的請求：

我們的最簡單的react元件變成str傳了進來

這裡我們用到了一個方法： renderToString – 其實就是將元件渲染成字串

目前為止，我們都還沒有給元件加上事件等互動行為，下面那讓我們來試一下

修改main.js的程式碼

import React from 'react'

export default class Home extends React.Component {
  render () {
    return <div onClick={() => window.alert(123)}>hello world</div>
  }
}
複製程式碼

再重新整理一下我們的頁面，，咦，是不是沒有什麼卵用

那是因為後端只能講元件渲染成一串html的字串，事件繫結等事情都是需要在瀏覽器端執行的

那事件我們改怎麼繫結上去呢？

那你肯定就會猜到，既然伺服器渲染出來的是一串html，掛載事件的方式是不是在瀏覽器重新渲染一次就好了呢

說幹就幹

---

配製webpack

在根目錄下面新建一個 webpack.config.js 下面是webpack.config.js的內容：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: {
    main: './app/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'public'),
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    loaders: [
      {test: /\.jsx?$/,
        loaders: ['babel-loader'],
      }
    ]
  }
}

複製程式碼

安裝依賴

cnpm install webpack babel-loader --save
複製程式碼

上面的配置將entry設定成了app/index.js檔案

那我們就建立一個

下面是app/index.js的程式碼：

import Demo from './main'
import ReactDOM from 'react-dom'
import React from 'react'
ReactDOM.render(<Demo />, document.getElementById('root'))
複製程式碼

因為瀏覽器渲染需要將根元件掛載到某個dom節點上，所以給我們的react程式碼設定一個入口

這個時候就有一個問題，就是，document物件node環境下並不存在，那怎麼解決的呢？

不存在？不存在那我就不用就好了，SSR核心就是讓請求的url裡面返回具體HTML內容，事件什麼的並不care，那麼我就把根元件直接renderToString 返回出來就好了唄

下面修改我們的服務程式碼，讓程式碼支援伺服器渲染

新增一點依賴

cnpm i --save koa-static koa-views ejs
複製程式碼

• koa-static： 處理靜態檔案的中介軟體
• koa-views： 配置模板的中介軟體
• ejs：一個模板引擎

修改server.js的程式碼

import Koa from 'koa'
import React from 'react'
import { renderToString } from 'react-dom/server'
import views from 'koa-views'
import path from 'path'

import Demo from './app/main'
const app = new Koa()
// 將/public資料夾設定為靜態路徑
app.use(require('koa-static')(__dirname + '/public'))
// 將ejs設定為我們的模板引擎
app.use(views(path.resolve(__dirname, './views'), { map: { html: 'ejs' } }))

// response
app.use(async ctx => {
  let str = renderToString(<Demo />)
  await ctx.render('index', {
    root: str
  })
})

app.listen(3000)

console.log('系統啟動，埠：8080')

複製程式碼

下面新建我們的渲染模板 新建一個views資料夾

裡面新建一個index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <base href="/client">
</head>
<body>
    <div id="root"><%- root %></div>
    <script src="/main.js"></script>
</body>
</html>
複製程式碼

這個 html 裡面可以放一些變數，比如這個<%- root %>，就是等下要放renderToString結果的地方 /main.js則是react構建出來的程式碼

下面直接來測試一下我們的程式碼

1. 在 package.json裡面
新增：
  "scripts": {
    "dev": "nodemon index.js",
    "build": "webpack"
  },

2. 執行 npm run build， 構建出我們的react程式碼

3. npm run dev

複製程式碼

點選一下程式碼，是不是會 alert(123)

:tada: 撒花，恭喜你，一個最簡單伺服器渲染就已經完成

到這裡核心的思想就都已經講完了，總結來說就下面三點：

1. 起一個node服務
2. 把react 根元件 renderToString渲染成字串一起返回前端
3. 前端再重新render一次

原理就是這麼簡單

但是具體開發的時候還會有各種各樣的需求，比如：

1. 不可能我每次改完程式碼都重新構建看效果吧 => 需要 實時構建
2. create-react-app 都是熱更新，你還要重新整理是不是太蠢了 => 需要支援熱更新
3. 其他一些配套的周邊，如： react-router, redux 或者mobx怎麼支援呢 => 需要完善的生態
4. 頁面內容明明服務端已經返回給我了，客戶端又重新渲染一次是不是很蠢，蘭妃資源 => 使用 react 新的api .etc

這些的原理以及配置都不太難，單就是需要花點時間，所以你可以直接參考以下（大部分都是最新的配置）

更多配置

更多的配置可以參考下面的repo（是一個工具鏈完善的最小實現，歡迎提PR，star）

GitHub - ws456999/koa-react-ssr-starter: to understand && to explain how react ssr works

你可以在裡面找到 react + react-router + mobx-state-tree + postcss + 熱更新的配置，除了react-router的配置有些差別，其他都跟client端差別不大

That’s all.

參考連結

• 3-17 通過 Node.js API 啟動 Webpack · 深入淺出 Webpack
• Koa2 + React + Webpack熱載入部署方案 | Nekoの喵窩
• webpack - koa服務端熱更新問題 - SegmentFault
• 轉 nodemon 基本配置與使用 - {前端開發} - 部落格園
• React 服務端渲染緩慢原因淺析 - 某熊的全棧之路 - SegmentFault
• ReactDOMServer - React