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

## **はじめに**  
Reactの復習を進める中で「サーバサイドレンダリング（SSR）」という言葉に触れたものの、その仕組みや動作の流れ、Web開発において重要なのはわかるけどどう重要かが自分の中で曖昧でした。そこで、SSRについて、その**基本概念**、**プロセス**、**利点**を自分なりにまとめようと思いました。また、CSR(クライアントサイドレンダリング)との違いや具体的な実装方法についても触れ、Reactをより効果的に活用するための理解に繋げていこうと思います。

## **1. SSRの基本概念**  

サーバサイドレンダリング（SSR）とは、**サーバ側でページのHTMLを生成し、それをブラウザに送信する**手法です。  

従来の静的HTMLサイトはあらかじめ書かれたHTMLをそのまま表示するのに対し、SSRはデータベースなどの動的データを反映しながらサーバ側でHTMLを組み立てるため、動的なコンテンツも素早く表示可能です。  

例えば、ブログページやECサイトの商品一覧など、**動的なデータが含まれるページ**でよく使われます。  


## **2. SSRのプロセス**  

SSRが動作するプロセスは以下の通りです：  

1. **ユーザーがページをリクエスト**  
   - ブラウザからサーバにHTTPリクエストが送信されます。  

2. **サーバでHTMLを生成**  
   - サーバ側でReactやVue.jsが動作し、動的データをもとにHTMLを生成します。  

3. **生成されたHTMLを送信**  
   - 完成したHTMLがブラウザに送られます。  

4. **ブラウザがページを表示**  
   - ブラウザがHTMLを描画し、最初のコンテンツが表示されます。  

5. **ハイドレーション（Hydration）**  
     -事前にサーバ側で生成されたHTMLに対して、クライアント側のJavaScriptがイベントハンドラをアタッチしていく処理のことをハイドレーションと言います。これにより、ページがインタラクティブになり、ユーザーの操作に応答できるようになります。    

## **3. SSRの利点**  

### **① 高速な初期表示**  
サーバがあらかじめHTMLを生成してブラウザに送るため、**JavaScriptの読み込みを待たずにページが表示**されます。特に低速なネットワーク環境やデバイスではこの効果が大きいです。  

### **② SEO（検索エンジン最適化）の向上**  
検索エンジンはページのHTMLを読み取って内容を判断し、検索結果に反映します。SSRではサーバ側であらかじめ完成したHTMLを送るため、検索エンジンのクローラーがページの情報をすぐに読み取れるようになります。これにより、検索エンジンに正確な内容が伝わりやすくなり、SEOの効果が高まります。  

### **③ アクセシビリティの向上**  
JavaScriptが無効なブラウザやデバイスでもページが表示されるため、より多くのユーザーにコンテンツを届けられます。  


## **4. SSRとCSRの違い**  

### **クライアントサイドレンダリング（CSR）とは？**  
CSRはHTMLが最初は空で、JavaScriptがブラウザ上で実行されて動的にコンテンツを描画する手法です。  


### **比較表：SSRとCSRの違い**  

| **項目**                     | **SSR（サーバサイドレンダリング）** | **CSR（クライアントサイドレンダリング）** |
|--------------------------|-------------------------------|------------------------------------|
| **初期表示速度**         | 高速（HTMLがすぐ表示される）    | 遅延することがある                  |
| **SEO対策**              | 強い（HTMLがすぐクローラーに読まれる） | 弱い（JavaScript依存）              |
| **JavaScript依存**       | 少ない                        | 大きい                             |
| **実装の難易度**         | 複雑（サーバ側処理が必要）      | 比較的簡単                          |
| **動的な操作の柔軟性**   | クライアント側で補完が必要       | 高い（初期表示後に動的な操作が得意）|  

---

## **5. SSRの実装方法：Next.jsを使ったSSR**  

SSRを実装する際に最も簡単で効果的な方法は**Next.js**を使うことです。Next.jsはReactをベースにしたフレームワークで、SSRが簡単に導入できます。  

### **1. Next.jsのインストール**  
```bash
npx create-next-app@latest my-ssr-app --ts
cd my-ssr-app
npm run dev
```

### **2. `appディレクトリを使用したSSR**  
Next.js 13以降では、appディレクトリのルーティングが推奨されています。
SSRを実現するための手段もより簡単。
サーバコンポーネントを利用してデータを取得する方法を今回は紹介します。  

```TypeScript
// サーバ側でデータを取得するための関数
async function fetchPosts() {
  const res = await fetch('https://api.example.com/posts', { cache: 'no-store' });
  if (!res.ok) throw new Error('データの取得に失敗しました');
  return res.json();
}

// サーバコンポーネントでSSRを実現
export default async function Home() {
  const posts = await fetchPosts();

  return (
    <div>
      <h1>サーバサイドレンダリング</h1>
      <ul>
        {posts.map((post: { id: string; title: string }) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

```
#### fetchとcache: 'no-store'
SSRで最新データを取得するためにcache: 'no-store'を指定します。これにより、サーバリクエストが実行され、キャッシュを利用しません。
#### サーバコンポーネント
app/page.tsx自体がサーバコンポーネントとして動作し、サーバサイドでデータを処理してクライアントにHTMLを返します。

### **3. ハイドレーションの確認**  
`npm run dev`でローカルサーバを起動し、`http://localhost:3000`にアクセスします。  

- 最初にHTMLが表示される（SSR）  
- JavaScriptが読み込まれ、ページがインタラクティブになる（ハイドレーション）  


## **6. まとめ**  

サーバサイドレンダリング（SSR）は、初期表示速度の向上、SEO対策、アクセシビリティの改善という大きな利点があることの再確認ができました。一方で、クライアントサイドレンダリング（CSR）のような動的な操作の柔軟性も重要なことがわかり、プロジェクトの要件や目標に合わせて適切に使い分けることが必要ということもわかりました。  
なんとなくで使用していて気にしたことのない部分でしたが改めて理解できたので次からは適する方をに選択していきたいです。

## 採用拡大中！

アシストエンジニアリングでは一緒に働くフロントエンド、バックエンドのエンジニア仲間を大募集しています！
少しでも興味ある方は、カジュアル面談からでもぜひお気軽にお話ししましょう！
お問い合わせはこちらから↓
[https://official.assisteng.co.jp/contact/](https://official.assisteng.co.jp/contact/)