Server Side Rendering with React

The 2021 JavaScript Full-Stack Bootcamp is NOW OPEN FOR SIGNUPS！

SSRとも呼ばれるServer Side Renderingは、ブラウザではなくサーバーでレンダーするJavaScriptアプリケーションの能力のことです。

• サイトの最初のページ読み込み時間を短縮できるため、良いユーザー エクスペリエンスの鍵となる
• SEOに不可欠である：検索エンジンは、クライアント側のみでレンダリングするアプリケーションを効率的かつ正しくインデックスできない（まだ？ Google のインデックスに関する最新の改善にもかかわらず、他の検索エンジンもあり、Google はいずれにせよ完璧ではありません。 また、Google は読み込み時間の速いサイトを好むので、クライアントサイドで読み込むことはスピードにとって良いことではありません
• ソーシャルメディアであなたのサイトのページを共有すると、リンクをうまく共有するために必要なメタデータ（画像、タイトル、説明…）を簡単に収集できるので、とても良いことです。)

サーバー サイド レンダリングがなければ、サーバーに送られるのは本文のない HTML ページだけで、ブラウザがアプリケーションを表示するために使用するいくつかのスクリプト タグだけです。 サーバー サイド レンダリングにより、クライアント レンダリング アプリとバックエンド レンダリング アプリの中間にあるスイート スポットを得ることができます。

しかし、サーバー サイド レンダリングにも欠点があります。

• SSR の概念実証はシンプルであると言えますが、SSR の複雑さはアプリケーションの複雑さに応じて大きくなります。
• 大きなアプリケーションをサーバーサイドでレンダリングすると、かなりリソースが必要になり、高負荷時にはクライアントサイド レンダリングよりも遅いエクスペリエンスを提供する可能性さえあります。 9605>

A very simplistic example of what it takes to server-Side render a React app

SSR setups can grow very, very complex and most tutorials bake in Redux, React Router and many other concepts from the start.

SSR がどのように機能するかを理解するために、概念実証を実装するための基礎から始めましょう。

SSR を提供するライブラリについて調べるだけで、基礎作業には手を出さない場合は、この段落は自由に読み飛ばしてください

SSR を基本的に実装するには Express を使用するつもりです。

Express を初めて使う場合、または少し追いつく必要がある場合は、ここで無料の Express ハンドブックをチェックしてみてください。 https://flaviocopes.com/page/ebooks/.

警告: SSR の複雑さは、アプリケーションの複雑さに応じて大きくなる可能性があります。 これは、基本的な React アプリケーションをレンダリングするための最低限のセットアップです。 より複雑なニーズには、もう少し作業が必要かもしれませんし、React 用の SSR ライブラリもチェックしてください。

あなたは create-react-app で React アプリを開始したと仮定します。

ターミナルでメインの app フォルダに移動し、次のように実行します:

npm install express

あなたの app ディレクトリに一連のフォルダがあります。 server という新しいフォルダーを作成し、その中に入って server.js というファイルを作成します。

create-react-app の規約に従って、アプリは src/App.js ファイルに住んでいます。 そのコンポーネントをロードし、react-dom.

.

で提供される ReactDOMServer.renderToString() を使用して文字列にレンダリングします。./build/index.html ファイルのコンテンツを取得し、デフォルトでアプリケーションがフックするタグである <div></div> プレースホルダーを `<div>${ReactDOMServer.renderToString(<App />)}</div>.

build フォルダー内のすべてのコンテンツはそのまま、静的に Express によって配信される予定です。

import path from 'path'import fs from 'fs'import express from 'express'import React from 'react'import ReactDOMServer from 'react-dom/server'import App from '../src/App'const PORT = 8080const app = express()const router = express.Router()const serverRenderer = (req, res, next) => { fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => { if (err) { console.error(err) return res.status(500).send('An error occurred') } return res.send( data.replace( '<div></div>', `<div>${ReactDOMServer.renderToString(<App />)}</div>` ) ) })}router.use('^/$', serverRenderer)router.use( express.static(path.resolve(__dirname, '..', 'build'), { maxAge: '30d' }))// tell the app to use the above rulesapp.use(router)// app.use(express.static('./build'))app.listen(PORT, () => { console.log(`SSR running on port ${PORT}`)})

さて、クライアント アプリケーションの src/index.js で、ReactDOM.render() を呼び出す代わりに、次のようにします。

ReactDOM.render(<App />, document.getElementById('root'))

これは同じですが、React がロードされると既存のマークアップにイベント リスナーをアタッチする機能が追加されています:

ReactDOM.hydrate(<App />, document.getElementById('root'))

すべての Node.サーバー側の Node.js コードは JSX や ES モジュール (include ステートメントに使用) について何も知らないため、すべての Node.js コードは Babel によってトランスパイルする必要があります。

npm install @babel/register @babel/preset-env @babel/preset-react ignore-styles

ignore-styles は import 構文を使用してインポートした CSS ファイルを無視するよう伝える Babel ユーティリティです。

server/index.js にエントリ ポイントを作成しましょう:

require('ignore-styles')require('@babel/register')({ ignore: , presets: })require('./server')

React アプリケーションをビルドして、build/ フォルダに入力されるようにします。

npm run build

そしてこれを実行しましょう:

node server/index.js

私はこれが単純な方法だと言いましたが、そうなんですね。

• imports を使用したときに画像を正しくレンダリングできないので、動作させるには Webpack が必要です (そしてこれは処理を非常に複雑にします)。
• SEO やソーシャル共有の目的で必須であるページ ヘッダー メタデータを処理できません (その他のことも含めて)

これは ReactDOMServer.renderToString() と ReactDOM.hydrate を使ってサーバー サイド レンダリングを行う良い例ですが、実際の使用には十分とは言えません。

Server Side Rendering using libraries

SSR を正しく行うのは難しく、React にはそれを実装するデファクトの方法はありません。

それらのページを提供するのに別のテクノロジーを使用するより、その利益を得るために手間や複雑さやオーバーヘッドをかける価値があるかどうかは、まだ大いに議論されるべきです。 Reddit でのこのディスカッションには、その点で多くの意見があります。

サーバー サイド レンダリングが重要な問題である場合、私の提案は、当初からこの目標を念頭に置いていた既製のライブラリやツールに依存することです。

特に、Next.js と Gatsby をお勧めします。

The 2021 JavaScript Full-Stack Bootcamp IS NOW OPEN FOR SIGNUPS UNTIL NEXT TUESDAY ! この機会を逃さず、今すぐサインアップしましょう！

More react tutorials:

• VS Code setup for React development
• React Concept.をご覧ください。 Immutability
• JSXで複数の要素を返す方法
• Reactポータル
• ReactでHTMLをレンダリングする方法
• React習得へのロードマップ
• jQueryとReactどちらを使用すべきか?
• useRef Reactフックの使い方
• React Router、動的ルートからデータを取得する方法