手動實現(xiàn)一個自己的 React 服務端渲染
嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。今天的主題是 React 服務端渲染。
# 為什么要有服務端渲染？
框架開發(fā)是當前炙手可熱的流行趨勢，SPA 這種模式也被越來越多的人認可，但是隨著研究的深入，一些問題就慢慢凸顯出來了。
最重要的兩點，一是首頁需要等待；第二，不利于 SEO 。
為了解決這些問題，框架也推出了自己的解決方案——Server Side Rendering 服務端渲染。
本篇文章咱們就以 React 為例，聊聊如何在 react 環(huán)境下手動實現(xiàn)一個 SSR ?
# 真槍實彈的第一步
首先，在項目下創(chuàng)建一個文件夾 src，在里面放置三個文件夾 client （客戶端代碼），common（共同的代碼），server（服務端代碼）。
這里 server 文件夾是我們關注的重點。在這個 server 文件夾下，我們需要創(chuàng)建一個 http.js 文件，內(nèi)容如下，目的是啟動一個服務。
//http.jsconst express = require("express")const app = express()app.listen(3000,function(){console.log("server is runing")})export default app;
同時再添加一個 index.js 文件，內(nèi)容如下。拆分兩個文件的目的是為了保證服務代碼和業(yè)務代碼分離。
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(` //這是一個字符串模板哦react-ssr `)})
這里面解釋幾個點：
renderToString 這個方法是專門將組件轉(zhuǎn)成字符串格式的。
Home 是在 common 文件夾下創(chuàng)建的一個組件 Home.js，內(nèi)容如下：
import React from "react"function Home(){return (<div>hello worlddiv>)}export default Home;
注意：
如果我們直接使用 Node 來啟動服務，會報語法性錯誤，錯誤原因：
Node 下不支持 ESModule 語法
Node 下不支持 React 中的 JSX 語法
所以我們需要引入 webpack 進行打包，然后再啟動服務。
# Webpack 配置?
我們在項目下創(chuàng)建一個 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，添加預設 presets。
# Webpack 打包
配置文件完成之后，我們需要打包，打包指令就是 npx webpack -- config?webpack.server.js。對于這種打包指令很麻煩，我們需要在 package.json 中配置一個自己用的順手的指令，修改如下：
//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"}}
當 npm run dev 一打包，就會出現(xiàn)一個 dist 文件夾，里面有個 build.js 文件。
Node 啟動服務
最后，我們在終端使用 node dist/build.js 就可以直接啟動這個文件。在網(wǎng)頁中輸入對應的 url，就會顯示一個我們手動實現(xiàn)的服務端渲染案例，但這個頁面是一個純靜態(tài)的頁面。
至此，實現(xiàn)一個 React 的 SSR 就算完成了~
推薦閱讀：
字節(jié)百度前端面試真題：異步處理方案（內(nèi)附答案）
前端人因為 Vue3 的 Ref-sugar 提案打起來了！
點點“贊”和“在看”，保護頭發(fā)，減少bug。