Next.jsのメリットとして度々挙げられることが、CSR、SSRが使い分けられることです。
ようやくクライアントサイドレンダリング、サーバーサイドレンダリングをどう使い分けるのか理解したのでまとめます。
概念として
今までReactやVue.jsのみを触ってきた人は、CSR、SSRについて考えることなく実装してきたと思います。そこに、フロントエンドだけど、APIの実行をクライアントサイドでするか、サーバーサイドでするかという概念が加わります。
基本的には/api/usersのような形でAPIを呼び出し、要素を画面に表示させてきたと思います。これはクライアントサイドでAPIを実行してきたということになります。
そこに、サーバーサイドでAPIを実行するやり方も追加されます。その際、/api/usersのようなAPIエンドポイントは使用しません。直接データベースを扱い、そこで取得したデータの要素を画面に表示させるということをします。
ややこしい点
ファイルごと（コンポーネントごと）に、CSRかSSRが決まっています。
それらのファイルはフォルダ構成の中にごっちゃになっているので、きれいに分けることはできません。
CSRファイルかSSRファイルかの判断方法
- use 'client'とページの一番上に書いてあるとCSR
- APIエンドポイントがあるとCSR
- データベースの操作をしているとSSR
CSRファイルとSSRファイルの使い分け
CSRは、ユーザーの行動によって引き起こされるAPI呼び出しの際に使用します。特に、要素の追加、更新、削除です。
SSRは、ユーザーの行動は関係なく、シンプルに要素を取得する際に使用します。
CSRとSSRに分けるメリット
CSRはユーザーのアクションによって指定したエンドポイントを使ってAPIを呼び出します。そのAPI送信時に、ユーザーidなどの情報も送りますよね。情報を絞り込んでAPIを呼び出すことでサーバーの負荷が軽減されます。結果としてサクサク動くシステムが作れるということです。
SSRは、サーバー側で一気に全てのデータを取得します。メリットは、サーバーは処理が早いのですぐに要素を表示させることができる点です。ただ、すべてのAPIの呼び出しをサーバーでやると負荷が高くなり、サクサク動くシステムが作りにくくなります。
まとめ
理解不足や言葉足らずな点があるかと思いますので、気になる点がございましたらご指摘いただけると幸いです。