【けつろn】特に要件がなければ、一般的にはどちらを使うのがいいの？
SSRを使うのがよいらしい
現在のWeb開発の潮流では、SEOや初期表示速度を重視するケースが多いらしい。
実装をとにかく簡単にしたい場合や、SEO不要・内部利用中心ならCSRでも可
将来的な拡張や汎用性を考えるとSSRが推奨される
レンダリングの違いはわかったが...
CSRやSSGやCSR、ISRの違いを説明した記事はたくさんある。
がしかし、実際どのシーンでどれを使うのが適切か、特に要件がなければ何を使うのがいいか、はわからない。
この記事で、どのようなシーンで、どのような要件の時にどのレンダリング方法を使うのがいいのかを深ぼっていく
CSRの利用シーンを調べる
CSRの利点
サーバー負荷が軽い
- サーバー費用を安く抑えたい時に有効、ユーザ数が増えていくと効果が出てくる
ページ遷移が高速
- レスポンス速度を重視したい時に有効
インタラクティブなUIに最適
- リッチなページを作りたい時に有効
CSRの欠点
初期表示が遅い
- JavaScriptの量が多いページは、ダウンロード・パース・実行に時間がかかり、初期表示が遅くなるので不利
- ページ表示のために複数のAPIコールや重いデータ取得が必要な時、JavaScript実行後にさらにネットワーク待ちが発生し、表示が遅くなるので不利
SEOに不利
- 検索エンジンに引っ掛けたい内容の時は不利
- 逆に会員以外には非公開のページであれば、SEOを気にする必要はないのでCSRがよい？
セキュリティや認証の考慮が必要
- データフェッチ時のセキュリティをリスクを気にする、実装コストをかけたくないのなら、CSRはやめた方がいい
ターゲットユーザーのデバイス性能とネットワーク環境に依存する
- ユーザのネットワーク環境が悪い場合やデバイスの性能が低い場合はCSRは有効ではない
SSRの利用シーンを調べる
SSRの利点
SEOに強い
- Qittaのような記事を公開するサービスでは、検索に引っ掛からせるため、SEOが重要になる
動的コンテンツ・パーソナライズに最適
- SmartNewsのようなものの場合、毎日のアクセス時点でパーソナライズされた最新のデータを表示する必要がある時に有効
低スペック端末でも快適
- クライアント側でのJavaScript実行負荷が少ないため、低スペック端末や回線速度が遅い環境に有効
SSRの欠点
サーバー負荷が高い
- サーバー負荷をかけたくない時はやめた方がいい
ページ遷移がCSRより遅い場合がある
- ページ遷移のたびにサーバーリクエストが発生するため、ボタンを押した後のページ遷移が遅くなるため、遷移を早めたい場合はやめた方がいい