【完全保存版】Next.js App Routerのベストプラクティスを解説 

今ならapprouter利用率が高そうですよね

全ては説明できませんでしたが、いつの間にか長くなっちゃいました😇 ありがとうございます！お時間のある時に見ていただけると嬉しいです

こちらこそ、いつもありがとうございます！ 分かりました！概要欄に記載しておきますね。

@@programming_tutorial_youtube ありがとうございます！

どうもご視聴ありがとうございます！ フロントからAPIHandlerをfetchで呼び出すときにはデフォルトでキャッシュが働きます。なのでご認識の通りです！

SSGやISRなどのレンダリングはNext.jsの機能ですので、Vercel以外でも動きます(ISRはVercelで最適化されているのでISRを使う場合はVercelになると思います)。 たとえば、SSGで作ったサイトをAWSでデプロイする場合、SSGのレンダリング(ビルド時にデータ取得＆静的化)は行われますが、DataCacheは行われるかどうかは定かではありません(これは僕の知識不足です。) もしもキャッシュされない場合は、SSGで出力した静的ファイルをS3にアップロードし、それをCloudFrontを利用してCDNキャッシュする必要があるかもです。 Amplifyでデプロイした場合は、自動でキャッシュを良しなにやってくれるかもですが、、詳細はちょっと分からないですね、、すみません。GCPも同様だと思います。 Vercel以外でもキャッシュの基本的な恩恵は受けられるみたいですが、グローバルCDN配信に自動で対応していないホスト先ではCDNキャッシュ設定など手動で行う必要があるかもです。

いいと思いますよ！ あまりにもリアルタイム性を要求するアプリであればReactだと思いますが、Next.jsで始めるのは良い選択だと思います。

あっ勘違いしてました。 いままでTanStackQueryを使ってクライアント側でフェッチしてユーザーごとにキャッシュを持たせていたのですが、Next.jsのfetchの場合サーバーサイドでのフェッチになるので、全体のキャッシュになるのですね(ユーザーごとではない) この場合って、キャッシュ使わなくてもサーバーサイドでPrismaなど用いてapi叩かなくてもデータをDBから返却できるので、パフォーマンスいいよねって話なのでしょうか？

@@sado4148 そうですね。prismaを利用したデータ取得の場合であればroute handlerを使ってAPIを作る必要はないかなと思っています。 サーバーコンポーネントでのフェッチになりますので、ご認識の通りパフォーマンスが良くなります。ですがサーバーサイドでのキャッシュが付かないので、その場合は ・メモ化(request memoizationと同等)したいのであればcache() ・複数ユーザー間でキャッシュ(Data Cacheと同等だと思います)したいのであればunstable_cache() でprismaを使った関数をラップしてあげるといいですね。 unstable_cacheは名前の通り安定ではないバージョンですので、今後名前の変更があると思います。

ありがとうございます！

なるほど、確かにクライアントコンポだとSEO的に弱いですね。 RSCPayload削減かのトレードオフになりそうですね...