前言

最近在寫(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

一句話(huà)介紹就是，現(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返回給我們，事件的話(huà)瀏覽器再渲染一次來(lái)進(jìn)行掛載

搭建 koa 環(huán)境

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

mkdir ssr && cd ssrnpm 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()// responseapp.use((ctx) => { ctx.body = 'Hello Koa'})app.listen(3000)console.log("系統(tǒng)啟動(dòng)，端口：3000")

根目錄下新建一個(gè).babelrc文件

內(nèi)容是：

{ "presets": ["react", "env"]}

安裝上面所需要的依賴(lài)

npm install babel-core babel-polyfill babel-preset-env babel-preset-react nodemon --save-devnpm 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()// responseapp.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