簡単に自己紹介
著者のイナバくんは、某会社でフロントエンドエンジニアをしてます。
最近クソ暇とても時間があるので、自習がてらApp Routerを学んでいます。
この記事で話すこと
- App RouterとPages Routerの違い
- Server ComponentとClient Componentの違い
この記事で話さないこと
- App Routerの色んな便利な機能の解説
- Dynamic Routerとか
- Private Folderとかとか
- App Routerで使えるキャッシュ周り (勉強中)
今までのPages Routerは何だったの？
今までのNext.jsのルーティングは「Pages Router」を使っていました。
/page ディレクトリにindex.tsxを置いて、default export するとページとしてルーティングされるアレです。
初めてNext.js触った時は簡単にSPAが作れて感動したのを覚えています。
しかし、Page Routerは古い機能となってしまいました。
Reactの新機能のServer Componentに対応するため、Next.jsでApp Routerが開発されました。
App Routerとは？
App RouterはPages Routerに代わる新しいルーティング方式です。
Pages Routerとはルールが全く異なります。
まず、/app ディレクトリにpage.tsx を置くことでページとしてルーティングされます。
そして、App Routerではコンポーネントはデフォルトでサーバーコンポーネントとなります。
サーバーコンポーネントとは？
サーバーコンポーネントとはサーバーサイドでのみレンダリングされるコンポーネントになります。
サーバーコンポーネントとクライアントコンポーネントの違いは、下記になります。
- サーバーコンポーネント(RSC): サーバーでのみレンダリングされるコンポーネント
- 主にAPIリクエスト実装に使われる
- クライアントサイドでレンダリングされないので、API keyなどを含めることができる
-
useStateなどのhooksを使えない(= ハイドレーションされない) - クライアントコンポーネントを含んで使うことができる
- クライアントコンポーネント: クライアント + サーバー でレンダリングされるコンポーネント
-
useStateなどのhooksを使える(= ハイドレーションされる) - サーバーコンポーネントは含められない
-
紛らわしいのが、従来のSSR(サーバーサイドレンダリング)ですが、SSRはクライアントコンポーネントをサーバーサイドでレンダリングすることなので、サーバーでのみレンダリングされるサーバーコンポーネント(RSC)とは異なります。
また、App Routerでデフォルトがサーバーコンポーネントなので、クライアントコンポーネントを使いたい場合は、ファイルの頭に
`use client`;
と記述する必要があります。
サーバーコンポーネントで出来ること
- クライアントコンポーネントよりデータフェッチが速い(サーバーで実行されるため)
- コンポーネントをasync関数にすることで、内で直接データフェッチできる(
getServerSidePropsを使わない) - クライアントサイドでレンダリングされないのでセキュリティ的にGood
- 様々なキャッシュを使えるらしい(よく知らん)
まとめ
App Routerと使うと、Pages Routerの時よりもコンポーネントをサーバー or クライアント どちらでレンダリングするかを意識する必要があります。
また、今まではGraphQLのApolloとかTanStack QueryのようなAPIクライアントのライブラリでサーバーキャッシュを使っていましたが、App Routerではデフォルトでキャッシュがあるので、開発者はキャッシュ周りの戦略を考えないといけないですね。