SPA との対比で使用される用語 → Multi Page Application / Single Page Application ▪ 複数 の HTML ページで構成される → サーバーが HTML をレスポンス → 状態の復元は Cookie などを頼りに SPA・MPA の違い 画面遷移毎に「ページのリクエスト」が発生するもの HTML 画面遷移 HTML HTML 画面遷移
FID が遅くなりがち(バンドルサイズの肥大化) → データ取得のニーズが多様化(データ取得の然るべきタイミングと頻度) → React に限らず、他フロントエンド実装でも同様のチューニングが必要 フレームワークを採用する利点 主にパフォーマンス観点で、フレームワークが欠かせなくなっている ※1 Can I use React without a framework? :https://react.dev/learn/start-a-new-react-project#can-i-use-react-without-a-framework
named? … my-app # TypeScript 使う? ✔ Would you like to use TypeScript with this project? … No / Yes # ESLint(コーディング規約)使う? ✔ Would you like to use ESLint with this project? … No / Yes # Tailwind CSS(CSS フレームワーク)使う? ✔ Would you like to use Tailwind CSS with this project? … No / Yes # 「src」ディレクトリ使う? ✔ Would you like to use `src/` directory with this project? … No / Yes # 「app」ディレクトリ使う? ✔ Would you like to use experimental `app/` directory with this project? … No / Yes # import エイリアスは? ? What import alias would you like configured? › @/* 【実技】Next.js プロジェクトを作ってみよう
error: Property 'alt' is missing in type ▪ $ npm run lint eslint の実行(コーディング規約違反チェック) → Warning: Image elements must have an alt prop 第2章 Next.js の SPA 【実技】npm script を試してみよう ESLint コーディング規約違反があるとビルドに失敗する
▪ 基本、ブラウザに表示された UI コンポーネントから利用される Web API → 値をフォームに入力・ボタンを押下 → 値を送信する先が、 API Routes(Web API) ▪ ログインユーザーに紐づいた情報の取得 ▪ VPC 内のバックエンド API サーバー(サブシステム)との連携に ▪ サーバーで実行されるため、クレデンシャル情報を扱える 【実技】Web API を試してみよう
直接アクセス・SPA ナビゲーションに備え「両方」用意される → 事前レンダリングは、 HTML・JSON を静的ファイルとして両方出力する ▪ SSR ページはリクエストに応じて、 HTML・JSON を都度出し分ける → getServerSideProps は、HTML を SSR するだけの関数ではない! 事前レンダリング /page-a A /page-b B /page-c C