這篇文章主要介紹“React SSR實(shí)例分析”，在日常操作中，相信很多人在React SSR實(shí)例分析問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”React SSR實(shí)例分析”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)定制網(wǎng)站，是成都網(wǎng)站建設(shè)公司,為高空作業(yè)車(chē)租賃提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開(kāi)發(fā)等。成都網(wǎng)站建設(shè)熱線：13518219792

SSR與CSR

取決于DOM結(jié)構(gòu)是從服務(wù)端生成還是客戶端生成，簡(jiǎn)單測(cè)試可以通過(guò)查看源代碼能不能看到DOM結(jié)構(gòu)，或者通過(guò)禁用JavaScript后能不能正?？吹巾?yè)面

SSR的優(yōu)勢(shì)

減少首頁(yè)渲染白屏?xí)r間

SEO友好

開(kāi)發(fā)配置

迭代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（

 ——

         

Hello React SSR

 ——

 ）

 }）

 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（）],

     /*

     沒(méi)有這個(gè)插件就會(huì)報(bào)

     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"

 }

此時(shí)執(zhí)行npm build能看到打包出來(lái)的結(jié)果文件，執(zhí)行npm start能啟動(dòng)一個(gè)服務(wù)器，打開(kāi)http://localhost:3000能看到網(wǎng)頁(yè)結(jié)果

到此，關(guān)于“React SSR實(shí)例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！