ReactSSR实例分析

这篇文章主要介绍“React SSR实例分析”，在日常操作中，相信很多人在React SSR实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React SSR实例分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联成都网站建设定制网站，是成都网站建设公司,为高空作业车租赁提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站建设热线：13518219792

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（

 ——

         

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

     /*

     没有这个插件就会报

     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实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！