サーバーサイドレンダリングのガイド-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

サーバーサイドレンダリングのガイド

Mary-Kate Olsen

Nov 25, 2024 am 06:28 AM

サーバーサイドレンダリング (SSR) はしばらく前から存在していますが、さらに検討する価値があります。このテクニックを使用すると、Web アプリを高速化し、SEO に適したものにすることができます。

このガイドでは、SSR について説明し、SSR を使用する理由、髪を抜かずに SSR を実装する方法について説明します。基本を説明し、クライアント側のレンダリングと比較し、いくつかの実用的な例について説明します。

サーバーサイドレンダリングとは何ですか?

基本的に、SSR はブラウザではなくサーバー上で Web ページをレンダリングすることを目的としています。ユーザーがページをリクエストすると、サーバーは面倒な作業をすべて実行し、完全にレンダリングされたページをクライアントに送信します。その後、クライアント側の JavaScript が引き継いで対話型になります。

サーバーはキッチンで準備作業を行っており、ブラウザは盛り付けて提供するだけです。

これは最小限の Express.js の例です:

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div>



<h2>
  
  
  From server to browser with fully rendered pages
</h2>

<p>When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:</p>

<h3>
  
  
  What is a fully rendered page?
</h3>

<p>A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:</p>

<ol>
<li>The complete DOM structure</li>
<li>All text content</li>
<li>Image placeholders and other media elements</li>
<li>Initial styles</li>
</ol>

<p>Here's a basic example:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
  <head>
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2>Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  </body>
</html>

ログイン後にコピー

CSRとの違い

対照的に、クライアント側でレンダリングされた (CSR) 初期 HTML は次のようになります:

<!DOCTYPE html>
<html>
  <head>
    <title>My CSR Page</title>
  </head>
  <body>
    <div>



<p>The CSR page relies entirely on JavaScript to populate the content.</p>

<h3>
  
  
  Benefits of fully rendered HTML
</h3>

<ol>
<li>
<strong>Faster Initial Paint</strong>: The browser can start rendering content immediately.</li>
<li>
<strong>Better SEO</strong>: Search engines read all your content without executing JavaScript.</li>
<li>
<strong>Improved Accessibility</strong>: Screen readers and other assistive technologies can access content immediately.</li>
<li>
<strong>Resilience</strong>: Basic content is available even if JavaScript fails to load.</li>
</ol>

<h3>
  
  
  The hydration process
</h3>

<p>After sending the fully rendered HTML, SSR applications typically go through a process called hydration:</p>

<ol>
<li>The server sends the fully rendered HTML.</li>
<li>The browser displays this HTML immediately.</li>
<li>JavaScript loads and <em>hydrates</em> the page, adding interactivity.</li>
</ol>



<pre class="brush:php;toolbar:false">// Simplified React hydration example
import { hydrateRoot } from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
hydrateRoot(domNode, <App />);

ログイン後にコピー

このプロセスにより、最新の Web アプリの豊富な対話性を提供しながら、高速な初期読み込みが可能になります。

SSR はこれらの完全にレンダリングされたページを提供しますが、トレードオフがないわけではないことに注意してください。サーバーはより多くの作業を実行するため、サーバーとクライアントの間で状態を注意深く処理する必要があります。ただし、多くのアプリケーションにとって、完全にレンダリングされたページの利点により、SSR が魅力的な選択肢となります。

CSRとSSRの違いは何ですか？

クライアントサイドレンダリング (CSR) とサーバーサイドレンダリング (SSR) は、Web ページをレンダリングする 2 つの異なるアプローチです。それらの主な違いの内訳は次のとおりです:

クライアントサイドレンダリング (CSR)

サーバーは、JavaScript バンドルを含む最小限の HTML ファイルを送信します。
ブラウザは JavaScript をダウンロードして実行します。
JavaScript はページのコンテンツを作成し、インタラクティブにします。

長所:

初期ロード後のスムーズなインタラクション
必要なサーバーリソースが少なくなります

短所:

最初のページの読み込みが遅い
SEO の潜在的な課題

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

サーバーは完全な HTML コンテンツを作成します。
ブラウザは、事前にレンダリングされた HTML をすぐに受信して表示します。
JavaScript がロードされて、ページが完全にインタラクティブになります。

長所:

初期ページ読み込みの高速化
SEO に優れています
遅いデバイスでもうまく動作します

短所:

設定がより複雑になる場合があります
より多くのサーバーリソースを使用する可能性があります

簡単な視覚的な比較は次のとおりです:

A Guide to Server-Side Rendering

本質的に、CSR はブラウザーでより多くの機能を果たしますが、SSR はサーバーでより多くのことを行います。どちらを選択するかは、初期読み込み時間、SEO 要件、サーバーリソースなどの要素のバランスをとりながら、プロジェクトの特定のニーズに応じて決まります。

SSR と検索エンジン: HTTP での一致

サーバー側のレンダリングは、検索エンジンがサイトをどのように認識するかに大きな影響を与える可能性があります。細かく見てみましょう:

インデックス作成の高速化

検索エンジンのボットはせっかちです。彼らはあなたのコンテンツを今すぐ見たいのです。 SSR を使用すると、ボットがノックしてきたときにページを開く準備ができています。JavaScript のロードとレンダリングを待つ必要はありません。

A Guide to Server-Side Rendering

コンテンツの一貫性

SSR は、ユーザーと同じコンテンツが検索エンジンに表示されるようにします。クライアント側レンダリングでは、ボットが動的に読み込まれたコンテンツを見逃すリスクが常にあります。

ロード時間の改善

検索エンジンは高速なサイトを好みます。 SSR は初期ロード時間を大幅に短縮できるため、ランキングでわずかに有利になる可能性があります。

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div>



<h2>
  
  
  From server to browser with fully rendered pages
</h2>

<p>When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:</p>

<h3>
  
  
  What is a fully rendered page?
</h3>

<p>A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:</p>

<ol>
<li>The complete DOM structure</li>
<li>All text content</li>
<li>Image placeholders and other media elements</li>
<li>Initial styles</li>
</ol>

<p>Here's a basic example:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
  <head>
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2>Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  </body>
</html>

ログイン後にコピー

モバイルファーストインデックス作成

Google のモバイルファーストインデックスにより、低速モバイル接続における SSR のパフォーマンス上の利点がさらに重要になります。

ソーシャルメディアプレビュー

厳密には検索エンジンの機能ではありませんが、SSR を使用すると、コンテンツがソーシャルプラットフォームで共有されるときに正確なプレビューを簡単に生成できます。これにより、エンゲージメントとバックリンクが増加し、SEO が間接的に向上します。

<!DOCTYPE html>
<html>
  <head>
    <title>My CSR Page</title>
  </head>
  <body>
    <div>



<p>The CSR page relies entirely on JavaScript to populate the content.</p>

<h3>
  
  
  Benefits of fully rendered HTML
</h3>

<ol>
<li>
<strong>Faster Initial Paint</strong>: The browser can start rendering content immediately.</li>
<li>
<strong>Better SEO</strong>: Search engines read all your content without executing JavaScript.</li>
<li>
<strong>Improved Accessibility</strong>: Screen readers and other assistive technologies can access content immediately.</li>
<li>
<strong>Resilience</strong>: Basic content is available even if JavaScript fails to load.</li>
</ol>

<h3>
  
  
  The hydration process
</h3>

<p>After sending the fully rendered HTML, SSR applications typically go through a process called hydration:</p>

<ol>
<li>The server sends the fully rendered HTML.</li>
<li>The browser displays this HTML immediately.</li>
<li>JavaScript loads and <em>hydrates</em> the page, adding interactivity.</li>
</ol>



<pre class="brush:php;toolbar:false">// Simplified React hydration example
import { hydrateRoot } from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
hydrateRoot(domNode, <App />);

ログイン後にコピー

SSR は SEO の強力なツールですが、それだけが要素ではありません。コンテンツの品質、関連性、全体的なユーザーエクスペリエンスは、検索エンジンのランキングにおいて非常に重要です。 SSR は、検索エンジンがコンテンツを効率的にクロールしてインデックスを作成できるようにするだけで、可視性とパフォーマンス指標において優位性をもたらす可能性があります。

実際にSSRを行う方法

SSR の実装は複雑である必要はありません。 SSR を簡単にする人気のある React フレームワークである Next.js を使用してこれを行う方法を説明しましょう:

Next.js プロジェクトをセットアップします。
サーバー側でレンダリングされたページを作成します。
Next.js に、完全にレンダリングされた HTML とクライアント側のハイドレーションの提供を処理させます。

App Router を使用した簡単な Next.js の例を次に示します。

// Pseudo-code for search engine ranking
function calculateRanking(site) {
  let score = site.relevance;
  if (site.loadTime < FAST_THRESHOLD) {
    score += SPEED_BONUS;
  }
  return score;
}

ログイン後にコピー

この例では:

ホームコンポーネントは非同期関数であり、サーバー側でのデータ取得が可能です。
getData() は必要なデータを取得します。
コンポーネントはデータを直接レンダリングします。

Next.js は SSR プロセスを自動的に処理します:

リクエストが受信されると、Next.js はサーバー上でこのコンポーネントを実行します。
データがフェッチされるまで待機します。
フェッチしたデータを使用してコンポーネントをレンダリングします。
完全にレンダリングされた HTML がクライアントに送信されます。
JavaScript がブラウザに読み込まれると、ページはインタラクティブになります。

このアプローチでは、サーバーを手動で設定したり、レンダリングプロセスを自分で管理したりする必要がなく、SSR の利点が得られます。

ワンランク上のSSRソリューション

車輪の再発明をしたくない場合は、SSR の複雑さを処理するフレームワークがいくつかあります。以下は、さまざまなエコシステムにわたる一般的なオプションの概要です:

A Guide to Server-Side Rendering

反応する

Next.js: SSR サポートが組み込まれた最も人気のある React フレームワーク。
Remix: React Router を活用するフルスタック Web フレームワーク。
Gatsby: 主に静的サイトジェネレーターですが、SSR もサポートしています。

ヴュー

Nuxt.js: SSR 機能を備えた Vue アプリケーションの頼りになるフレームワーク。

角度のある

Angular Universal: Angular アプリケーション用の公式 SSR ソリューション。

スレンダー

SvelteKit: SSR をサポートする Svelte の公式アプリケーションフレームワーク。

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

Astro: 複数のフレームワークを使用でき、SSR をサポートします。
Qwik: SSR サポートが組み込まれ、最適なパフォーマンスを実現するように設計された新しいフレームワーク。

PHP

Laravel: Inertia.js または独自の Livewire コンポーネントを通じて SSR 機能を提供します。

ルビー

Ruby on Rails: Stimulus Reflex や Hotwire などのツールを通じて SSR をサポートします。

パイソン

Django: Django-Unicorn や HTMX などのライブラリを使用して SSR を実装できます。
Flask: SSR 用に構成でき、Flask-SSE などの拡張機能でよく使用されます。

これらの各フレームワークは、SSR に対する独自のアプローチを提供し、多くの場合、静的サイト生成、API ルートなどの追加機能を備えています。選択は、好みの言語、エコシステム、特定のプロジェクト要件によって異なります。

デプロイメントとキャッシュ

SSR アプリをデプロイする場合:

クライアント側とサーバー側の両方のバンドルを構築します。
SSR サーバーをバックグラウンドプロセスとして実行します。
PM2 やスーパーバイザーなどのプロセスモニターを使用して、サーバーの稼働を維持します。

基本的な導入フローは次のとおりです:

A Guide to Server-Side Rendering

キャッシュを忘れないでください!サーバーでレンダリングされたページをキャッシュすると、サーバーの負荷が大幅に軽減されます。

Builder.ioでのSSR

Builder.io は、すべてのコンポーネントとフレームワークにわたってサーバーサイドレンダリング (SSR) と静的サイト生成 (SSG) のサポートを提供します。このすぐに使える機能により、追加のセットアップを行わずに SSR と SSG の利点を活用できます。

A Guide to Server-Side Rendering

主な特徴

フレームワークに依存しない: Builder.io は、SSR および SSG をサポートするさまざまなフレームワークで動作します。
自動最適化: Builder は、コード分割やオフスクリーンコンポーネントの遅延読み込みなど、コンテンツのパフォーマンスを最適化します。
動的レンダリング: SEO の利点を維持しながら、ユーザー属性または A/B テストに基づいてさまざまなコンテンツをレンダリングできます。
簡単な統合: Builder は、既存のプロジェクトをシームレスに統合するための SDK とドキュメントを提供します。

実装例

これは、Builder と Next.js を使用してサーバー側でコンテンツを取得してレンダリングする方法の基本的な例です。

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <body>
        <div>



<h2>
  
  
  From server to browser with fully rendered pages
</h2>

<p>When we talk about SSR delivering "fully rendered pages," it's important to understand what that actually means. Let's break it down:</p>

<h3>
  
  
  What is a fully rendered page?
</h3>

<p>A fully rendered page is an HTML document containing all the content users would get when they first load the page. This includes:</p>

<ol>
<li>The complete DOM structure</li>
<li>All text content</li>
<li>Image placeholders and other media elements</li>
<li>Initial styles</li>
</ol>

<p>Here's a basic example:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
  <head>
    <title>My SSR Page</title>
    <style>
      /* Initial styles */
    </style>
  </head>
  <body>
    <header>
      <h1>Welcome to My Site</h1>
      <nav><!-- Fully populated navigation --></nav>
    </header>
    <main>
      <article>
        <h2>Article Title</h2>
        <p>This is the full content of the article...</p>
      </article>
    </main>
    <footer><!-- Fully populated footer --></footer>
    <script src="hydration.js"></script>
  </body>
</html>

ログイン後にコピー

ベストプラクティス

SSR または SSG をサポートするフレームワークを使用していることを確認してください。
ビルダーページまたはセクションを統合する場合は、サーバー側でデータを取得するためのフレームワークのガイドラインに従ってください。
サーバー側データの処理の詳細については、getAsyncProps README を参照してください。

Builder for SSR を活用すると、使いやすいビジュアル編集エクスペリエンスを維持しながら、ヘッドレス CMS の柔軟性とサーバーサイドレンダリングのパフォーマンス上の利点を組み合わせることができます。

まとめ

サーバーサイドレンダリング (SSR) は、アプリケーションのパフォーマンス、SEO、ユーザーエクスペリエンスを大幅に向上できる Web 開発における強力なアプローチです。この記事では、SSR とは何か、クライアント側レンダリングとの違い、検索エンジンへの影響、Next.js などの一般的なフレームワークを使用した実際的な実装戦略について検討してきました。

また、完全にレンダリングされたページの概念について説明し、さまざまなエコシステムにわたるさまざまな SSR ソリューションを検討しました。 SSR には多くの利点がありますが、実装するかどうかを決定する際には、プロジェクト固有のニーズを考慮することが重要です。