從零開始最小實(shí)現(xiàn) react 服務(wù)器渲染

cheukyin 發(fā)布于2019-08-22 14:02 / 656人閱讀

摘要：從零開始最小實(shí)現(xiàn)服務(wù)器渲染前言最近在寫的時(shí)候想到，如果我部分代碼提供，部分代碼支持，那我應(yīng)該如何寫呢不想拆成個(gè)服務(wù)的情況下而且最近寫的項(xiàng)目里面也用過一些服務(wù)端渲染，如，自己也搭過的項(xiàng)目，確實(shí)開發(fā)體驗(yàn)都非常友好，但是友好歸友好，具體又是如何實(shí)

從零開始最小實(shí)現(xiàn) react 服務(wù)器渲染 前言

最近在寫 koa 的時(shí)候想到，如果我部分代碼提供api，部分代碼支持ssr，那我應(yīng)該如何寫呢？（不想拆成 2個(gè)服務(wù)的情況下）而且最近寫的項(xiàng)目里面也用過一些服務(wù)端渲染，如nuxt，自己也搭過next的項(xiàng)目，確實(shí)開發(fā)體驗(yàn)都非常友好，但是友好歸友好，具體又是如何實(shí)現(xiàn)的呢，諸位有沒有考慮過？
本著求真務(wù)實(shí)的折騰態(tài)度，選了react作為研究對象（主要是vue寫的有點(diǎn)多，惡心了），那下面就簡單就以最小成本寫一個(gè)react的服務(wù)端渲染 demo

用到的技術(shù)棧

react 16 + webpack3 + koa2

看看它是如何實(shí)現(xiàn)服務(wù)端渲染的，here we go！

為什么要用服務(wù)端渲染 優(yōu)點(diǎn)

無非就是兩點(diǎn)

SEO 友好

加快首屏渲染，減少白屏?xí)r間

那么問題來了什么是SEO

直接放文章不做贅述，前端后端分離，怎么解決SEO優(yōu)化的問題呢？ - 知乎，
一句話介紹就是，現(xiàn)在我們做的大多是SPA網(wǎng)站，所有頁面啊數(shù)據(jù)啊都是ajax來的，搜索引擎的spider來收錄網(wǎng)頁的時(shí)候，發(fā)現(xiàn)全空？那么你覺得你的網(wǎng)站收錄的權(quán)重跟效果是好還是不好？

而我們對SEO優(yōu)化，也是下面內(nèi)容所描述的核心就是：

下面是重點(diǎn)！

讓服務(wù)器把有內(nèi)容的HTML返回給我們，事件的話瀏覽器再渲染一次來進(jìn)行掛載

搭建 koa 環(huán)境

新建一個(gè) ssr 項(xiàng)目，并在項(xiàng)目中初始化 npm

mkdir ssr && cd ssr
npm init

下面的代碼我們用到了 import jsx 等語法，node環(huán)境是不支持的，所以需要配置babel

在當(dāng)前項(xiàng)目中新建文件 server.js跟index.js，然后

babel的入口， index.js代碼如下

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

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

我們項(xiàng)目的入口， server.js代碼如下

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

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

app.listen(3000)
console.log("系統(tǒng)啟動，端口：3000")

根目錄下新建一個(gè).babelrc文件
內(nèi)容是：

{
  "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",
}

到這里你運(yùn)行 npm run dev 打開localhost:3000

你就會看到 hello Koa了

是不是很簡單就起了一個(gè)服務(wù)

安裝React

cnpm install react react-dom --save

在根目錄下新建一個(gè)app文件夾，并在文件夾中個(gè)新建一個(gè)main.js

main.js代碼如下

import React from "react"

export default class Home extends React.Component {
  render () {
    return hello world
  }
}

修改之前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()

  ctx.body = str
})

app.listen(3000)

console.log("系統(tǒng)啟動，端口：8080")

這個(gè)時(shí)候再 npm run dev
你就會看到屏幕上出現(xiàn)hello world

再打開chrome 開發(fā)者工具查看我們的請求：

我們的最簡單的react組件變成str傳了進(jìn)來

這里我們用到了一個(gè)方法：
renderToString – 其實(shí)就是將組件渲染成字符串

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

修改main.js的代碼

import React from "react"

export default class Home extends React.Component {
  render () {
    return  window.alert(123)}>hello world
  }
}

再刷新一下我們的頁面，，咦，是不是沒有什么卵用

那是因?yàn)楹蠖酥荒苤v組件渲染成一串html的字符串，事件綁定等事情都是需要在瀏覽器端執(zhí)行的

那事件我們改怎么綁定上去呢？

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

說干就干

配制webpack

在根目錄下面新建一個(gè) webpack.config.js
下面是webpack.config.js的內(nèi)容：

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"],
      }
    ]
  }
}

上面的配置將entry設(shè)置成了app/index.js文件

那我們就創(chuàng)建一個(gè)

下面是app/index.js的代碼：

import Demo from "./main"
import ReactDOM from "react-dom"
import React from "react"
ReactDOM.render(, document.getElementById("root"))

因?yàn)闉g覽器渲染需要將根組件掛載到某個(gè)dom節(jié)點(diǎn)上，所以給我們的react代碼設(shè)置一個(gè)入口

這個(gè)時(shí)候就有一個(gè)問題，就是，document對象node環(huán)境下并不存在，那怎么解決的呢？

不存在？不存在那我就不用就好了，SSR核心就是讓請求的url里面返回具體HTML內(nèi)容，事件什么的并不care，那么我就把根組件直接renderToString
返回出來就好了唄

下面修改我們的服務(wù)代碼，讓代碼支持服務(wù)器渲染

新增一點(diǎn)依賴

cnpm i --save koa-static koa-views ejs

koa-static：處理靜態(tài)文件的中間件

koa-views：配置模板的中間件

ejs：一個(gè)模板引擎

修改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文件夾設(shè)置為靜態(tài)路徑
app.use(require("koa-static")(__dirname + "/public"))
// 將ejs設(shè)置為我們的模板引擎
app.use(views(path.resolve(__dirname, "./views"), { map: { html: "ejs" } }))

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

app.listen(3000)

console.log("系統(tǒng)啟動，端口：8080")

下面新建我們的渲染模板
新建一個(gè)views文件夾

里面新建一個(gè)index.html：




    
    
    
    Document
    


    <%- root %>

這個(gè) html 里面可以放一些變量，比如這個(gè)<%- root %>，就是等下要放renderToString結(jié)果的地方
/main.js則是react構(gòu)建出來的代碼

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

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

2. 運(yùn)行 npm run build， 構(gòu)建出我們的react代碼

3. npm run dev

點(diǎn)擊一下代碼，是不是會 alert(123)

 撒花，恭喜你，一個(gè)最簡單服務(wù)器渲染就已經(jīng)完成

到這里核心的思想就都已經(jīng)講完了，總結(jié)來說就下面三點(diǎn)：

起一個(gè)node服務(wù)

把react 根組件 renderToString渲染成字符串一起返回前端

前端再重新render一次

原理就是這么簡單

但是具體開發(fā)的時(shí)候還會有各種各樣的需求，比如：

不可能我每次改完代碼都重新構(gòu)建看效果吧 => 需要實(shí)時(shí)構(gòu)建

create-react-app 都是熱更新，你還要刷新是不是太蠢了 => 需要支持熱更新

其他一些配套的周邊，如： react-router, redux 或者mobx怎么支持呢 => 需要完善的生態(tài)

.etc

這些問題都是用完官方腳手架之后就回不去了的，所以更多的配置可以參考下面的repo（是一個(gè)工具鏈完善的最小實(shí)現(xiàn)），歡迎提PR

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

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

That’s all.

參考鏈接

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