溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“React SSR實例分析”，在日常操作中，相信很多人在React SSR實例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React SSR實例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
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>
<h2>Hello React SSR</h2>
</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能看到網頁結果
到此，關于“React SSR實例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
