How Next.js Worksを読む
1ページ目
Next.jsの仕組み
コードを実行する環境:開発環境か本番環境か
コードが実行される時間:ビルド時間かランタイムか
レンダリングが行われる場所:クライアント側かサーバー側か
2ページ目
開発環境と本番環境
Rust製のコンパイラ
3ページ目
コンパイルとはブラウザに理解してもらえるようにコードを変換すること
4ページ目
圧縮でコメント・空白・インデント・改行をなくす
5ページ目
コンパイルとはブラウザがパースできるようにすること
バンドルとは依存関係を考慮しながらファイルをまとめること
6ページ目
Next.js にはコード分割の機能がある
pages/ の中がコード分割される
プリロードもしてくれる
エントリーポイントに必要なコードのみを読み込ませてアプリの初期負荷を減らす目的
7ページ目
ビルドステップ - アプリケーション実行のためにコードを用意すること
ランタイム - ユーザーの要求に対してアプリケーションが実行される時間
8ページ目
Webアプリの文脈で
クライアント - ユーザーが触れるところ
サーバー - コードが保管されている。クライアントの要求を受けて応答をするところ
9ページ目
Next.js のレンダリングの種類
サーバーサイドレンダリング
プレレンダリングとも言う
静的サイト生成
プレレンダリングとも言う
getStaticProps を使う
クライアントサイドレンダリング
一般的な React アプリはこっち
Next.js はページごとにレンダリングの種類を選べる
10ページ目
Next.jsでは、アプリケーションコードを以下で展開できる
オリジンサーバー
CDN
edge