Webレンダリング技術の進化と課題

Webレンダリング技術の進化と課題 ~ React、Next.js を中心に ~ レンダリングシリーズ（1）

フロントエンド開発をしていると、こういう用語を耳にします MPA、SPA、CSR、SSR、SG、ISR…

これって全部なんだっけ!?

といういう話を今回やっていきたいと思います

職業自己紹介韓国人です。大学時代にはげしくアニメオタクをやってて日本語が上手くなりました。フロントエンドエンジニア（2020/11 ~） React、Typescript メインでやってます

今回の GOAL ➔ Web フロントエンドの進化の流れを理解する各技術がどんな課題を解決するために生まれたのかを理解する

CONTENTS 1. レンダリングとは 2. MPA の時代 3. SPA の台頭 4.
SPA に SSR を！ 5. まとめ

1. レンダリングとは

実はレンダリングの意味は場合によって違う • コンピューターの「レンダリング」 ◦ 抽象的で高次の情報から、画像・映像・音声などを生成すること • WEB の「レンダリング」 ◦ ウェブブラウザがHTMLなどからウェブページを表示すること
• React の「レンダリング」 ◦ React がコンポーネントを実行すること、、なので柔軟に考えていきましょう

2. MPA の時代

1991年、WEBが誕生する CERN (欧州原子核研究機構) 所属科学者の Tim Berners-Lee が初めて WWW、ブラウザ、HTTP などを考案。彼は研究所内の数多くのドキュメントを共有する方法を探してたと知られてる
世界初のWEBサイト（復元したものだけど）テキストに資料のリンクが付与されたハイパテキストの登場 HTML (HyperText Markup Language) の名前もここからきてる

MPA の時代（〜 2000年代前半頃まで） MPA とは、Multi-Page Application (＝複数ページのアプリケーション) の略称。

MPA の時代（〜 2000年代前半頃まで）複数ページってどういうこと？ MPA とは、Multi-Page Application (＝複数ページのアプリケーション) の略称。

MPA の動作

MPA の動作（ちなみに）この時代にはフロントエンドというものがなかったクライアントはもらったHTMLを表示するだけだし

これがページ遷移する度に起きる Aページ開く ① Aページ表示 ③ Bページ表示 ⑤ Cページ表示 ⑦ Dページ表示
② Bページ開く ④ Cページ開く ⑥ Dページ開く

これがページ遷移する度に起きる Aページ開く ① Aページ表示 ③ Bページ表示 ⑤ Cページ表示 ⑦ Dページ表示
② Bページ開く ④ Cページ開く ⑥ Dページ開くページ作るページ作るページ作るページ作る毎度新しいページ（HTML）作る = 複数ページのアプリケーション

MPA は基本的に SSR SSR とは、Server side rendering (＝サーバー側のレンダリング) の略称。
クライアントはもらった HTMLを表示するだけ PHP、Java などがよく使われていた

しかし、MPA には限界があり画面更新のためにサーバーにリクエストしてHTMLを送信してもらう必要がある＝同じ画面の一部だけ更新する場合もフルリロードが必要がある Aページの一部更新フルリロード Aページの一部が更新される (+ 画面遷移する度にサーバーにHTML作ってもらうから時間かかる)

そして新しい技術の動きが始まる

3. SPA の台頭

2005年、Ajax のデカいインパクト Ajax は Asynchronous JavaScript and XML (=非同期 JavaScript
と XML) の略称ウェブアプリケーションが非同期 HTTP リクエストを行うことでサーバーからコンテンツを取得し、その新しいコンテンツを使用してページの関連部分を更新する = 更新が必要な部分のみがリクエストされるため、ページの応答性が向上

2005年、Ajax のデカいインパクト Google Map をドラッグしたらその部分だけ読み込むあれ Google が Google Map に
Ajax（Asynchronous JavaScript and XML）を採用 Ajaxのおかげで、画面遷移せず画面の一部だけを更新できる

毎回リロードせずさくさくとWEBが動いたらいい感じになりそう！

SPAの台頭（2000年代後半〜 2010年代前半頃） SPA とは、Single-Page Application (＝単一ページのアプリケーション) の略称。

SPAの台頭（2000年代後半〜 2010年代前半頃）単一ページとは？ SPA とは、Single-Page Application (＝単一ページのアプリケーション) の略称。

SPA の動作 NEW! WEBサイトがもっとインタラクティブでリッチなUIを求められ、フロントエンドという領域が生まれる

SPA の動作

SPA の動作サーバーが HTML を生成して送信するのではなくクライアント側で Javascript が HTML を生成する

これが初期アクセスのときだけ起きる Aページ開く ① Aページ表示 ③ Bページ表示 ⑤ Cページ表示 ⑦ Dページ表示
② Bページ開く ④ Cページ開く ⑥ Dページ開くクライアントのJSが新しい画面描画クライアントのJSが新しい画面描画クライアントのJSが新しい画面描画

これが初期アクセスのときだけ起きる Aページ開く ① Aページ表示 ③ Bページ表示 ⑤ Cページ表示 ⑦ Dページ表示
② Bページ開く ④ Cページ開く ⑥ Dページ開くクライアントのJSが新しい画面描画クライアントのJSが新しい画面描画最初だけ新しいページ（HTML）作る = 単一ページのアプリケーション（空の）ページ作る＊この時点でアプリケーション全体に必要な　すべてのコードをクライアントに送信するクライアントのJSが新しい画面描画

初期の SPA は基本的に CSR CSR とは、Client side rendering (＝クライアント側のレンダリング)
の略称。画面を描画するのはクライアントで読み込まれたJavascript ＊SPA実装のための代表的なフレームワークは、　AngularJS(2010)、React (2013)、Vue.js(2014) などがある

SPA が解決した課題初期アクセス時点でアプリケーションに必要なすべてのコードが揃ってる＝Javascriptで一部だけ更新ができるので、フルリロードせず画面更新ができる Aページの一部更新フルリロードなしで更新される (+ 画面遷移するときサーバーまでいかなくてもいいのでサクッと画面遷移できる)

ただ、SPAには新しい課題がありこの世に完璧などない

SPA の課題 (1) 初アクセス (空の)HTML ダウンロード Javascript ダウンロード Javascript 実行
APIデータフェッチ 1番時間かかる (アプリ全体のコードをこのときダウンロードするから＆JSは重いから) 初アクセス＊MPAの場合 HTML ダウンロード初回ロードが遅い

初アクセス＊MPAの場合 HTML ダウンロード SPA の課題 (2) 初アクセス (空の)HTML ダウンロード
Javascript ダウンロード Javascript 実行 APIデータフェッチ SEO に弱い

クローラーは HTML の内容を取得して分析する <!DOCTYPE html> <html> <head> <title>SPA Example</title> </head>
<body> <div id="root"></div>  <script src="app.js"></script>  </body> </html> ↓クローラーから見たSPAのHTML SPA の課題 (2)

クローラーは HTML の内容を取得して分析する <!DOCTYPE html> <html> <head> <title>SPA Example</title> </head>
<body> <div id="root"></div>  <script src="app.js"></script>  </body> </html> ↓クローラーから見たSPAのHTML SPA の課題 (2) そしてクローラーは判断する… 「このページは中身がない！」

UXが改善されたのはいいものの、この２つの課題（初期ロード遅い＆SEO弱い）が場合によってはあまりにも致命的で、、特にtoC向けサイト

この課題を解決するために新しい技術が投入される

4. SPA に SSR を！

2016年、Next.js の登場と SSR の復活 Next.js により、React で簡単に SSR が実装できるようになる =
SPA にも SSR が簡単に使えるようになる

Next.js の Pre-rendering 初期SPAの課題: 初回ロードが遅い、SEOに弱いこの課題を解決するため、 Next.js は基本的にすべてのページを Pre-rendering する
= クライエント側の JS がレンダリングする代わりに、各ページに対して HTML を予め作っておく＊pre = 事前に

①から⑤までは初期SPAと同じなので、　　のところを詳しく見ていく Next.js の Pre-rendering

Next.js の Pre-rendering ⑤ JSON 送信 ⑥ HTML を作る ⑦
HTML、JS送信 ⑨ JS実行 ⑧ HTML表示空のHTMLではなく、ページ表示に必要な HTML を作るこの時点では JS が実行されてないので、インタラクティブではないここでインタラクティブになる EX) ボタン押してもなにも起きない SPAだけど、サーバーでHTMLを作成してクライアントに送信する

⑤ JSON 送信 ⑥ HTML を作る ⑦ HTML、JS送信 ⑨ JS実行
⑧ HTML表示 Pre-rendering がある場合 ⑤ JSON 送信 ⑦ 空のHTML、 JS送信 ⑧ JS実行 ⑧ 空のHTML表示 Pre-rendering がない場合（素のReact）

Hydration という概念 ⑦ HTML、JS送信 ⑨ JS実行 ⑧ HTML表示 Javascript を実行してページをインタラク
ティブにすることを Hydration と言う＊Hydration は水分供給という意味（ドライな HTML に水分を供給する、で覚えたらいいかもしれない） ⑤ JSON 送信 ⑥ HTML を作る

Pre-rendering(= サーバー側でHTMLを生成する) には 2 種類がある • SG（Static Generation、静的生成） ◦ (後発！)
ISR（Incremental Static Regeneration、段階的な静的再生成） • SSR（Server-side Rendering、サーバー側のレンダリング）

SG（Static Generation、静的生成） HTML がビルド時に生成され、ずっと同じHTMLが配信される

ISR（Incremental Static Regeneration、段階的な静的再生成） 2020年、SG の一種として後発で新しく登場 SG と同様に、HTML を事前に生成するけど、完全固定ではなく一定時間後に更新可能 1. 静的ページが生成され、CDN
にキャッシュされる 2. 指定時間以内にリクエストが来たら、キャッシュ済みのページを返す 3. 指定時間以降にリクエストが来たら、キャッシュ済みのページを返すただ、裏では新しい静的ページ生成して、キャッシュを更新する 4. 次回のリクエストには更新されたキャッシュから配信する ISRの動き動的なコンテンツを含むページも静的ページとしてCDNにキャッシュすることが可能

SSR（Server-side Rendering、サーバー側のレンダリング） HTML が各リクエストの度に生成され、毎回新しく生成したHTMLが配信される

SSR（Server-side Rendering、サーバー側のレンダリング） HTML が各リクエストの度に生成され、毎回新しく生成したHTMLが配信される MPA の SSR と完全に同じではない（こっちはサーバー側Reactコンポーネントをでレンダリングし、クライアント側でHydrationを行う）
React のための SSR という感じ

SG vs SSR、どう使い分ける？ • SG はビルド時にHTML生成（=ビルド時にもうページが完成してる） ◦ ページのレンダリングに必要なデータがビルド時点で利用できる場合 ◦ ページが頻繁に更新されない場合
◦ 例）ニュースページ、FAQページなど • SSR はリクエストごとにHTML生成（=リクエストがないとページを作れない） ◦ リクエスト時にしかわからない情報に依存するページをレンダリングする場合 ◦ ページが頻繁に更新され、常に最新の情報を表示する場合 ◦ 例）ログイン後のマイページ、検索結果ページなど

Next.js の Pre-rendering が解決した課題 (1) 初期表示速度の改善初アクセス (空の)HTML ダウンロード Javascript
ダウンロード Javascript 実行 APIデータフェッチ初アクセス HTML ダウンロード Javascript ダウンロード Javascript 実行 APIデータフェッチ＊pre-rendering のない SPA この時点でページのコンテンツが見れる

Next.js の Pre-rendering が解決した課題 (1) 初期表示速度が改善され、SPAのメリットであるサクッとした画面更新・遷移ができることがデカい初アクセス HTML表示インタラクティブになる SPAなので
ページ更新はJSでさくっと（画面遷移も）

(注意) Next.js の Link で遷移しないと、SPAの良さが活かせない＊ <Link> で遷移する場合＊ HTML
の <a> で遷移する場合クライアントサイドの Javascript で画面遷移するため、フルリロードせず遷移する通常のリンクなので、サーバーから新しいHTML 取得する（=フルリロードが発生する）

Next.js の Pre-rendering が解決した課題 (2) SEO改善初アクセス (空の)HTML ダウンロード Javascript
ダウンロード Javascript 実行 APIデータフェッチ初アクセス HTML ダウンロード Javascript ダウンロード Javascript 実行 APIデータフェッチ＊pre-rendering のない SPA 空のHTMLではないので、クローラーがちゃんとクローリングできる

ただ、Pre-rendering (主にSSR) にも課題がありこの世に完璧などない

Next.js の SSR の課題 (1) HTML作るに時間かかる & サーバーに負荷がかかる（サービスの規模が大きいほど課題感がたかまる）リクエストの度にHTML作る =
HTML作ってる間は画面が表示されない = サーバーが重労働＊ここで必要なデータをフェッチして、　それをもとにHTMLをつくる

HTML 描画から Javascript 実行まで時間かかる (見えてるけど押せないんだが？の時間がある) Next.js の SSR の課題 (2)
HTML表示インタラクティブになるコンテンツが見えるまでは早くなったけど、 TTI (Time to interactive) になるまで時間かかる

この課題を解決するために、React と Next.js はまた新しい技術やアプローチを導入し続ける

…ということで RSC (React Server Component）までいきたかったが、時間がないので RSC とその他詳細なレンダリング最適化手法は次回に！！ (力尽きたので)

6. まとめ

• アプリケーションの種類 ◦ MPA (Multiple Page Application) ◦ SPA（Single Page
Application） • レンダリングの手法 ◦ SSR（Server Side Rendering） ◦ CSR (Client Side Rendering) • Next.js の Pre-rendering の種類 ◦ SG (Static Generation) ▪ ISR (Incremental Static Regeneration) ◦ SSR（Server Side Rendering) 用語整理

暗記するのではなく、理解しましょう！各技術は必ずなにかの課題を解決するため生まれましたそれを理解したら、どの場面でどの技術を使えばいいか選べるようになります

ご清聴ありがとうございました

- zenn, 「【レンダリング大全】CSR, SSR, SPA, MPA, PPRの意味、そもそもレンダリングとは【2025 年始】」, https://zenn.dev/txxm/articles/f04b21949ddab3 -
react.dev, 「Render and Commit」, https://react.dev/learn/render-and-commit - nextjs.org, 「getStaticProps」, https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props - nextjs.org, 「getServerSideProps」, https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props - zenn, 「Next.jsのISRで動的コンテンツをキャッシュするときの戦略」, https://zenn.dev/catnose99/articles/8bed46fb271e44 - developer.mozilla.org, 「Ajax」, https://developer.mozilla.org/ja/docs/Glossary/AJAX - speakerdeck, 「MPA化するSPAとSPA化するMPA」, https://speakerdeck.com/yosuke_furukawa/mpahua-suruspatospahua-surumpa 参考資料

Webレンダリング技術の進化と課題

Webレンダリング技術の進化と課題

More Decks by Jeongmin LEE

Featured

Transcript