React サーバー レンダリングを実装する手順の詳細な説明

今回は、react サーバー レンダリングを実装する手順と、react サーバー レンダリングを実装するための 注意事項 について詳しく説明します。実際のケースを見てみましょう。

この記事では、React サーバー レンダリングをゼロから最小限に実装するチュートリアルを紹介します。

最近 koa を書いていたときに、コードの一部が API を提供し、コードの一部が SSR をサポートしている場合、どのように記述すればよいのかと考えました。 (2 つのサービスに分割したくない場合)

そして、最近書いた nuxt などのプロジェクトでもサーバーサイド レンダリングを使用しており、次のプロジェクトにも取り組んでいることは事実です。開発経験は非常にフレンドリーですが、フレンドリーは具体的にどのように達成されるのか考えたことがありますか?

現実的かつ実用的な態度で、私は調査対象として React を選択しました (主に、たくさんの Vue を書いてきたので、うんざりします)。その後は、単純に最小限のコストで React サーバーサイドのレンダリング デモを作成します

使用されているテクノロジースタック

反応16 + webpack3 + koa2

サーバー側レンダリングがどのように実装されているかを確認するには、ここから始めましょう。

サーバーサイドレンダリングを使用する理由

利点

たったの2点です

1. SEO に優しい

最初の画面のレンダリングを高速化し、白い画面時間を削減します

それではSEOとは何なのかということです

一言で言えば、私たちが現在構築している Web サイトのほとんどは、すべてのページとデータが Ajax から取得されているということです。では、あなたの Web サイトを含めることの重要性と効果は良いと思いますか、それとも悪いと思いますか?

SEO 最適化の中核については、次のコンテンツでも説明されています:

ここがハイライトです！

イベントが発生すると、サーバーがコンテンツを含む HTML を返します。ブラウザはそれを再度レンダリングしてマウントします

。

コア環境を構築する

新しい ssr プロジェクトを作成し、プロジェクト内の npm を初期化します

mkdir ssr && cd ssr
npm init

以下のコードでは、ノード環境でサポートされていない import jsx などの構文を使用しているため、babel の設定が必要です

現在のプロジェクトに新しいファイル app.js と Index.js を作成してから

babelへの入り口、index.jsのコードは以下の通りです

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

私たちのプロジェクトの入り口、app.js コードは次のとおりです

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

ルートディレクトリに新しい .babelrc ファイルを作成します

内容は:

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

必要な依存関係をインストールします

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

起動スクリプトを設定する

package.json

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

ここで npm run dev を実行して localhost:3000 を開きます

こんにちはコアさんに会います

サービスを始めるのはとても簡単ですか

Reactをインストール rreee

ルートディレクトリに新しいアプリフォルダーを作成し、そのフォルダー内に新しい main.js を作成します

main.jsのコードは以下の通りです

cnpm install react react-dom --save

変更前のServer.js

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

このとき、npm run dev

hello world

が画面に表示されます もう一度 Chrome 開発者ツールを開いてリクエストを表示します:

最も単純な反応コンポーネントは str になって渡されます

ここではメソッドを使用します:

renderToString – 実際にコンポーネントを

string

にレンダリングします これまでのところ、イベントやその他のインタラクティブな動作をコンポーネントに追加していません。次に試してみましょう

。 main.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')

ページをもう一度更新してください、おい、それは役に立たない

これは、バックエンドがコンポーネントを HTML の文字列にレンダリングすることしかできず、イベントのバインドなどはブラウザ側で実行する必要があるためです。では、イベントをバインドするにはどうすればよいでしょうか。

そうすれば、サーバーは HTML の文字列をレンダリングするので、イベントをマウントする方法はブラウザで再レンダリングすることであると間違いなく推測するでしょう

说干就干

配制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实现购物车的小球抛物线效果详解

以上がReact サーバー レンダリングを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。