簡単に自己紹介

著者のイナバくんは、某会社でフロントエンドエンジニアをしてます。

最近~~クソ暇~~とても時間があるので、自習がてらApp Routerを学んでいます。

この記事で話すこと

今までのNext.jsのルーティングは「Pages Router」を使っていました。

/page ディレクトリにindex.tsxを置いて、default export するとページとしてルーティングされるアレです。
初めてNext.js触った時は簡単にSPAが作れて感動したのを覚えています。

しかし、Page Routerは古い機能となってしまいました。
Reactの新機能のServer Componentに対応するため、Next.jsで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でデフォルトがサーバーコンポーネントなので、クライアントコンポーネントを使いたい場合は、ファイルの頭に

/app/page.tsx:1

`use client`;

と記述する必要があります。

App Routerと使うと、Pages Routerの時よりもコンポーネントをサーバー or クライアントどちらでレンダリングするかを意識する必要があります。

また、今まではGraphQLのApolloとかTanStack QueryのようなAPIクライアントのライブラリでサーバーキャッシュを使っていましたが、App Routerではデフォルトでキャッシュがあるので、開発者はキャッシュ周りの戦略を考えないといけないですね。