Web Serverがレンダリングと初回データロードを担当 • JavaScriptのダウンロードと実行が完了するまで表示されるのを待つ 必要がない • ユーザーはより早く、完全にレンダリングされたページを見ることが可能 • Core Web Vitals*メトリクスが向上し、ユーザー体験が改善 統一されたメンタルモデル • 同じ言語で、同じ宣言型の、コンポーネント指向のメンタルモデ ルを使って、アプリケーション全体を開発 SEO 向上 • 検索エンジンクローラーが完全にレンダーされたページを直接見る Server Side Rendering(SSR)の登場 Client Web Server 1. Request 4. HTMLファイル 5. API(Ajax) 6. JSON API Server 2. GET 3. レンダリング 7. 差分更新 ▪SPAと組み合わせて利用 *読み込み、インタラクティブ性、視覚的な安定性
src/app/page.tsxを編集すれば変更が反映される Next.jsを始めてみる 開発サーバの起動 npm run dev $ npm run dev > [email protected] dev > next dev ▲ Next.js 14.1.0 - Local: http://localhost:3000
Side Rendering(SPA)がすべての始まり • クライアント側のパフォーマンス問題やSEO問題を解決するためにServer Side Renderingが登場 • 静的なアセットで構成されたページのパフォーマンスをより向上させるためのSSGが登場 • UI/UXの設計と実装をより高パフォーマンスにするため、SSR/SSGとRSCを組み合わせるパターンが登場 頭の整理 Client Side Rendering (CSR/SPA) Server Side Rendering (SSR) Server Component (RSC) Static Site Generation (SSG) 2012 2024 2016