Explication détaillée des étapes pour implémenter le rendu du serveur React

Cette fois, je vais vous donner une explication détaillée des étapes pour implémenter le rendu du serveur React. Quelles sont les précautions pour implémenter le rendu du serveur React. Voici des cas réels, jetons un coup d'œil.

Cet article présente un tutoriel minimal sur la façon d'implémenter le rendu du serveur React à partir de zéro. J'espère qu'il pourra aider tout le monde.

Quand j'écrivais koa récemment, je me suis dit que si une partie de mon code fournit une API et qu'une partie du code prend en charge SSR, comment dois-je l'écrire ? (Si vous ne voulez pas le diviser en deux services)
Et j'ai également utilisé du rendu côté serveur dans les projets que j'ai écrits récemment, comme nuxt, et j'ai également travaillé sur des projets ultérieurs. que l'expérience de développement est très conviviale, mais conviviale reste conviviale, comment est-elle mise en œuvre spécifiquement ?

Avec une attitude réaliste et pragmatique, j'ai choisi React comme objet de recherche (principalement parce que j'ai écrit beaucoup de vue, ce qui est dégoûtant. Ensuite, j'écrirai simplement une démo de rendu côté serveur React au coût minimum

Pile technologique utilisée

réagir 16 + webpack3 + koa2

Pour voir comment il implémente le rendu côté serveur, c'est parti !

Pourquoi utiliser le rendu côté serveur

Avantages

Ce n'est rien de plus que deux points

1. Optimisé pour le référencement

Accélérez le rendu du premier écran et réduisez le temps d'écran blanc

Ensuite, la question est de savoir ce qu'est le référencement

En une phrase, la plupart des sites Web que nous construisons actuellement sont des sites Web SPA. Toutes les pages et données proviennent d'Ajax. Lorsque l'araignée du moteur de recherche vient collecter les pages Web, elle constate qu'elles sont toutes vides ? Alors, pensez-vous que le poids et l'effet de l'inclusion de votre site Web sont bons ou mauvais ?

Le cœur de notre optimisation SEO est également décrit dans le contenu suivant :

Voici les faits marquants !

Laissez le serveur nous renvoyer le code HTML avec le contenu. Si l'événement se produit, le navigateur le restituera à nouveau pour le montage

.

Construire un environnement koa

Créez un nouveau projet ssr et initialisez npm

mkdir ssr && cd ssr
npm init

dans le projet Dans le code suivant, nous utilisons une syntaxe telle que import jsx, qui n'est pas prise en charge par l'environnement de nœud, donc babel

doit être configuré. Créez de nouveaux fichiers app.js et index.js dans le projet en cours, puis

L'entrée de babel, le code index.js est le suivant

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

L'entrée de notre projet, le code app.js est le suivant

import Koa from 'koa'
const app = new Koa()
// response
app.use((ctx) => {
 ctx.body = 'Hello Koa'
})
app.listen(3000)
console.log("系统启动，端口：3000")

Créez un nouveau fichier .babelrc dans le répertoire racine

Le contenu est :

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

Installez les dépendances requises

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

Configurer le script de démarrage

package.json

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

Ici, vous exécutez npm run dev pour ouvrir localhost:3000

Tu verras bonjour Koa

Est-il très facile de démarrer un service ?

Installer React

cnpm install react react-dom --save

Créez un nouveau dossier d'application dans le répertoire racine et créez un nouveau main.js

dans le dossier Le code main.js est le suivant

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

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('系统启动，端口：8080')

avant modification À ce stade, npm exécute dev

Vous verrez bonjour tout le monde

apparaître à l'écran Ouvrez à nouveau les outils de développement Chrome pour afficher notre demande :

Notre composant de réaction le plus simple devient str et transmis

Ici nous utilisons une méthode :

renderToString – restitue en fait le composant dans une

chaîne

Jusqu'à présent, nous n'avons pas ajouté de comportements interactifs tels que des événements aux composants. Essayons-le ensuite

. Modifier le code de main.js

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

Actualise encore notre page, hé, ça ne sert à rien

C'est parce que le backend ne peut restituer le composant que dans une chaîne HTML, et la liaison d'événements et d'autres choses doivent être effectuées du côté du navigateur

Alors, comment pouvons-nous lier l'événement ?

Ensuite, vous devinerez certainement que puisque le serveur restitue une chaîne HTML, la façon de monter l'événement est de le restituer dans le navigateur

说干就干

配制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

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

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

1. 起一个node服务

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

3. 前端再重新render一次

原理就是这么简单

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

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

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

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

这些问题都是用完 官方脚手架之后就回不去了的，所以更多的配置可以参考下面的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使用方法及兼容性处理

vue的项目结构须知

vue实现购物车的小球抛物线效果详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!