React サーバーサイド レンダリングでアプリの SEO とパフォーマンスを向上

React のサーバーサイド レンダリング (SSR)

サーバーサイド レンダリング (SSR) は、React アプリケーションがクライアントではなくサーバー上でレンダリングされる技術です。サーバーはアプリケーションの初期 HTML を生成してクライアントに送信し、そこで完全に機能する React アプリケーションに組み込むことができます。 SSR は、完全にレンダリングされたコンテンツをより速くユーザーに配信することで、パフォーマンスと検索エンジン最適化 (SEO) を向上させます。

---

SSRの仕組み

1. リクエスト: クライアントはサーバーにリクエストを送信します。
2. サーバー レンダリング: サーバーは React コンポーネントを HTML にレンダリングします。
3. レスポンス: レンダリングされた HTML がクライアントに送信されます。
4. ハイドレーション: React がクライアント側を引き継ぎ、イベント リスナーと状態をアタッチすることで HTML をインタラクティブにします。

---

サーバーサイドレンダリングの利点

1. SEO の改善

   • 検索エンジンは、事前にレンダリングされた HTML コンテンツを効果的にクロールできます。

2. 最初のペイントを高速化

   • HTML が事前レンダリングされて配信されるため、ブラウザーはコンテンツをより早く表示できます。

3. 遅いデバイスでのパフォーマンスの向上

   • サーバー上でレンダリングを処理することでクライアントのワークロードを軽減します。

---

Reactを使用したSSRの例

Next.js などのフレームワークを使用すると、SSR を効率的に実装できます。

コード例

// pages/index.js (Next.js)
export default function Home({ data }) {
  return (
    <div>
      <h1 id="Server-Side-Rendered-Page">Server-Side Rendered Page</h1>
      <p>Data from server: {data}</p>
    </div>
  );
}

// Fetching data during SSR
export async function getServerSideProps() {
  const data = "This data was fetched on the server!";
  return { props: { data } };
}

コードの主な機能

1. getServerSideProps

   • ページをレンダリングする前にサーバー上のデータを取得します。
   • 返された props は React コンポーネントに渡されます。

2. 水分補給

   • 最初の HTML が送信された後、React が引き継いでページをインタラクティブにします。

---

Next.js を使用しない SSR の実装

Express.js と ReactDOMServer を使用して SSR を実装することもできます。

コード例

// サーバー.js
「エクスプレス」からエクスプレスをインポートします。
「反応」から React をインポートします。
「react-dom/server」から ReactDOMServer をインポートします。
「./App」からアプリをインポートします。

const app = Express();

app.get("*", (req, res) => {
  const appHTML = ReactDOMServer.renderToString(<app></app>);
  const html = `
    
    
      <title>リアクト SSR</title>
      
        <div>



<h4>
  
  
  主な方法
</h4>

<ol>
<li>
<p><strong>ReactDOMServer.renderToString</strong> </p>

<ul>
<li>React コンポーネントをサーバーレンダリング用の HTML 文字列に変換します。
</li>
</ul>
</li>
<li>
<p><strong>エクスプレスサーバー</strong> </p>

<ul>
<li>受信リクエストを処理し、レンダリングされた HTML を提供します。
</li>
</ul>
</li>
</ol>


<hr>

<h3>
  
  
  比較: SSR と CSR (クライアント側レンダリング)
</h3>

<div>

<tr>
<th>
<table>
<thead>
<tr>
<th><strong>Aspect</strong></th>
<th><strong>SSR</strong></th>
<th><strong>CSR</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Rendering</strong></td>
<td>On the server</td>
<td>On the client</td>
</tr>
<tr>
<td><strong>Initial Load Time</strong></td>
<td>Faster (HTML delivered pre-rendered)</td>
<td>Slower (JS and data fetched before render)</td>
</tr>
<tr>
<td><strong>SEO</strong></td>
<td>Better (search engines see full content)</td>
<td>Poorer (content rendered dynamically)</td>
</tr>
<tr>
<td><strong>Interactivity</strong></td>
<td>Requires hydration</td>
<td>Fully interactive after initial load</td>
</tr>
</tbody>
</table>アスペクト</th>
<th>SSR</th>
<th>CSR</th>
</tr>


<tr>
<td>レンダリング</td>
<td>サーバー上</td>
<td>クライアント上</td>
</tr>
<tr>
<td>初期ロード時間</td>
<td>高速化 (HTML は事前にレンダリングされて配信)</td>
<td>遅い (レンダリング前に JS とデータがフェッチされる)</td>
</tr>
<tr>
<td>SEO</td>
<td>改善 (検索エンジンは完全なコンテンツを参照)</td>
<td>劣悪 (コンテンツが動的にレンダリングされる)</td>
</tr>
<tr>
<td>インタラクティブ性</td>
<td>水分補給が必要です</td>
<td>初期ロード後は完全にインタラクティブ</td>
</tr>

テーブル></div>


<hr>

<h3>
  
  
  SSR のベスト プラクティス
</h3>

<ol>
<li>
<p><strong>HTML をキャッシュ</strong> </p>

<ul>
<li>サーバーでレンダリングされたページをキャッシュして、応答時間を短縮します。
</li>
</ul>
</li>
<li>
<p><strong>サーバー負荷を最小限に抑える</strong> </p>

<ul>
<li>サーバーのボトルネックを防ぐために、レンダリング中の負荷の高い計算を避けてください。
</li>
</ul>
</li>
<li>
<p><strong>静的生成と組み合わせる</strong> </p>

<ul>
<li>Next.js などのフレームワークを使用して、SSR と静的サイト生成 (SSG) を組み合わせます。
</li>
</ul>
</li>
<li>
<p><strong>エッジケースの処理</strong> </p>

<ul>
<li>JavaScript が失敗する、または読み込みが遅い可能性があるシナリオをテストします。
</li>
</ul>
</li>
</ol>


<hr>

<h3>
  
  
  SSRの使用例
</h3>

<ol>
<li>
<strong>SEO 中心のアプリケーション</strong>: ブログ、ニュース サイト、または電子商取引プラットフォーム。
</li>
<li>
<strong>動的コンテンツ</strong>: 頻繁に更新されるパーソナライズされたダッシュボードまたはアプリケーション。
</li>
<li>
<strong>パフォーマンスが重要なアプリ</strong>: 低速のデバイスでも高速なコンテンツ配信を保証します。
</li>
</ol>


<hr>

<h3>
  
  
  SSRでの挑戦
</h3>

<ol>
<li>
<p><strong>サーバー負荷の増加</strong> </p>

<ul>
<li>サーバーはリクエストごとにレンダリングを処理する必要があるため、リソースの使用量が増加します。
</li>
</ul>
</li>
<li>
<p><strong>開発時間が長くなる</strong> </p>

<ul>
<li>サーバー側のコードとハイドレーションを慎重に処理する必要があります。
</li>
</ul>
</li>
<li>
<p><strong>状態管理の複雑さ</strong> </p>

<ul>
<li>サーバーでレンダリングされた状態とクライアント側の React 状態を同期させるのは難しい場合があります。
</li>
</ul>
</li>
</ol>


<hr>

<h3>
  
  
  結論
</h3>

<p>サーバーサイド レンダリング (SSR) は、React アプリケーションのパフォーマンス、SEO、ユーザー エクスペリエンスを向上させる強力な技術です。 Next.js などのツールや ReactDOMServer を使用したカスタム ソリューションを使用すると、開発者は SSR を活用して応答性の高い、検索エンジンに適したアプリケーションを構築できます。  </p>


<hr>


          </div>

            
        

以上がReact サーバーサイド レンダリングでアプリの SEO とパフォーマンスを向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。