React SSR case analysis
This article mainly introduces "React SSR case analysis". In daily operation, I believe many people have doubts about React SSR case analysis. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "React SSR case analysis". Next, please follow the editor to study!
SSR and CSR
Depending on whether the DOM structure is generated from the server or the client, a simple test can see the DOM structure by looking at the source code, or whether the page can be seen properly by disabling JavaScript
Advantages of SSR
Reduce the white screen time of home page rendering
SEO friendly
Development and configuration
Iteration 1
New project, initialization
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
Create a new directory src/server and a new file index.js
Const express = require ('express')
Const app = express ()
App.get ('/', function (req, res) {
Res.send (
--
React SSR
Hello React SSR
--
)
})
Const server = app.listen (3000)
New. Babelrc
{
"presets": ["@ babel/preset-env", "@ babel/preset-react"]
}
Create a new webpack.server.js
Const path = require ('path')
Const nodeExternals = require ('webpack-node-externals')
Module.exports = {
Mode: 'development'
Target: 'node', / / must be specified
Entry:'. / src/server/index.js'
Output: {
Filename: 'bundle.js'
Path: path.resolve (_ _ dirname, 'dist')
}
Externals: [nodeExternals ()]
/ *
Without this plug-in, it will be reported.
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/
}]
}
}
Modify package.json plus command
"scripts": {
"start": "node. / dist/bundle.js"
"build": "webpack-config webpack.server.js"
}
At this point, execute npm build to see the packaged result file, execute npm start to start a server, and open http://localhost:3000 to see the results of the web page.
At this point, the study of "React SSR case Analysis" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
