Dieses Mal werde ich Ihnen die Schritte zum Implementieren des React-Server-Renderings und die Vorsichtsmaßnahmen zum Implementieren des React-Server-Renderings ausführlich erläutern. Hier sind tatsächliche Fälle, schauen wir uns das an .
Dieser Artikel stellt ein Tutorial vor, wie man das React-Server-Rendering von Grund auf implementiert. Ich hoffe, es kann allen helfen.
Als ich kürzlich Koa schrieb, dachte ich: Wenn ein Teil meines Codes eine API bereitstellt und ein Teil des Codes SSR unterstützt, wie soll ich es dann schreiben? (Wenn Sie es nicht in zwei Dienste aufteilen möchten)
Und ich habe in den Projekten, die ich kürzlich geschrieben habe, wie Nuxt, auch etwas serverseitiges Rendering verwendet, und ich habe auch an nächsten Projekten gearbeitet Dass die Entwicklungserfahrung sehr freundlich ist, aber freundlich ist immer noch freundlich. Wie wird es konkret umgesetzt?
Mit einer realistischen und pragmatischen Einstellung habe ich React als Forschungsobjekt ausgewählt (hauptsächlich, weil ich viel Vue geschrieben habe, was ekelhaft ist. Dann werde ich einfach eine serverseitige React-Rendering-Demo zu minimalen Kosten schreiben
Verwendeter Technologie-Stack
reagieren 16 + webpack3 + koa2 Um zu sehen, wie das serverseitige Rendering implementiert wird, können Sie loslegen!Warum serverseitiges Rendering verwenden
Vorteile
Es sind nichts weiter als zwei PunkteDann ist die Frage, was SEO ist
In einem Satz sind die meisten Websites, die wir jetzt erstellen, SPA-Websites. Wenn der Suchmaschinen-Spider kommt, um die Webseiten zu sammeln, stellen sie fest, dass sie alle leer sind. Glauben Sie also, dass Gewicht und Wirkung der Einbeziehung Ihrer Website gut oder schlecht sind? Der Kern unserer SEO-Optimierung wird auch im folgenden Inhalt beschrieben: Hier sind die Highlights! Lassen Sie den Server den HTML-Code mit Inhalt an uns zurücksenden. Wenn das Ereignis eintritt, rendert der Browser ihn erneut zum MountenKoa-Umgebung aufbauen
Erstellen Sie ein neues SSR-Projekt und initialisieren Sie npmmkdir ssr && cd ssr npm init
require('babel-core/register')()
require('babel-polyfill')
require('./app')import Koa from 'koa'
const app = new Koa()
// response
app.use((ctx) => {
ctx.body = 'Hello Koa'
})
app.listen(3000)
console.log("系统启动，端口：3000"){
"presets": ["react", "env"]
}npm install babel-core babel-polyfill babel-preset-env babel-preset-react nodemon --save-dev npm i koa --save
"scripts": {
"dev": "nodemon index.js",
}React installieren
cnpm install react react-dom --save
import React from 'react'
export default class Home extends React.Component {
render () {
return <p>hello world</p>
}
}import Koa from 'koa'
import React from 'react'
import { renderToString } from 'react-dom/server'
import App from './app/main'
const app = new Koa()
// response
app.use(ctx => {
let str = renderToString(<App />)
ctx.body = str
})
app.listen(3000)
console.log('系统启动，端口：8080')import React from 'react'
export default class Home extends React.Component {
render () {
return <p onClick={() => window.alert(123)}>hello world</p>
}
} Wie binden wir also das Ereignis?
说干就干
配制webpack
在根目录下面新建一个 webpack.config.js
下面是webpack.config.js的内容：
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: {
main: './app/index.js'
},
output: {
filename: '[name].js',
path: path.join(dirname, 'public'),
publicPath: '/'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [
{test: /\.jsx?$/,
loaders: ['babel-loader'],
}
]
}
}上面的配置将entry设置成了app/index.js文件
那我们就创建一个
下面是app/index.js的代码：
import Demo from './main'
import ReactDOM from 'react-dom'
import React from 'react'
ReactDOM.render(<Demo />, document.getElementById('root'))因为浏览器渲染需要将根组件挂载到某个dom节点上，所以给我们的react代码设置一个入口
这个时候就有一个问题，就是，document对象node环境下并不存在，那怎么解决的呢？
不存在？不存在那我就不用就好了，SSR核心就是让请求的url里面返回具体HTML内容，事件什么的并不care，那么我就把根组件直接renderToString
返回出来就好了呗
下面修改我们的服务代码，让代码支持服务器渲染
新增一点依赖
cnpm i --save koa-static koa-views ejs
修改server.js的代码
import Koa from 'koa'
import React from 'react'
import { renderToString } from 'react-dom/server'
import views from 'koa-views'
import path from 'path'
import Demo from './app/main'
const app = new Koa()
// 将/public文件夹设置为静态路径
app.use(require('koa-static')(dirname + '/public'))
// 将ejs设置为我们的模板引擎
app.use(views(path.resolve(dirname, './views'), { map: { html: 'ejs' } }))
// response
app.use(async ctx => {
let str = renderToString(<Demo />)
await ctx.render('index', {
root: str
})
})
app.listen(3000)
console.log('系统启动，端口：8080')下面新建我们的渲染模板
新建一个views文件夹
里面新建一个index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <base href="/client" rel="external nofollow" > </head> <body> <p id="root"><%- root %></p> <script src="/main.js"></script> </body> </html>
这个 html 里面可以放一些变量，比如这个<%- root %>，就是等下要放renderToString结果的地方
/main.js则是react构建出来的代码
下面直接来测试一下我们的代码
1. 在 package.json里面
新增：
"scripts": {
"dev": "nodemon index.js",
"build": "webpack"
},2. 运行 npm run build， 构建出我们的react代码
3. npm run dev
点击一下代码，是不是会 alert(123)
tada 撒花，恭喜你，一个最简单服务器渲染就已经完成
到这里核心的思想就都已经讲完了，总结来说就下面三点：
起一个node服务
原理就是这么简单
但是具体开发的时候还会有各种各样的需求，比如：
不可能我每次改完代码都重新构建看效果吧 => 需要 实时构建
这些问题都是用完 官方脚手架之后就回不去了的，所以更多的配置可以参考下面的repo（是一个工具链完善的最小实现），欢迎提PR
GitHub - ws456999/koa-react-ssr-starter: to understand && to explain how react ssr works
目前你可以在里面找到 react + react-router + mobx + postcss + 热更新的配置，除了react-router的配置有些差别，其他都跟client端差别不大
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
getBoundingClientRect使用方法及兼容性处理
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung des React-Server-Renderings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was ist Server?
Fehler beim Herstellen der Verbindung zum Apple-ID-Server
Erstellen Sie einen Internetserver
So überprüfen Sie den Serverstatus
So lösen Sie das Problem der langsamen Übertragung von Serverdomänennamen
Server-Evaluierungssoftware
So aktivieren Sie den TFTP-Server
So beheben Sie die Inkompatibilität der Serverlast
