Rendering on the Web を翻訳しました

Web 翻訳

5年近く前

エンジニア

菊地聡子

unsafe:

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

元記事の概要

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

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

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

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

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

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

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

本エントリの画像は 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.

Rendering on the Web を翻訳しました

元記事の概要

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

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

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

まとめ：

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

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