React服务端渲染原理怎样理解？一文带你搞明白React服务端渲染
发布时间：2022-04-14 13:44:29 所属栏目：语言 来源：互联网
导读：React服务端渲染原理是什么？很多朋友可能听说过React服务端渲染，但是对其原理并不清楚，因此下面小编就给大家介绍一下React服务端渲染原理以及实例，感兴趣的朋友可以参考。 关于服务端渲染也就是我们说的SSR大多数人都听过这个概念，很多同学或许在公司中
|
React服务端渲染原理是什么？很多朋友可能听说过React服务端渲染，但是对其原理并不清楚，因此下面小编就给大家介绍一下React服务端渲染原理以及实例，感兴趣的朋友可以参考。 关于服务端渲染也就是我们说的SSR大多数人都听过这个概念，很多同学或许在公司中已经做过服务端渲染的项目了，主流的单页面应用比如说Vue或者React开发的项目采用的一般都是客户端渲染的模式也就是我们说的CSR。 如果是服务器端渲染这个流程就不同了，浏览器发送请求，服务器端运行React代码生成页面，然后服务器将生成好的页面返回给浏览器，浏览器进行渲染。这种情况下React代码就是服务器的一部分而不是前端部分了。 我们这里开发的Home组件是不能直接在node中运行的，需要借助webpack工具将jsx语法打包编译成js语法，让nodejs可以争取的识别，我们需要创建一个webpack.server.js文件。 在服务器端使用webpack需要添加一个target为node的键值对。我们知道在服务器端如果使用path路径是不需要打包到js中的，如果在浏览器端使用了path是需要打包到js中的，所以在服务器端和在浏览器端需要编译出来的js是完全不同的。所以我们在打包的时候要告诉webpack打包的是服务器端的代码还是浏览器端的代码。 entry入口文件就是我们node的启动文件，这里我们写成./src/index.js，输出的output文件名称为bundle，目录在跟目录的build文件夹中。 const Path = require('path'); const NodeExternals = require('webpack-node-externals'); // 服务端运行webpack需要运行NodeExternals, 他的作用是将express这类node模块不被打包到js里。 module.exports = { target: 'node', mode: 'development', entry: './src/server/index.js', output: { filename: 'bundle.js', path: Path.resolve(__dirname, 'build') }, externals: [NodeExternals()], module: { rules: [ { test: /.js?$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['react', 'stage-0', ['env', { targets: { browsers: ['last 2 versions'] （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
