React サーバー レンダリングの実装に関連する問題を詳しく説明する

この記事では主に、React Server Rendering の最小限の実装をゼロから詳しく説明し、参考として共有します。

まえがき

最近、koa を書いているときに、コードの一部が API を提供し、コードの一部が SSR をサポートしている場合、どのように書けばよいのかと考えました。 (2 つのサービスに分割したくない場合)
そして、最近書いた nuxt などのプロジェクトでもサーバーサイド レンダリングを使用しており、次のプロジェクトにも取り組んでいることは事実です。開発経験は非常にフレンドリーですが、フレンドリーは具体的にどのように達成されるのか考えたことがありますか?

真実を追求し実用的な姿勢に従って、私は調査対象として React を選択しました (主な理由は、Vue が少し書きすぎていてうんざりするためです)。その後、単純に React サーバー側のレンダリング デモを作成します。最小コスト

使用 私たちがたどり着いたテクノロジースタックは

react 16 + webpack3 + koa2

で、サーバーサイドレンダリングがどのように実装されているかを確認してください。

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

利点

は2つの点にすぎません

1. SEOに優しい

2. 最初の画面レンダリングを高速化し、白画面時間を短縮します

それで、何が問題なのでしょうか?それは SEO です

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

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

以下が重要なポイントです。

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

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

。

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

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

babelの入り口、index.js コードは次のとおりです

mkdir ssr && cd ssr
npm init

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

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

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

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

内容は次のとおりです:

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"]
}

起動スクリプトを設定します

package.json

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

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

Hello Koa が表示されます

サービスを開始するのは非常に簡単です

Reactをインストールします

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

ルートディレクトリに新しいアプリフォルダを作成し、そのフォルダ内に新しい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>
 }
}

At今回は、npm run dev

画面に hello world が表示されます

Chrome 開発者ツールを開いてリクエストを表示します:

最も単純な React コンポーネントが str になり、渡されます

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

renderToString – 実際には、コンポーネントを文字列にレンダリングします

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

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

のコードを変更します。もう一度ページを見てみましょう。えっ、何もありませんか?

を使用してください。これは、バックエンドがコンポーネントを HTML の文字列にレンダリングすることしかできず、イベントのバインディングやその他の処理はブラウザ側で実行する必要があるためです

では、イベントをバインドするにはどうすればよいですか? ?

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

それを実行してください

Webpack を構成します

新しい Webpack を作成しますルート ディレクトリの下の .config.js

以下は webpack.config.js の内容です:

import React from 'react'

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

上記の設定は、エントリを app/index.js ファイルに設定します

次に、ファイルを作成します

以下app/index.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'],
   }
  ]
 }
}

のコードです

​​ブラウザのレンダリングではルートコンポーネントをDOMノードにマウントする必要があるため、反応コードの入り口を設定します

この時点で問題があります。ノード環境にドキュメントオブジェクトが存在しないのですが、どうすれば解決できますか?

存在しないのですか？存在しない場合は、必要ありません。SSR の核心は、要求された URL 内の特定の HTML コンテンツを返すことです。イベントは気にしません。その後、ルート コンポーネントを renderToString

に直接返します。

以下を変更します サービスコードにより、コードがサーバーレンダリングをサポートできるようになります

さらにいくつかの依存関係を追加します

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

koa-static: 静的ファイルを処理するためのミドルウェア
koa-views: テンプレートを構成するためのミドルウェア
ejs: テンプレートエンジン
server.jsのコードを変更します

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

以下のレンダリングテンプレートを作成します

viewsフォルダを作成します

その中に新しいindex.htmlを作成します:

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;)

この HTML 内の変数 (次のような)。これは、renderToString の結果が配置される場所です。 1. パッケージ内でコードを直接テストしてみましょう。 .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端差别不大

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何实现页面跳转后返回原页面初始位置

使用vue-router如何设置每个页面的title方法

如何解决Vue.js显示数据的时,页面闪现

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