这篇文章出自于慕课课程的Step by Step实际亲手操作，记录下来，以便后期回顾
SSR与CSR
取决于DOM结构是从服务端生成还是客户端生成，简单测试可以通过查看源代码能不能看到DOM结构，或者通过禁用JavaScript后能不能正常看到页面
SSR的优势
减少首页渲染白屏时间
SEO友好
开发配置
迭代1
新建工程，初始化
mkdir react-ssr && cd react-ssr
npm init -y
npm install @babel/cli @babel/core @babel/preset-env babel-loader express react react-dom webpack webapck-cli webpack-noe-externals
新建目录src/server，新建文件index.js
const express = require（'express'）
const app = express（）
app.get（'/', function（req, res） {
res.send（
——<html>
<head>
<title>React SSR</title>
</head>
<body>
<h1>Hello React SSR</h1>
</body>
</html>——
）
}）
const server = app.listen（3000）
新建。babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
新建webpack.server.js
const path = require（'path'）
const nodeExternals = require（'webpack-node-externals'）
module.exports = {
mode: 'development',
target: 'node', // 必须指定
entry: './src/server/index.js',
output: {
filename: 'bundle.js',
path: path.resolve（__dirname, 'dist'）
},
externals: [nodeExternals（）],
/*
没有这个插件就会报
WARNING in ./node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression
@ ./node_modules/express/lib/application.js 22:11-28
@ ./node_modules/express/lib/express.js 18:12-36
@ ./node_modules/express/index.js 11:0-41
@ ./src/server/index.js 1:14-32
*/
module: {
rules: [{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
}]
}
}
修改package.json 加上命令
"scripts": {
"start": "node ./dist/bundle.js",
"build": "webpack --config webpack.server.js"
}
此时执行npm build能看到打包出来的结果文件，执行npm start能启动一个服务器，打开http://localhost:3000能看到网页结果
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h64071.shtml
