はじめに
この記事は下記の講座で学んだ内容をまとめています。
理解が怪しい所があるので教えてくれるととても嬉しいです。
目次
1.速習App Router#1
2.速習App Router#2
3.速習App Router#3 <- この記事
4.速習App Router#4
5.速習App Router#5
6.速習App Router#6
7.速習App Router#7
サーバーコンポーネントについて
サーバー側で実行されてレンダリングされる。
それによりサーバーコンポーネント内のコードがクライアントに送られない。
サーバーコンポーネントのメリット
・コンポーネント単位でasync await が使えるのでデータ取得が簡単
・シークレットキーが使える
サーバーコンポーネントのデメリット
・ブラウザのAPIが使えない
・Reactのよく使うHooksが使えない
・onClickなどのイベントリスナが使えない
クライアントコンポーネントについて
ブラウザ側で実行されてレンダリングされる。
クライアントコンポーネントのメリット
・Reactのよく使うHooksが使える
・onClickなどのイベントリスナが使える
クライアントコンポーネントのデメリット
・データ取得にasync wait が使えない
・NEXT_PUBLIC_がついてるenvしか使えない
サーバーコンポーネントの描画内容をブラウザを更新せずに描画させるには
router.reflesh()を使う。
router.reflesh()が実行されるとサーバーコンポーネントが実行されてその結果が描画されるのでクライアントコンポーネントのstateには影響しない。