Reactベースで開発において動的なページの作成（SSR）をする際に技術スタックについて迷ったことはありませんか？

そもそもSSR（サーバーサイドレンダリング）とは？

SSR（サーバーサイドレンダリング）とは、サーバー側でWebページをレンダリング（生成）してから、HTMLとしてクライアント（ブラウザ）に送信する技術です。
これに対して、クライアントサイドレンダリング（CSR）は、クライアント側でJavaScriptが実行されてからページを描画します。

よってサイトの表示速度がCSRと比較して高いため、ユーザーにとって優しいサイトを作ることができます。
SSRについて紹介しているコンテンツもありますのでよかったらご覧ください。

方法1) Next.jsを使用

Next.jsは、ReactアプリケーションでSSRを簡単に実現できるフレームワークです。
Next.jsを使うと、Reactアプリケーションのページごとに静的生成（SSG）やサーバーサイドレンダリング（SSR）を選択でき、必要に応じたパフォーマンスを最適化できます。

Next.jsのメリット

簡単にSSRを実装できる

Next.jsはSSRをデフォルトでサポートしているため、非常に簡単にSSRが設定可能です。getServerSidePropsやgetStaticPropsなどの関数を使用して、データフェッチとSSRをシンプルに行えます。

SSG（静的サイト生成）との併用が可能

Next.jsでは、特定のページに対してはSSR、他のページではSSG（静的サイト生成）を使うことができます。例えば、頻繁に更新されないページは静的に生成し、頻繁にデータが変わるページはSSRを使う、といった選択ができます。

豊富な機能

Next.jsは、SSR以外にも多くの機能を備えています。例えば、APIルート、静的サイトの自動生成、画像最適化、国際化（i18n）など、ウェブアプリケーションの開発に必要な多くの機能がデフォルトで含まれています。

SEOに強い

SSRを活用することで、ページのHTMLがサーバー側で生成されてからクライアントに送信されるため、クローラーによるインデックスが容易になり、SEOに有利です。

コミュニティの大きさ

Next.jsは非常に人気があり、広範なコミュニティとサポートが存在します。トラブルシューティングや質問への回答が容易です。

Next.jsの使いどころ

よってNext.jsを使う場面は以下になります。

• 既存のExpressプロジェクトにSSRを追加したい場合
• 高度なカスタマイズや特定の要件に従う必要がある場合
• フレームワークの制約を避けたい場合

方法2) Expressを利用

Expressとは、Node.jsで動作する軽量なWebアプリケーションフレームワークです。
Node.js上でWebサーバーを簡単に構築するためのツールであり、特にAPIサーバーやWebアプリケーションのバックエンドを作る際に広く使われています。

Expressを使用するメリット

カスタマイズ性が高い

Expressを使用してSSRを実装する場合、アプリケーション全体を完全にカスタマイズできます。Next.jsなどのフレームワークが提供する抽象化を必要とせず、自由度の高い実装が可能です。

軽量なサーバー

Express自体は非常に軽量で、サーバーの構成を極めて細かくコントロールできます。そのため、特定のパフォーマンス要件やユースケースに合わせた最適化が行いやすいです。

フレームワークに依存しない

自分で設定を行うため、フレームワークの制約や独自仕様に縛られない柔軟な開発が可能です。また、他のミドルウェアやライブラリと簡単に統合できます。

Expressの使いどころ

よってExpressを使う場面は以下になります。

• 既存のExpressプロジェクトにSSRを追加したい場合
• 高度なカスタマイズや特定の要件に従う必要がある場合
• フレームワークの制約を避けたい場合

Expressを使用する注意点

Expressを使用する際には注意が必要です。

セットアップが複雑

SSRの実装を手動で行うため、Next.jsのように簡単に始められるわけではありません。サーバー、クライアント両方のビルドを手動で管理する必要があります。

メンテナンスコストが高い

SSR、クライアントサイドのハイドレーション、パフォーマンス最適化など、すべてを自分で管理する必要があるため、メンテナンスに手間がかかります。

方法3) Remixを使用する方法

モダンなWebアプリケーションを構築するためのフルスタックフレームワークです。
主に、ユーザー体験（UX）の最適化とWeb標準を重視しており、サーバーサイドレンダリング（SSR）やクライアントサイドレンダリング（CSR）を効率的に統合した開発が可能です。

Remixを使用するメリット

Web標準に準拠した開発

Remixは、Web標準を重視したフレームワークです。ページ遷移やデータのフェッチなどを最適化し、クライアントサイドとサーバーサイドをシームレスに結びつけます。

データのプリフェッチとパフォーマンス

Remixは、サーバーサイドでデータを取得し、クライアントに渡す際に非常に効率的な処理を行います。これにより、最適なパフォーマンスを維持しながらページの遷移やデータ取得を実現します。

SEOとUXの両立

Remixは、ページのパフォーマンスだけでなく、ユーザー体験（UX）にも力を入れており、ページ遷移やデータ取得の高速化を行います。SSRによってSEOにも配慮されています。

柔軟なデータ管理

Remixでは、各ページごとにデータを効率的に管理でき、サーバーサイドでのデータフェッチとクライアントサイドでのデータ表示がスムーズです。

Remixの使いどころ

Remixの使いどころは以下です。

• モダンなWebアプリケーションを構築したい場合
• SSRとクライアントサイドレンダリング（CSR）の両立を求める場合
• ユーザー体験を最適化したいアプリケーション

Remixを使用する際の注意点

Remixを使用する際にはもちろん注意が必要です。注意点は主に2つあります。

新しいフレームワーク

Next.jsに比べると、Remixは比較的新しいフレームワークであり、ドキュメントやコミュニティのサポートがまだ発展途上です。

学習コスト

Web標準を重視するため、これまでのReactやNext.jsとは少し異なる設計思想があり、最初に慣れるまで時間がかかる可能性があります。

各技術比較表

各技術の比較を表にしました。

まとめ

それぞれのフレームワークには利点と注意点があるため、プロジェクトの要件や優先事項に合わせて選択することが重要です。
SEOやパフォーマンスを重視する場合はNext.js、柔軟で高度なカスタマイズが必要な場合はExpressとReact、Web標準やユーザー体験に焦点を当てた新しいアプローチを試したい場合はRemixが適しています。