Implementieren Sie grundlegende Methoden zum Rendern von Reaktionsservern

Dieser Artikel führt Sie hauptsächlich in die detaillierte Implementierung des React-Server-Renderings von Grund auf ein. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Vorwort

Als ich kürzlich Koa schrieb, dachte ich, wenn ein Teil meines Codes API bereitstellt und ein Teil des Codes SSR unterstützt, Wie soll ich es schreiben? Wolltuch? (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?

Im Einklang mit einer wahrheitssuchenden und pragmatischen Einstellung habe ich React als Forschungsobjekt gewählt (hauptsächlich, weil Vue etwas zu viel geschrieben wurde, was ekelhaft ist. Dann werde ich einfach einen React-Server schreiben). Side-Rendering-Demo zu minimalen Kosten

Verwendeter Technologie-Stack

React 16 + Webpack3 + Koa2

Sehen Sie sich an, wie Es implementiert serverseitiges Rendering. Ja, los geht's!

Warum serverseitiges Rendering verwenden

Vorteile

Es sind nichts weiter als zwei Punkte

1. SEO-freundlich

2. Beschleunigen Sie das Rendern des ersten Bildschirms und reduzieren Sie die Zeit auf dem weißen Bildschirm

Dann stellt sich die Frage: Was ist SEO?

In einem Satz: Das meiste, was wir jetzt tun, sind SPA-Websites. Wenn die Suchmaschinenspinne kommt um die Webseiten einzubinden, komplett leer vorgefunden? 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:

Das Folgende ist der entscheidende Punkt!

Lassen Sie den Server den HTML-Code mit Inhalt an uns zurücksenden. Wenn das Ereignis eintritt, rendert der Browser ihn erneut zum Mounten

Erstellen Sie die Koa-Umgebung

Erstellen Sie ein neues SSR-Projekt und initialisieren Sie npm im Projekt

mkdir ssr && cd ssr
npm init

Im folgenden Code verwenden wir import jsx und andere Syntax, die wird von der Knotenumgebung nicht unterstützt. Ja, daher müssen Sie babel

konfigurieren, um neue Dateien app.js und index.js im aktuellen Projekt zu erstellen, und dann

babels Eingang, den Index Der .js-Code lautet wie folgt

require('babel-core/register')()

require('babel-polyfill')
require('./app')

Der Eingang zu unserem Projekt, der app.js-Code, lautet wie folgt

import Koa from 'koa'
const app = new Koa()

// response
app.use((ctx) => {
 ctx.body = 'Hello Koa'
})

app.listen(3000)
console.log("系统启动，端口：3000")

Erstellen Sie eine neue .babelrc-Datei im Stammverzeichnis

Der Inhalt ist:

{
 "presets": ["react", "env"]
}

Installieren Sie die Abhängigkeiten oben erforderlich

npm install babel-core babel-polyfill babel-preset-env babel-preset-react nodemon --save-dev
npm i koa --save

Konfigurieren Sie das Startskript

package.json

"scripts": {
 "dev": "nodemon index.js",
}

Hier führen Sie npm run dev aus und öffnen localhost:3000

Sie werden Hallo Koa sehen

Ist es sehr einfach, einen Dienst zu starten

React installieren

cnpm install react react-dom --save

Erstellen Sie einen neuen App-Ordner im Stammverzeichnis und erstellen Sie eine neue main.js im Ordner

The main Der .js-Code lautet wie folgt

import React from 'react'

export default class Home extends React.Component {
 render () {
  return <p>hello world</p>
 }
}

Vor dem Ändern von server.js

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(&#39;系统启动，端口：8080&#39;)

Zu diesem Zeitpunkt , npm run dev

Sie werden es auf dem Bildschirm sehen. Hallo Welt erscheint

und öffnen Sie dann die Chrome-Entwicklertools, um unsere Anfrage anzuzeigen:

Unsere einfachste Reaktionskomponente wird zu str und wird übergeben

Hier verwenden wir eine Methode:

renderToString – rendert die Komponente tatsächlich in einen String

Bisher haben wir der Komponente keine Ereignisse und andere Interaktionen hinzugefügt. Versuchen wir es als Nächstes.

Ändern Sie den Code von main.js

import React from 'react'

export default class Home extends React.Component {
 render () {
  return <p onClick={() => window.alert(123)}>hello world</p>
 }
}

Aktualisieren Sie unsere Seite noch einmal, ja, ja. Es ist nicht so, dass sie nutzlos ist.

Das liegt daran, dass das Backend die Komponente nur in einen HTML-String rendern kann und die Ereignisbindung und andere Dinge im Browser ausgeführt werden müssen Seite
Wie ändern wir also die Veranstaltung?

Dann werden Sie bestimmt vermuten, dass, da der Server eine HTML-Zeichenfolge rendert, die Möglichkeit zum Mounten des Ereignisses darin besteht, es im Browser erneut zu rendern

Einfach machen, machen, machen

Webpack konfigurieren

Erstellen Sie eine neue webpack.config.js im Stammverzeichnis

Das Folgende ist der Inhalt von 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'],
   }
  ]
 }
}

Die obige Konfiguration legt den Eintrag in der Datei app/index.js fest

Dann erstellen wir eine

The Das Folgende ist der Code von app/index.js:

import Demo from './main'
import ReactDOM from 'react-dom'
import React from 'react'
ReactDOM.render(<Demo />, document.getElementById(&#39;root&#39;))

Da für das Browser-Rendering die Root-Komponente auf einem Dom-Knoten gemountet werden muss, geben Sie unsere Reaktionscodesätze an ein Eingang

Zu diesem Zeitpunkt liegt ein Problem vor, das heißt, das Dokumentobjekt existiert nicht in der Knotenumgebung. Wie kann es also gelöst werden?

existiert nicht? Wenn es nicht existiert, brauche ich es nicht. Der Kern von SSR besteht darin, bestimmte HTML-Inhalte in der angeforderten URL zurückzugeben. Ereignisse oder ähnliches sind mir egal, also gebe ich einfach die Stammkomponente zurück to renderToString

Okay

Ändern wir unseren Servicecode, um das Server-Rendering zu unterstützen

Fügen Sie einige Abhängigkeiten hinzu

cnpm i --save koa-static koa-views ejs

1. koa-static： 处理静态文件的中间件

2. koa-views： 配置模板的中间件

3. 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(&#39;index&#39;, {
  root: str
 })
})

app.listen(3000)

console.log(&#39;系统启动，端口：8080&#39;)

下面新建我们的渲染模板

新建一个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 撒花，恭喜你，一个最简单服务器渲染就已经完成

到这里核心的思想就都已经讲完了，总结来说就下面三点：

1. 起一个node服务

2. 把react 根组件 renderToString渲染成字符串一起返回前端

3. 前端再重新render一次

原理就是这么简单

但是具体开发的时候还会有各种各样的需求，比如：

1. 不可能我每次改完代码都重新构建看效果吧 => 需要 实时构建

2. create-react-app 都是热更新，你还要刷新是不是太蠢了 => 需要支持热更新

3. 其他一些配套的周边，如： react-router, redux 或者mobx怎么支持呢 => 需要完善的生态

.etc

这些问题都是用完 官方脚手架之后就回不去了的，所以更多的配置可以参考下面的repo（是一个工具链完善的最小实现），欢迎提PR

GitHub - ws456999/koa-react-ssr-starter: to understand && to explain how react ssr works

目前你可以在里面找到 react + react-router + mobx + postcss + 热更新的配置，除了react-router的配置有些差别，其他都跟client端差别不大

相关推荐：

react后端渲染模板引擎noox发布使用方法

React前后端同构防止重复渲染

浏览器渲染性能优化

Das obige ist der detaillierte Inhalt vonImplementieren Sie grundlegende Methoden zum Rendern von Reaktionsservern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!