目まぐるしい変化をするNext.jsとReactのキャッチアップ
Koder動機
- 就活で面接対策や企業分析している間にキャッチアップがおろそかになっていた
- フロントエンドエンジニアを名乗る以上きちんとキャッチアップせねば
やること
- Next.js Reactの公式ドキュメントや周辺情報を読み、きちんとキャッチアップする
- そもそも理解がおざなりになっている箇所はしっかりと振り返る
Koder公式ドキュメントの前にさっくり下記の記事で理解を深める
Koderメモ書き
app RouterのPage設定
/about のルーティングを設定するためにはファイルではなく about ディレクトリを app ディレクトリの下に作成する必要があります。その後 about ディレクトリの下に page.tsx ファイルを作成します。ファイル名は TypeScript であれば page.tsx または page.ts、JavaScript では page.jsx または page.js とする必要があります。
これは大きな違いだよなぁ。何となく知ってた
Layoutとは？
App Router では app ディレクトリ直下に保存された layoutx.tsx ファイルがすべての page.tsx に適用されます。
これもlayout.tsxで全体で当てたいスタイルには適用できるから楽だね
Route Groupとは
Route Group を設定するディレクトリは()で囲む必要があります。()で囲んだディレクトリ下にはパスに影響を与えることはありませんが layout.tsx ファイルを作成することができるので Route Group 以下のすべてのページに作成した layout.tsx ファイルを適用することができます。
なるほど、パスに影響与えたくないけどlayout.tsxでスタイル与えたいといういいとこ取りの方法か
KoderそもそもServer Componentの理解が足りてない説があるので、こちらを拝読
Koder雑記
Clinet ComponentではServer Componentsをimportできないという制約があります。
これが前実装した時に詰まった原因か...
ただし、Server ComponentがClient Componentに対して、childrenなどのpropを通してServer Componentsを渡すことはできます。
なるほど、単純にchildrenとして渡すのはセーフってことか
Koder雑記②
メリット
- バンドルサイズの減少
- データフェッチにかかる時間の減少
- Code Splittingの自動化
バンドルサイズの減少
Server Componentsのコードはクライアントがダウンロードするバンドルに含まれません。
確かにこれはでかいなぁ
Server Componentsはデータのあるサーバー上で実行されるため、データに直接アクセスできることがあります。APIを介したとしても、レイテンシーは大きく抑えられるでしょう。
なるほど
React Server Componentsでは、自動でClient Componentsを切り分けてバンドル化し、必要となるもののみをクライアントに指定してダウンロードさせます。
これ、すごいな