背景
仕事でNext.jsを使っているのですが、ちょっと前に気になる本を見つけて読んで色々感じたことがあったので書いていこうと思います。
本に書いてあったCSRとSSRについて
自分もどちらにするかについて、迷いがあったので非常にためになりました。
この本を読む前に色々検討して、SSR一本でアプリを作成していましたが、本書を読んだことで色々整理されたので自分の考えもいれつつ、書いていきたいと思います。
CSRのメリット
- 非同期で描画されるのでユーザー体験が良くなる
SSRのメリット
- クライアント側のCPU負荷が少ない
- クライアント側の実行環境への依存が少なくなる。JSが動かない環境だとしても多少は動く
- 最初に表示するページのみ、CSRと比べると表示が早い
- (私の経験ですが)CSRよりもAPIが少なくできる傾向にあり、外部で脆弱性検査を受ける場合は費用が抑えられる
- (私の経験ですが)1ファイルにデータ取得部分と表示部分を書くことになるので、CSRのコードと比べてコードの見通しがいいように感じる。ただし、CSRもGraphQLやOpenAPI等、型付きでレスポンスが帰ってくる場合は、あまり変わらないかもしれない。CSRの場合は、読み込み中の処理を書かないといけないのでその分コードは長くなる。ここらへんもコードが読みにくいと感じる一因かもしれない
私の考え
SSRかCSRどちらかに寄せたほうがいいと思っています。
なぜなら、CSRとSSRのコードが混在した場合、サーバーサイドJSとクライアントサイドJSの挙動の違い、サーバーサイドJSでは環境変数を使用できて、クライアントサイドで環境変数が読み込めない問題（※）などで、同じ処理なのに使い回せない、見分けるために命名を変えるといった対策が必要であるからです。
※ NEXT_PUBLIC_の使用やnext.config.jsに書くことで、クライアントサイドでも読み込ませることは可能
nextjs.org
nextjs.org
また、どちらかに寄せたほうがいい理由は他にもあります。
などでも言及されていますが、パフォーマンスと整ったアーキテクチャはトレードオフの関係にあり、パフォーマンス最適化図られたコードを整ったアーキテクチャにするよりも整ったアーキテクチャについてパフォーマンス最適化図ることのほうが簡単と言われています。
そういう意味でもどちらかで一本化し、パフォーマンス最適化はその後で取り組むというアプローチがいいと思っています。
どちらかに寄せるとなった場合、SSRが必要な要件があるならSSR、無いならCSRでいいと思っています。
（無いなら、Reactだけでもいいのでは？とも思いますが、、）
終わりに
Next.jsはReactを元々使っていた方が多くいらっしゃるので、「CSRをどんどん使っていきたい！」という感じなのかなと思ったりもしますが、SSR一本でやってみるというのもありかなと、本記事を書いてみました。
コメントいただけると嬉しいです。
