Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.