research-app-router

Next.js のバージョンが 13.4 に上がり、App Router が Stable 扱いとなった。App Router では、React Server Component (RSC) をフル活用できるため、RSC について抑えたく調査を行なった。

RESEARCH CONTENTS

• RSC 記載のデータフェッチはサーバー側で行われる
• RSC の基本は、サーバー側でできる hydration(JavaScript の流し込み)はサーバー側で行なっておいて、ブラウザ側で処理するところ以外は事前にやっておこうという話
• Client Component は末端に寄せるのが Next.js によって推奨されている ※参考
• 👆 とあるが、Clinent Component が親になれないわけではない ※参考
• Suspense と併せて記載するのが基本
• ISR の動きは fetch() 単位にて、revalidate を使用する

HOW TO USE

① API アプリを立ち上げる

• cd api-app
• node index.js

② フロントアプリを立ち上げる

• cd research-app
• npm run dev or npm run build && npm run start

COMFIRM MOTION

ブラウザの動き

ネットワーク

revalidate

参考記事

• AppRouter の基本：Next.js App Router (app ディレクトリ) の逆引き辞典
• RSC の基本：一言で理解する React Server Components
• Suspense 手法：Next.js 13 の React Server Components(RSC) とデータフェッチ
• サーバーコンポーネント利用時、エラーが出る問題：https://zenn.dev/waarrk/articles/23732d8c4102d0