86180


現在、next.jsでSSRを利用した開発していますが、下記の疑問に回答いただけないでしょうか。

SSRを実装する中で`getServerSideProps`を記述しておくとサーバー側で処理が行われ、非同期にデータを取得して、取得データをpropsに突っ込めるということはわかりました。

`getServerSideProps`のドキュメントを読むと注意書きに、`getServerSideProps`内からAPI
Routeをfetchを使って呼び出すのは非推奨ということが書かれていました。ここで言うAPI
Routeというのは./pages/api/hello.jsなどのことだと思いますが、たしかにAPI
Routeもサーバー側で実行される処理だと思うので、同一サーバー間の処理をfetchで呼び出すのは非推奨という感覚は、なんとなくわかります。

疑問点というのは`getServerSideProps`内に非同期処理を書けばAPI Routeの処理をまかなえてしまえそうなので、API
Routeの意義って何だろうという疑問です。

`getServerSideProps`を使わず、API
Routeだけを使用して書いた方が良い処理はどのようなものがあるでしょうか。また、`getServerSideProps`とAPI
Routeの両方の記述が必要な処理にはどのようなものがあるでしょうか？


CC BY-SA 4.0
2022-01-04T05:24:42.283
85480
2022-02-06T15:31:43.297
50588
question
reactjs next.js
next.jsのAPI Routeの意義は？


## API Route を使うケース

主に２つあります。

  1. SSR しなくてもよいコンテンツのためのデータ取得
  2. データ更新のための API エンドポイント

**SSR しなくてもよいコンテンツのためのデータ取得**  
初期レンダリングコストを減らすために、クライアントサイドでレンダリングするときに使います。クリックやスクロールといったアクションに応じて API
リクエストをして結果を表示します。

SEO
対策は重要ですが、コンテンツを詰め込みすぎると、パフォーマンスが悪化してブラウザがサクサク動かなくなります。なので、コンテンツが多すぎる場合は、SEO
的に重要でないコンテンツを SSR の対象から外し、クライアントサイドでレンダリングするのが定石です。

参考ドキュメント:  
<https://nextjs.org/docs/basic-features/data-fetching/client-side>

## `getServerSideProps`とAPI Routeの両方の記述が必要なケース

SEO 的に重要なので SSR したい。しかし同時に、クライアントサイドで動的にレンダリングしたい場合が挙げられます。

たとえば、ユーザー詳細データを取得する API エンドポイント `/users/:id` があります。

  1. ユーザープロフィールページでは、`getServerSideProps` で ユーザー詳細データを取得して SSR します。
  2. ユーザーが投稿したコメントの横にユーザーのアイコンがある。アイコンをホバーしたときに動的にユーザー詳細情報を表示したい。このケースでは `/users/:id` API Route を使います。


CC BY-SA 4.0
2022-02-06T15:31:43.297
86180
2022-02-06T15:31:43.297
51277
85480
answer