前言

最近在寫(xiě) koa 的時(shí)候想到，如果我部分代碼提供api，部分代碼支持ssr，那我應(yīng)該如何寫(xiě)呢？（不想拆成 2個(gè)服務(wù)的情況下）
而且最近寫(xiě)的項(xiàng)目里面也用過(guò)一些服務(wù)端渲染，如nuxt，自己也搭過(guò)next的項(xiàng)目，確實(shí)開(kāi)發(fā)體驗(yàn)都非常友好，但是友好歸友好，具體又是如何實(shí)現(xiàn)的呢，諸位有沒(méi)有考慮過(guò)？

本著求真務(wù)實(shí)的折騰態(tài)度，選了react作為研究對(duì)象（主要是vue寫(xiě)的有點(diǎn)多，惡心了），那下面就簡(jiǎn)單就以最小成本寫(xiě)一個(gè)react的服務(wù)端渲染 demo

用到的技術(shù)棧

react 16 + webpack3 + koa2

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

為什么要用服務(wù)端渲染

優(yōu)點(diǎn)

無(wú)非就是兩點(diǎn)

1. SEO 友好
2. 加快首屏渲染，減少白屏?xí)r間

那么問(wèn)題來(lái)了什么是SEO

一句話介紹就是，現(xiàn)在我們做的大多是SPA網(wǎng)站，所有頁(yè)面啊數(shù)據(jù)啊都是ajax來(lái)的，搜索引擎的spider來(lái)收錄網(wǎng)頁(yè)的時(shí)候，發(fā)現(xiàn)全空？那么你覺(jué)得你的網(wǎng)站收錄的權(quán)重跟效果是好還是不好？

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

下面是重點(diǎn)！

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

搭建 koa 環(huán)境

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

mkdir ssr && cd ssr
npm init

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

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

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

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

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

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

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

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

app.listen(3000)
console.log("系統(tǒng)啟動(dò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

配置啟動(dòng)腳本

package.json

"scripts": {
 "dev": "nodemon index.js",
}

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

你就會(huì)看到 hello Koa了

是不是很簡(jiǎn)單就起了一個(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 <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('系統(tǒng)啟動(dòng)，端口：8080')

這個(gè)時(shí)候再 npm run dev

你就會(huì)看到屏幕上出現(xiàn)hello world

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

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

這里我們用到了一個(gè)方法：

renderToString – 其實(shí)就是將組件渲染成字符串

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

修改main.js的代碼

import React from 'react'

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

再刷新一下我們的頁(yè)面，，咦，是不是沒(méi)有什么卵用

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

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

說(shuō)干就干

配制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(<Demo />, document.getElementById('root'))

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

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

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

返回出來(lái)就好了唄

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

新增一點(diǎn)依賴

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

1. koa-static： 處理靜態(tài)文件的中間件
2. koa-views： 配置模板的中間件
3. 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(<Demo />)
 await ctx.render('index', {
  root: str
 })
})

app.listen(3000)

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

下面新建我們的渲染模板

新建一個(gè)views文件夾

里面新建一個(gè)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" rel="external nofollow" >
</head>
<body>
  <div id="root"><%- root %></div>
  <script src="/main.js"></script>
</body>
</html>

這個(gè) html 里面可以放一些變量，比如這個(gè)<%- root %>，就是等下要放renderToString結(jié)果的地方

/main.js則是react構(gòu)建出來(lái)的代碼

下面直接來(lái)測(cè)試一下我們的代碼

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)擊一下代碼，是不是會(huì) alert(123)

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

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

1. 起一個(gè)node服務(wù)
2. 把react 根組件 renderToString渲染成字符串一起返回前端
3. 前端再重新render一次

原理就是這么簡(jiǎn)單

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

1. 不可能我每次改完代碼都重新構(gòu)建看效果吧 => 需要 實(shí)時(shí)構(gòu)建
2. create-react-app 都是熱更新，你還要刷新是不是太蠢了 => 需要支持熱更新
3. 其他一些配套的周邊，如： react-router, redux 或者mobx怎么支持呢 => 需要完善的生態(tài)

.etc

這些問(wèn)題都是用完 官方腳手架之后就回不去了的，所以更多的配置可以參考下面的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端差別不大

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論