當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR） HMR

發布時間：2025/3/20 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR） HMR 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

技術棧：webpack3.9.1+webpack-dev-server2.9.5+React16.x + express4.x

前言

(好慌！可能是因為我很懶,導致...,然后，好吧，我比較懶，沒有然后了。。。切入正題ing，let's do it！！！)

網上關于React的SSR也很多，但都不夠詳細，有的甚至讓初學者一頭霧水。不過這篇文章我將一步步詳細的介紹，從0開始配置React SSR，讓每個看到文章的人都能上手。

SSR的概念

Server Slide Rendering，縮寫為 SSR，即服務器端渲染，因為是之前搞java出身，也明白是怎么回事，其實SSR主要針對 SPA應用，目的大概有以下幾個：

解決單頁面應用的 SEO
單頁應用頁面大部分主要的 HTML并不是服務器返回，服務器只是返回一大串的腳本，頁面上看到的大部分內容都是由腳本生成，對于一般網站影響不大，但是對于一些依賴搜索引擎帶來流量的網站來說則是致命的，搜索引擎無法抓取頁面相關內容，也就是用戶搜不到此網站的相關信息，自然也就無流量可言。

解決渲染白屏
因為頁面 HTML由服務器端返回的腳本生成，一般來說這種腳本的體積都不會太小，客戶端下載需要時間，瀏覽器解析以生成頁面元素也需要時間，這必然會導致頁面的顯示速度比傳統服務器端渲染得要慢，很容易出現首頁白屏的情況，甚至如果瀏覽器禁用了 JS，那么將直接導致頁面連基本的元素都看不到。

React中如何使用服務端渲染

react-dom是React專門為web端開發的渲染工具。我們可以在客戶端使用react-dom的render方法渲染組件，而在服務端，react-dom/server提供我們將react組件渲染成html的方法。

瀏覽器渲染與服務端渲染對比如下：（其中紅色框內就是服務端渲染，很顯然比起瀏覽器渲染快了很多）

項目搭建

項目結構圖如下：

build文件夾用來配置webpack環境

webpack.config.base.js是基礎配置
webpack.config.client.js是客戶端打包配置
webpack.config.server.js是用來打包服務器渲染的配置

package.json:

{"name": "juejin-reactssr","version": "1.0.0","description": "","main": "index.js","scripts": {"build:client": "webpack --config build/webpack.config.client.js","build:server": "webpack --config build/webpack.config.server.js","clear": "rimraf dist","build": "npm run clear && npm run build:client && npm run build:server","start":"node server/server.js"},"author": "Jerry","license": "ISC","dependencies": {"express": "^4.16.3","react": "^16.2.0","react-dom": "^16.2.0","react-router": "^4.2.0","react-router-dom": "^4.2.2"},"devDependencies": {"babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-plugin-transform-decorators-legacy": "^1.3.4","babel-preset-es2015": "^6.24.1","babel-preset-es2015-loose": "^8.0.0","babel-preset-react": "^6.24.1","babel-preset-stage-1": "^6.24.1","cross-env": "^5.1.1","file-loader": "^1.1.5","html-webpack-plugin": "^2.30.1","http-proxy-middleware": "^0.17.4","memory-fs": "^0.4.1","react-hot-loader": "^3.1.3","rimraf": "^2.6.2","uglifyjs-webpack-plugin": "^1.1.2","webpack": "^3.9.1","webpack-dev-server": "^2.9.5","webpack-merge": "^4.1.2"} }webpack.config.base.js:```javascript const path = require('path') module.exports = {output: {path: path.join(__dirname, '../dist'),publicPath: '/public/',},devtool:"source-map",module: {rules: [{test: /.(js|jsx)$/,loader: 'babel-loader',exclude: [path.resolve(__dirname, '../node_modules')]}]}, }復制代碼webpack.config.server.js: ```javascript //此js用來將client/server-entry.js 打包成node能夠執行的文件 const path = require('path') const webpackMerge = require('webpack-merge') const baseConfig = require('./webpack.config.base')const config=webpackMerge(baseConfig,{target: 'node',//打包成node端執行entry: {app: path.join(__dirname, '../client/server-entry.js'),},output: {filename: 'server-entry.js',libraryTarget: 'commonjs2'//使用配置方案 commonjs2}, })module.exports = config復制代碼

client文件夾客戶端用來打包上線

app.js:

import React from 'react' import ReactDOM from 'react-dom' import App from './App.jsx'ReactDOM.render(<App/>, document.getElementById('root'))復制代碼

App.jsx:

import React from 'react' export default class App extends React.Component{render(){return (<div>App</div>)} } 復制代碼

server-entry.js:此文件用來生成服務器渲染所需模板

//服務端用來渲染的模板 import React from 'react' import App from './App.jsx' export default <App/> 復制代碼

template.html:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="root"></div> </body> </html> 復制代碼

server文件夾對應服務端

const express = require('express') const ReactSSR = require('react-dom/server') const serverEntry = require('../dist/server-entry') const app = express()app.get('*', function (req, res) {//ReactDOMServer.renderToString則是把React實例渲染成HTML標簽let appString = ReactSSR.renderToString(serverEntry.default);//返回給客戶端res.send(appString); }) app.listen(3000, function () {console.log('server is listening on 3000 port'); }) 復制代碼

接下來

我們運行 npm start ，打開瀏覽器輸入http://localhost:3000/ 我們發現服務器返回渲染的模板，到這里為止我們達到了最簡單的SSR的目的（但是這還不是我們的最終目的，因為這里單單返回的只有渲染的模板，我們需要返回整個頁面，頁面中可能還引用其他的js等文件）

繼續完善

我們回到server端，改進我們的server.js, + 所在行表示新增的內容

const express = require('express') const ReactSSR = require('react-dom/server') const serverEntry = require('../dist/server-entry') + const fs=require('fs') + const path=require('path') const app = express()// 引入npm run build生成的index.html文件 + const template=fs.readFileSync(path.join(__dirname,'../dist/index.html'),'utf8') app.get('*', function (req, res) {//ReactDOMServer.renderToString則是把React實例渲染成HTML標簽let appString = ReactSSR.renderToString(serverEntry.default);//位置就是我們渲染返回的結果插入的位置+ appString=template.replace('',appString);//返回給客戶端res.send(appString); }) app.listen(3000, function () {console.log('server is listening on 3000 port'); }) 復制代碼

控制臺 npm start ，打開瀏覽器輸入http://localhost:3000/ 發現，頁面引用的app.js文件也同樣返回的是整個頁面，這顯然不是我們所想要的

那是因為我們server.js中 app.get('*', function (req, res) {}這個是對所有請求都是一樣的處理返回整個頁面，所以我們要對靜態頁面單獨處理，我們加上static中間件j就可以了

const express = require('express') const ReactSSR = require('react-dom/server') const serverEntry = require('../dist/server-entry') const fs=require('fs') const path=require('path') const app = express() //處理靜態文件凡是通過 /public訪問的都是靜態文件 + app.use('/public',express.static(path.join(__dirname,"../dist"))) const template=fs.readFileSync(path.join(__dirname,'../dist/index.html'),'utf8') app.get('*', function (req, res) {//ReactDOMServer.renderToString則是把React實例渲染成HTML標簽let appString = ReactSSR.renderToString(serverEntry.default);//位置就是我們渲染返回的結果插入的位置appString=template.replace('',appString);//返回給客戶端res.send(appString); }) app.listen(3000, function () {console.log('server is listening on 3000 port'); }) 復制代碼

這樣app.js返回的就是對應的js內容了，而不是整個頁面了

以上就是我們服務端ssr的整個流程（PS：當然目前還有個不好的地方就是，我們都直接命令行啟動webpack進行打包，就可以滿足我們的需求。但畢竟計劃趕不上變化，有時候你會發現用命令行啟動webpack變得不是那么方便。比如我們在調試react的服務端渲染的時候，我們不可能每次有文件更新，等著webpack打包完輸出到硬盤上某個文件，然后你重啟服務度去加載這個新的文件，因為這太浪費時間了，畢竟開發時你隨時都可能改代碼，而且改動可能還很小。）

那么要解決這個問題怎么辦呢？我們可以在啟動nodejs服務的時候，順帶啟動webpack打包服務，這樣我們可以在nodejs的執行環境中拿到webpack打包的上下文，就可以不重啟服務但每次文件更新都可以拿到最新的bundle。

這個問題我們先放在這里 (todo...)

接下來，我們先來看看wepack-dev-server 以及模塊熱替換(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允許在運行時更新各種模塊，而無需進行完全刷新。)

wepack-dev-server 和 HMR 不適用于生產環境，這意味著它應當只在開發環境使用，接下來我們來配置開發環境

webpack-dev-server配置

首先，package.json

"scripts": {"build:client": "webpack --config build/webpack.config.client.js","build:server": "webpack --config build/webpack.config.server.js",+ "dev:client":"cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js","clear": "rimraf dist","build": "npm run clear && npm run build:client && npm run build:server","start":"node server/server.js"} 復制代碼

webpack.config.client.js

const path = require('path') const webpackMerge = require('webpack-merge') const baseConfig = require('./webpack.config.base') + const webpack=require('webpack') const HTMLWebpackPlugin = require('html-webpack-plugin')//判斷當前是不是開發環境 + const isDev = process.env.NODE_ENV === 'development'const config=webpackMerge(baseConfig,{entry: {app: path.join(__dirname, '../client/app.js'),},output: {filename: '[name].[hash].js',},plugins: [new HTMLWebpackPlugin({template: path.join(__dirname, '../client/template.html')})] })// localhost:8888/filename + if (isDev) {config.entry = {app: ['react-hot-loader/patch',path.join(__dirname, '../client/app.js')]}config.devServer = {host: '0.0.0.0',//代表任何方式進行訪問本地ip localhost都可以compress: true,port: '8888',contentBase: path.join(__dirname, '../dist'),//告訴服務器從哪里提供內容。只有在你想要提供靜態文件時才需要hot: true,//開啟HMR模式overlay: {errors: true //是否顯示錯誤},publicPath: '/public',historyApiFallback: {//404 對應的路徑配置index: '/public/index.html'}}config.plugins.push(new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin()) }module.exports = config 復制代碼

app.js:

import React from 'react' import ReactDOM from 'react-dom' + import {AppContainer} from 'react-hot-loader' import App from "./App.jsx"; + const root=document.getElementById('root'); + const render=Component=>{ReactDOM.render(<AppContainer><Component/></AppContainer>,root)} + render(App); + if(module.hot){module.hot.accept('./App.jsx',()=>{const NextApp =require('./App.jsx').default;render(NextApp);}) } 復制代碼

以上，devServer以及HMR已經配置完成

修改App.jsx內容可以看到頁面無刷新就改變內容了

回到之前未完待續的地方（完成開發時的服務端渲染工作）

在server.js中我們區分環境變量

server目錄下新建dev-static.js 用來處理開發時候的服務端渲染

同時，npm scripts配置如下：

"scripts": {"build:client": "webpack --config build/webpack.config.client.js","build:server": "webpack --config build/webpack.config.server.js","dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js","dev:server": "cross-env NODE_ENV=development node server/server.js","clear": "rimraf dist","build": "npm run clear && npm run build:client && npm run build:server"}, 復制代碼

運行 npm run dev:client 和npm run dev:server，修改App.jsx的內容瀏覽器無刷新更新

以上就是最基礎的React SSR和HMR的配置，但還未涉及到數據以及路由等情況，接下來有時間我會在這個基礎上為大家帶來mobx和react-router等整個項目的配置和部署,github 歡迎大家follow

總結

以上是生活随笔為你收集整理的我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR） HMR的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：我的春招求职经验分享（已拿阿里京东网易等
下一篇： Redis 和 I/O 多路复用