點擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

react的服務(wù)器渲染

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:58:34

react的服務(wù)器渲染

react的服務(wù)器渲染:這次給大家?guī)韗eact的服務(wù)器渲染，使用react服務(wù)器渲染的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。前言最近在寫 koa 的時候想到，如果我部分代碼提供api，部分代碼支持ssr，那我應(yīng)該如何寫呢？（不想拆成 2個服務(wù)的情況下）而且最近寫的項目里面也

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀react的服務(wù)器渲染:這次給大家?guī)韗eact的服務(wù)器渲染，使用react服務(wù)器渲染的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。前言最近在寫 koa 的時候想到，如果我部分代碼提供api，部分代碼支持ssr，那我應(yīng)該如何寫呢？（不想拆成 2個服務(wù)的情況下）而且最近寫的項目里面也

這次給大家?guī)韗eact的服務(wù)器渲染，使用react服務(wù)器渲染的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

前言

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

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

用到的技術(shù)棧

react 16 + webpack3 + koa2

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

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

優(yōu)點

無非就是兩點

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

那么問題來了什么是SEO

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

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

下面是重點！

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

搭建 koa 環(huán)境

新建一個 ssr 項目，并在項目中初始化 npm

mkdir ssr && cd ssr
npm init

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

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

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

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

我們項目的入口， 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)啟動，端口：3000")

根目錄下新建一個.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",
}

到這里你運行 npm run dev 打開localhost:3000

你就會看到 hello Koa了

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

安裝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 <p>hello world</p>
 }
}

修改之前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)啟動，端口：8080')

這個時候再 npm run dev

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

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

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

這里我們用到了一個方法：

renderToString – 其實就是將組件渲染成字符串

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

修改main.js的代碼

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

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

那是因為后端只能講組件渲染成一串html的字符串，事件綁定等事情都是需要在瀏覽器端執(zhí)行的
那事件我們改怎么綁定上去呢？

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

說干就干

配制webpack

在根目錄下面新建一個 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)建一個

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

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

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

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

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

返回出來就好了唄

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

新增一點依賴

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

koa-static：處理靜態(tài)文件的中間件
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文件夾設(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)啟動，端口：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" rel="external nofollow" >
</head>
<body>
 <p id="root"><%- root %></p>
 <script src="/main.js"></script>
</body>
</html>

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

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

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

1. 在 package.json里面

新增：

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

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

3. npm run dev

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

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

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

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

原理就是這么簡單

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

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

.etc

這些問題都是用完官方腳手架之后就回不去了的，所以更多的配置可以參考下面的repo（是一個工具鏈完善的最小實現(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īng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

react的服務(wù)器渲染

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：服務(wù)器渲染 React

熱門焦點

react的服務(wù)器渲染

react的服務(wù)器渲染

react的服務(wù)器渲染

最新推薦

猜你喜歡

熱門推薦