レンダリング戦略
CSR特化でSPA構築が容易
拡張性とエコシステム
React
- 膨大なエコシステムとライブラリ
- コンポーネントの再利用性が高い
- ReactNativeとの連携可能
- 大規模アプリでも柔軟に拡張可能
- 適切なライブラリ選定に時間
- 依存関係の管理が複雑
- アーキテクチャの一貫性維持が必要
DeNAのゲームプラットフォームでは、React+TypeScript+Emotion+Reduxの組み合わせを標準化し、10以上のサービスで共通コンポーネントライブラリを活用。ただしライブラリ選定・検証に約3ヶ月要した。
Next.js
- 標準的な機能が組み込み済み
- Vercelエコシステムとの強力な統合
- プラグインやモジュールが増加中
- Vercelへの依存度が高くなりがち
- フレームワーク制約外の実装に工夫必要
- バージョンアップの破壊的変更への対応
NTTドコモのdマガジンサービスでは、Next.jsとVercelのイメージ最適化機能で画像読み込み時間を60%削減。Vercel Analyticsでリアルユーザーのパフォーマンス計測を実現し、3ヶ月でCore Web Vitalsスコアを平均45ポイント向上。
SSR/SSG/ISRを柔軟に活用可能
React
- クライアントサイドレンダリングに特化
- 開発者が完全な制御を持つ
- Suspenseなどで細かい制御が可能
- SEO対応に追加設定が必要
- 初期ロード時間が長くなりがち
- SSRの自前実装は技術的負担大
メルカリのようなECサイトでは、大量の商品表示にCSRを活用する一方、初期ロード時間の長さが課題となり、5人のエンジニアが2ヶ月かけてパフォーマンス改善に取り組んだ。
Next.js
- 複数のレンダリング方法を提供
- ページごとにレンダリング方法を選択可能
- サーバー/クライアントコンポーネントの混在
- フレームワークの制約内での開発
- バージョンアップによる破壊的変更
The Huffington Post JapanではSEO重視のためNext.jsのSSRを採用。First Contentful Paintが1.2秒→0.8秒に改善され、検索流入が23%増加。
Next.js
- Vercelへのワンクリックデプロイ
- 主要クラウドプロバイダーのサポート充実
- スケーリングが容易
- プレビュー環境の自動生成
- SSR/ISR活用にはサーバーリソースが必要
- Vercel以外のデプロイには追加設定必要
- サーバーレス環境での制約に注意
ヤフーショッピングの一部機能では、Next.jsを採用し、AWS ECS Fargateでコンテナ化してデプロイ。オートスケーリングによりセール時のトラフィック増加（通常の約5倍）にも対応し、99.95%の可用性を維持。
開発環境とビルドプロセス
React
- CRAで簡単に開発環境構築
- ビルドツールとの組み合わせ自由
- 特殊なアーキテクチャにも対応
- 初期設定に時間がかかる
- プロダクション最適化に追加設定必要
- CRAの場合、設定変更が難しい
ソニー銀行のオンラインバンキングシステムでは、カスタム認証フロー実装のためejectし、Webpack設定維持に四半期ごとに約40時間のリソースを費やしている。
Reactはライブラリ、Next.jsはフレームワーク。自由度と規約のバランスを考慮して選択しよう。
Next.js
- 開発環境が最初から整っている
- 最適化されたビルドプロセスが組込済
- Vercelへのデプロイが非常に簡単
- SSR実装にはNode.jsサーバーが必要
- 大規模アプリでは複雑なデプロイ戦略必要
- 環境変数の扱いに注意が必要
東京証券取引所のトレーダー向けダッシュボードでは、ReactアプリをAWS S3 + CloudFrontにデプロイし、99.99%の可用性を実現。インフラコストも月額約8万円で抑えられている。
リクルートのホットペッパーグルメでは、開発環境構築の工数が3週間→3日に短縮。Vercelの自動デプロイでリリースプロセスが2時間→15分に短縮。