Clever Geek Handbook

水分補給と水分補給とは一体何ですか？

フロントエンドの開発プロセスでSEOの最適化の問題が発生した場合は、ほぼ確実に、サーバー側レンダリング（SSR）と密接に関連するハイドレーション（またはリハイドレーション）の概念に出くわします。以下の情報は、主題を明確にするためにいくつかの追加の詳細を含む非常に緩い翻訳です。









シングルページSPAアプリケーションの夜明け



シングルページアプリケーション（SPA）モデルは、過去数年間で人気が高まっています。このアプローチは、速度とサービスの品質の点で一定の利益をもたらし、クライアントWeb開発の新しいパターンの基盤を作成することは理解できます。



誰もがよく知っていると思いますが、SPAはブラウザ内で動作し、使用中にページをリロードする必要はありません。



いい案！しかし、もちろん、落とし穴があります。



最も一般的なケース（reactまたはvueに関するチュートリアルを受講する場合）の中で、index.htmlメインページには、プロジェクト全体、CSS、JavaScript、フォントなどのグローバルな、少数のリンクを含むほぼ空のHTMLファイルが含まれています。



そしてこれが問題です：



  • 最初のレンダリング中に、ユーザーはコードベース全体とすべてのリソースがロードされるのを待つ必要があります（もちろん、例外があり、いわゆるjs / cssチャンクの動的ロードを実装できますが、それは別の話です）
  • 非同期リクエストが読み込まれるのを待つことができない一部のクローラーまたはパーサーは、すべてのページが空白で表示されます


さて、あなたはアイデアを得る： 



<!DOCTYPE html>
<html>
<head>
  <title>My first SPA app</title>
  <script src="https://cdn__"></script>
</head>
<body>
  <div id="app"></div>

  <script>
    ...
      ,  
    ...
  </script>
</body>
</html>


サーバー側レンダリングSSR



ブラウザを使用してすべてのアプリケーションコンテンツをレンダリングし、APIなどからデータを取得するクライアント側レンダリング（CSR）とは異なり、SSRは...サーバーを使用します。つまり、すべて同じレンダリングとデータ取得がサーバー（Express、Next、Vue SSR、Nuxtなどを使用するNodeJS）によって処理され、HTMLマークアップ、スタイル、スクリプト、およびAPIから受信したデータを含む応答が処理されます。ブラウザに送信されます。



したがって、速度/ SEOと対話性/ UXの2つのアプローチを利用できます。



それで、水分補給/水分補給とは何ですか？



水分補給は、SSRとCSRの間の一種の架け橋です。



First Contentful Paint（FCP）のようなWebページのパフォーマンスの指標があります-大まかに翻訳すると、「最初の重要なレンダリング」のように聞こえます-ブラウザがテキスト、画像（背景を含む）の表示を開始した時間。これらは、ユーザーがページに表示する最初の要素です。 ChromeでLighthouseを使用してレポートを作成すると、[パフォーマンス]タブの下に、このメトリックがすぐに表示されます。



サーバー上でコンテンツを生成するために費やされる時間は、First ContentfulPaint時間になります。



その直後に、クライアント側のJavaScriptが実行を開始して、本格的なクライアントアプリケーションを作成します（ほとんどの場合、一般的なフレームワークは仮想domとそれを管理するためのバインディングインターフェイスです）。



この時点で、クライアントでDOM全体を再レンダリングする必要はありませんが、不足しているイベント、メソッド、および場合によってはサーバーでレンダリングされなかった要素を追加する必要があります。水和/再水和



と呼ばれるのはこのプロセスです。もう少し詳細な説明は、Vue SSRガイド（これもロシア語です）にありますが、それに応じて、この特定のフレームワークのいくつかの機能があります。



パフォーマンス



しかし、この部分では、いくつかの問題が発生します。再水和には特定の欠点があります。それは、相互作用の前の時間または相互作用までの時間です。これは、同じ、私たちに知られているLighthouseChromeで見ることができます。サーバー側ですべてを完全に整理し、ページのコンテンツの最初のレンダリングが高速である場合でも、ユーザーはCSRの再ハイドレーション後にのみ操作できます。これは、非常に遅い場合があります。これは、UXの観点からは大きな欠点です。



Max Potential First Input Delayのもう1つの指標は、First Input Delay（FID）です。これは、ユーザーが最初にWebページを操作し始めた瞬間から経過した時間を表すWebページのパフォーマンスメトリックの1つです。 e。リンクまたはボタンをクリックするか、Webブラウザがインタラクションに応答できるようになるまで（mozillaで定義されているように）JavaScriptベースのコントロールを使用します。



そして、水分補給時間はこの指標に直接影響します。また、ページに含まれるコンポーネントとロジックが多いほど、このインジケーターの増加は速くなります。



1つの解決策は、水分補給のための怠惰な負荷です。



Vue SSR / NuxtJSで同様のアプローチを実装する例は、vue-lazy- hydrationパッケージです。（npmリポジトリ内）これは、ブラウザのビューポートの表示部分にのみハイドレーションを実装し、ページがスクロールされた場合にのみ残りを「ハイドレイト」します。このパッケージを使用するための推奨事項もチュートリアルでhabrに発見された私たちは、Nuxt.jsでオンラインストアを作成し、その作者についてアントンモスカルチェンコ特別な感謝の意を表したいと思います。彼の記事では、Lighthouse Chromeは100％のパフォーマンスを達成しました。


More articles:


All Articles