手動實(shí)現(xiàn)一個(gè)自己的 React 服務(wù)端渲染
嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。今天的主題是 React 服務(wù)端渲染。
# 為什么要有服務(wù)端渲染？
框架開發(fā)是當(dāng)前炙手可熱的流行趨勢，SPA 這種模式也被越來越多的人認(rèn)可，但是隨著研究的深入，一些問題就慢慢凸顯出來了。
最重要的兩點(diǎn)，一是首頁需要等待；第二，不利于 SEO 。
為了解決這些問題，框架也推出了自己的解決方案——Server Side Rendering 服務(wù)端渲染。
本篇文章咱們就以 React 為例，聊聊如何在 react 環(huán)境下手動實(shí)現(xiàn)一個(gè) SSR ?
# 真槍實(shí)彈的第一步
首先，在項(xiàng)目下創(chuàng)建一個(gè)文件夾 src，在里面放置三個(gè)文件夾 client （客戶端代碼），common（共同的代碼），server（服務(wù)端代碼）。
這里 server 文件夾是我們關(guān)注的重點(diǎn)。在這個(gè) server 文件夾下，我們需要?jiǎng)?chuàng)建一個(gè) http.js 文件，內(nèi)容如下，目的是啟動一個(gè)服務(wù)。
//http.jsconst express = require("express")const app = express()app.listen(3000,function(){console.log("server is runing")})export default app;
同時(shí)再添加一個(gè) index.js 文件，內(nèi)容如下。拆分兩個(gè)文件的目的是為了保證服務(wù)代碼和業(yè)務(wù)代碼分離。
import app from "./http"import React from "react"import {renderToString} from "react-dom/server" //將組件轉(zhuǎn)成字符串格式import Home from "../common/Home"app.get("/",function(req,res){const string = renderToString(<Home>Home>) //res.send(` //這是一個(gè)字符串模板哦react-ssr `)})
這里面解釋幾個(gè)點(diǎn)：
renderToString 這個(gè)方法是專門將組件轉(zhuǎn)成字符串格式的。
Home 是在 common 文件夾下創(chuàng)建的一個(gè)組件 Home.js，內(nèi)容如下：
import React from "react"function Home(){return (<div>hello worlddiv>)}export default Home;
注意：
如果我們直接使用 Node 來啟動服務(wù)，會報(bào)語法性錯(cuò)誤，錯(cuò)誤原因：
Node 下不支持 ESModule 語法
Node 下不支持 React 中的 JSX 語法
所以我們需要引入 webpack 進(jìn)行打包，然后再啟動服務(wù)。
# Webpack 配置?
我們在項(xiàng)目下創(chuàng)建一個(gè) webpack.server.js，內(nèi)容如下：
const path = require("path")module.exports = {mode:"none",target:"node",entry:"./src/server/index.js",output:{path:path.join(__dirname,"dist"),filename:"build.js"},module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:{loader:"babel-loader",options:{presets:['@babel/preset-env','@babel/preset-react']}}}]}}
注意，我們需要安裝 webpack ?webpack-cli。
對于 js 文件，我們需要使用 babel-loader，把它交給 babel 處理，所以要下載
Babel-loader @babel/core @babel/preset-env @babel/preset-react。
接下來配置 options，添加預(yù)設(shè) presets。
# Webpack 打包
配置文件完成之后，我們需要打包，打包指令就是 npx webpack -- config?webpack.server.js。對于這種打包指令很麻煩，我們需要在 package.json 中配置一個(gè)自己用的順手的指令，修改如下：
//package.json{"name": "react-ssr","version": "1.0.0","description": "","main": "main.js","scripts": {"dev:server-build":"npx webpack --config webpack.server.js"},"keywords": [],"author": "","license": "ISC","dependencies": {"@babel/core": "^7.12.9","@babel/preset-env": "^7.12.7","@babel/preset-react": "^7.12.7","babel-loader": "^8.2.2","express": "^4.17.1","react": "^17.0.1","react-dom": "^17.0.1","webpack": "^5.9.0","webpack-cli": "^4.2.0"}}
當(dāng) npm run dev 一打包，就會出現(xiàn)一個(gè) dist 文件夾，里面有個(gè) build.js 文件。
Node 啟動服務(wù)
最后，我們在終端使用 node dist/build.js 就可以直接啟動這個(gè)文件。在網(wǎng)頁中輸入對應(yīng)的 url，就會顯示一個(gè)我們手動實(shí)現(xiàn)的服務(wù)端渲染案例，但這個(gè)頁面是一個(gè)純靜態(tài)的頁面。
至此，實(shí)現(xiàn)一個(gè) React 的 SSR 就算完成了~
推薦閱讀：
字節(jié)百度前端面試真題：異步處理方案（內(nèi)附答案）
前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來了！
黑盒續(xù)集 | 如何在 CRA 黑盒中爭取主動權(quán)？
點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。