介紹
react-dom是React專門為web端開發(fā)的渲染工具。我們可以在客戶端用react-dom的render方法渲染組件，而在服務端，react-dom/server提供我們將react組件渲染成HTML的方法
服務端nodejs沒有document.body對象的
首先要把服務端渲染的內容插入到index.html的body中，然后在把整個的html返回到瀏覽器端，這樣才能把整個瀏覽器渲染完成
目錄結構
image.png
添加的依賴
"dependencies": {
"express": "^4.16.2"
}
webpack.config.client.js 代替webpack.config.js
const path = require('path')
const webpack = require('webpack')
// 在瀏覽器中打開頁面需要引入
const HTMLPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app: path.join(__dirname, '../client/app.js'),
},
output: {
// []表示一個變量 hash如果有變動就刷新瀏覽器緩存 否則不刷新
filename: '[name].[hash].js',
// path.join根路徑下的絕對路徑 拼接處生成文件存放路徑
path: path.join(__dirname, '../dist'),
// 靜態(tài)資源引用時的路徑， 設置之后表示請求的是否是靜態(tài)資源
publicPath: '/public'
},
module: {
rules: [
{
test: /.jsx$/,
// babel 編輯es6， es7， es8， jsx 編譯成es5
// babel-loader只是一個插件并不包含babel核心代碼，還需要安裝babel-core
// 默認編譯es6，如何配置支持jsx, 新建文件.babelrc
loader: 'babel-loader'
},
// node_modules中的js代碼全部都是es5，所以不需要編譯了
{
test: /.js$/,
loader: 'babel-loader',
exclude: [
path.join(__dirname, '../node_modules')
]
}
]
},
plugins: [
// 生成一個html頁面，webpack編譯的時候把生成的所有entry都注入進去，路徑是根據(jù)output的路徑
new HTMLPlugin({
// 最終生成的dist的html會以此作為模板
template: path.join(__dirname, '../client/template.html')
})
]
}
webpack.config.server,js
const path = require('path')
module.exports = {
// js打包出來的內容是在哪一個執(zhí)行環(huán)境中運行的，還可以是web，web是在瀏覽器中執(zhí)行的
target: 'node',
entry: {
app: path.join(__dirname, '../client/server-entry.js'),
},
output: {
// []表示一個變量 hash如果有變動就刷新瀏覽器緩存 否則不刷新
// node環(huán)境中沒有緩存這一概念 所以不需要用hash命名
filename: 'server-entry.js',
// path.join根路徑下的絕對路徑 拼接處生成文件存放路徑
path: path.join(__dirname, '../dist'),
// 靜態(tài)資源引用時的路徑， 設置之后表示請求的是否是靜態(tài)資源
publicPath: '/public',
// 打包出來的js使用的模塊的方案
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /.jsx$/,
// babel 編輯es6， es7， es8， jsx 編譯成es5
// babel-loader只是一個插件并不包含babel核心代碼，還需要安裝babel-core
// 默認編譯es6，如何配置支持jsx, 新建文件.babelrc
loader: 'babel-loader'
},
// node_modules中的js代碼全部都是es5，所以不需要編譯了
{
test: /.js$/,
loader: 'babel-loader',
exclude: [
path.join(__dirname, '../node_modules')
]
}
]
}
}
app.js
// 只要有jsx代碼就需要引入react。jsx代碼最終編譯出來是React.creaeElemnt()
import React from 'react'
//用來react組件渲染到dom中，還有react-native 是渲染到手機app中的
import ReactDOM from 'react-dom'
import App from './App.jsx'
// 直接掛在到body上，一般不建議這樣
// 如果使用了服務端渲染就要使用hydrate，因為react回去對比服務端和客戶端的代碼，
// 如果不一致，則會使用客戶端的
ReactDOM.hydrate(<App/>, document.getElementById('root'))
server.entry.js
import React from 'react'
import App from './App.jsx'
export default <App/>
template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id="root"><app></app></div>
</body>
</html>
server.js
// server端要把生成的html文件讀進來
const express = require('express')
const ReactSSR = require('react-dom/server')
const serverEntry = require('../dist/server-entry').default
const fs = require('fs')
const path = require('path')
const template = fs.readFileSync(path.join(__dirname, '../dist/index.html'),'utf-8')
const app = express()
// 給靜態(tài)文件指定固定的請求范圍
app.use('/public', express.static(path.join(__dirname, '../dist')))
// 從客服端發(fā)出的所有請求都返回appString
app.get('*', function (req, res) {
const appString = ReactSSR.renderToString(serverEntry)
res.send(template.replace('<app></app>', appString))
})
// 監(jiān)聽3333端口
app.listen(3333, function () {
console.log('server is listening on 3333')
})
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"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"
},
