サーバーサイド レンダリングを使用していないが、React サイトのパフォーマンスを向上させたい場合は、プリレンダリングをお試しください。
react-snap はサードパーティです
このライブラリを使用して、サイトのページを静的 HTML ファイルにプリレンダリングします。これにより、
改善する
First Paint
必要があります。
以下に、プリレンダリングがある場合とない場合の同じアプリを比較します。 シミュレートされた 3G 接続とモバイル デバイスで読み込んだ場合:
<ph type="x-smartling-placeholder">
なぜこれが有用なのでしょうか。
大規模なシングルページ アプリケーションの主要なパフォーマンス上の問題は、 サイトを構成する JavaScript バンドルが完了するまで待つ必要がある ダウンロードされます。バンドルが大きいほど、 ユーザーの待ち時間が長くなります
この問題を解決するために、多くのデベロッパーは、アプリケーションを ブラウザ上で起動するのではなく、サーバーにアクセスします。各 ページ/ルートの移行では、完全な HTML がサーバーで生成され、 これによって First Paint の時間が短縮されますが、 Time to First Byte（最初のバイトまでの時間）。
プリレンダリングは、サーバーよりもシンプルな別の手法です。 最初のペイント時の時間を短縮する方法も 説明します。ヘッドレス ブラウザ、またはユーザー インターフェースのないブラウザが使用されている を使用して、ビルド時にすべてのルートの静的 HTML ファイルを生成します。これらのファイルは は、必要な JavaScript バンドルと一緒に配布できます。 説明します。
リアクション スナップ
react-snap は Puppeteer を使用して次のことを行います。
さまざまなルートのプリレンダリングされた HTML ファイルをアプリケーションで作成します。宛先
開発用の依存関係としてインストールします。
npm install --save-dev react-snap
次に、package.json に postbuild スクリプトを追加します。
"scripts": {
//...
"postbuild": "react-snap"
}
これにより、新しいビルドが開くたびに react-snap コマンドが自動的に実行されます。
作成されたアプリケーション（npm build）。
最後に必要なのは、アプリケーションの起動方法の変更です。
src/index.js ファイルを次のように変更します。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
ReactDOM.hydrate(<App />, rootElement);
} else {
ReactDOM.render(<App />, rootElement);
}
ルートの React 要素のレンダリングに ReactDOM.render のみを使用するのではなく、
追加すると、子ノードがすでに存在しているかどうかがチェックされます。
HTML コンテンツがプリレンダリングされた（またはディスプレイでレンダリングされた）かどうかを
できます。その場合は、代わりに ReactDOM.hydrate を使用してイベントをアタッチします。
新しいリスナーを作成するのではなく、すでに作成済みの HTML にリスナーを追加します。
アプリケーションをビルドすると、ペイロードとして静的 HTML ファイルが生成されます。 自動的に作成されます。HTML ペイロードがどのように表示されるか、 HTML リクエストの URL をクリックしてから [プレビュー] をクリックし、 タブを使用します。
スタイルが設定されていないコンテンツのフラッシュ
静的 HTML はほぼ即座にレンダリングされるようになりましたが、引き続き表示されます。 デフォルトでスタイルが設定されていないため、「スタイルなし」のフラッシュが コンテンツ（FOUC）。これは、JavaScript で CSS-in-JS を使用している場合に特に顕著になることがあります。 ライブラリを使用してセレクタを生成する（JavaScript バンドルは終了する必要がある） 実行されます。
これを防ぐために、クリティカル CSS、または追加される CSS の最小量は
必要なオブジェクトは、<head> に直接インラインで
確認できます。react-snap が別のサードパーティ ライブラリを
フード、minimalcss を使用して、
重要な CSS です。有効にするには、Terraform で
package.json ファイルに次の行を追加します。
"reactSnap": {
"inlineCss": true
}
Chrome DevTools のレスポンス プレビューを見ると、重要な CSS がインライン化されたスタイル付きページが表示されています。
まとめ
アプリケーションでサーバーサイド レンダリング ルートを使用しない場合は、
react-snap: 静的 HTML をユーザーに事前レンダリングします。
- 開発用の依存関係としてインストールし、デフォルトのみを使用する 設定。
- 試験運用版の
inlineCssオプションを使用して、機能する場合に重要な CSS をインライン化する おすすめします - ルート内のコンポーネント レベルでコード分割を使用する場合は、
ユーザーに読み込み状態をプリレンダリングしないように注意してください。「
react-snapREADME 詳しく説明します