Rendering on the Web を翻訳しました

Google Web Fundamentals のコンテンツ Rendering on the Web を日本語へ翻訳しました。
本記事の執筆時点では、上記のリンク先で表示言語を日本語へ切り替えると閲覧できるようになっています。

元記事の概要

このコンテンツは Web上のレンダリングについて Chrome開発チームがこれまで得た知見を基にして、どのような種類があり、どうすれば効率的な処理に繋がるのかをまとめたものです。

各レンダリング手法の特徴や長所と短所
アプリケーションのどこへロジックやレンダリングを実装すべきか?
サーバサイド レンダリングは使うべきか?
リハイドレーションについてはどのように扱うべきか?
……などの内容が以下の章立てで構成されています。

  • Rendering on the Web - Web上のレンダリング
    • 用語
      • レンダリング
      • パフォーマンス
    • サーバーレンダリング
    • 静的レンダリング
    • サーバーレンダリング vs 静的レンダリング
    • クライアントサイド レンダリング (CSR)
    • リハイドレーションによるサーバーレンダリングと CSRの組み合わせ
      • リハイドレーションの問題:ふたつの価値のためのひとつのアプリ
      • ストリーミング サーバーレンダリング と プログレッシブ リハイドレーション
        • 部分的なリハイドレーション
        • トライソモルフィック レンダリング
    • SEOについての考察
    • まとめ

頻出する用語から丁寧に解説されているので、 Webアプリのパフォーマンスについて興味のある方は ご一読をおすすめします。

元記事内の画像翻訳について

現在、Google Web Fundamentals の画像については翻訳したものが適用されないため、元記事で取り扱っている画像内のテキストを日本語へ翻訳したものを以下へ掲載します。
日本語版の記事を読む際の参考になれば幸いです。


リハイドレーションの問題:ふたつの価値のためのひとつのアプリ:

html.png
元画像:https://developers.google.com/web/updates/images/2019/02/rendering-on-the-web/html.png


トライソモルフィック レンダリング:

trisomorphic.png
元画像:https://developers.google.com/web/updates/images/2019/02/rendering-on-the-web/trisomorphic.png


まとめ:

infographic.png 元画像:https://developers.google.com/web/updates/images/2019/02/rendering-on-the-web/infographic.png


画像のライセンスについて

本エントリの画像は Googleによって作成および共有され、Creative Commons 4.0 表示ライセンスの内容に従い使用されるものに基づく変更です。 更に読者がより多くの情報を参照することができるように、出典元のページへリンクを張ってください。これはコンテンツが変更された場合においても重要です。

Images of this contents are modifications based on work created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License. Again, please link back to the original source page so that readers can refer to it for more information. This is even more important when the content has been modified.