SSR（えੱਸえੱਸあーる）

SSRとは

SSR（Server Side Rendering）は、ウェブアプリケーションのレンダリング方法の一つです。従来のクライアントサイドレンダリング（CSR）とは異なり、ウェブページのHTMLをサーバー側で生成し、クライアントに送信します。これにより、クライアントはHTMLを解析して表示するだけで済むため、初期表示速度の向上が期待できます。

SSRのメリット

• SEOの向上: 検索エンジンのクローラーは、JavaScriptを実行せずにHTMLを解析するため、SSRによって生成されたHTMLはインデックスされやすくなります。
• 初期表示速度の改善: サーバーでHTMLを生成するため、クライアントはすぐにコンテンツを表示できます。特に、ネットワーク環境が悪い場合や、デバイスの処理能力が低い場合に効果を発揮します。
• ソーシャルメディアとの連携: ソーシャルメディアのクローラーもHTMLを解析するため、SSRによって生成されたHTMLは、ソーシャルメディアでのプレビュー表示が正しく行われます。

SSRのデメリット

• サーバーへの負荷: サーバーでHTMLを生成するため、サーバーへの負荷が増加します。特に、アクセス数の多いウェブアプリケーションでは、サーバーの増強が必要になる場合があります。
• 開発の複雑さ: SSRを実装するには、サーバーサイドの知識が必要になります。また、クライアントサイドとの連携も考慮する必要があるため、開発が複雑になる場合があります。
• インタラクティブ性の低下: サーバーでHTMLを生成するため、クライアントサイドでのインタラクティブ性が低下する場合があります。ただし、JavaScriptを使用することで、インタラクティブ性を向上させることができます。

SSRとSPAの比較

特徴	SSR	SPA
レンダリング場所	サーバー	クライアント
SEO	良好	不良（対策が必要）
初期表示速度	高速	低速
サーバー負荷	高	低
開発の複雑さ	高	低

SSRのフレームワーク

• Next.js (React)
• Nuxt.js (Vue.js)
• SvelteKit (Svelte)