> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# プリレンダリング

> HubSpotでは、コンテンツのプリレンダリングによりページの読み込み速度とセキュリティーが向上します。その仕組みについて説明します。

'HubSpotでは、コンテンツのプリレンダリングによりページの読み込み速度とセキュリティーが向上します。その仕組みについて説明します。';

ページの読み込み速度と安全性を向上させるために、HubSpotでは可能な限りページ、ブログ記事、ナレッジベース記事の静的バージョンが自動的に作成されます。つまり、HubSpotはページの読み込み時にデータやレイアウトを組み立てるのではなく、あらかじめページをレンダリングしておくことで、すぐに配信できる状態にします。プリレンダリング（事前レンダリング）されたページのコピーは世界中のHubSpotの[CDN](https://developers.hubspot.com/docs)に保存されるので、訪問者は現在地に応じて素早くページにアクセスできます。

ただし、全てのページがプリレンダリングの対象とはなりません。ページに特定のHubL関数や変数が含まれる場合や、特定のページ機能を使用する場合、ページはプリレンダリングされません。同様に、場合によっては、ページをパーシャルプリレンダリングすることもできます。この場合、フルプリレンダリングと同様のパフォーマンスやセキュリティー上のメリットを多く享受できます。

以下で、プリレンダリングのプロセス、トラブルシューティング、およびプリレンダリングに影響する機能の詳細について説明します。

## プリレンダリングのプロセス

次のアクションを実行すると、プリレンダリングのプロセスが自動的にトリガーされます。

* ページのテンプレートに編集を公開する
* 一部のウェブサイト設定など、共有データを更新する
* テンプレートまたはページに含まれるモジュールを更新する

プリレンダリングのプロセス中、HubSpotはページの静的バージョンを作成し、URLがリクエストされたときにすぐに配信できるようにします。これにより、各リクエスト時のサーバー側の処理が減り、ページの読み込み速度が向上します。セキュリティー面では、静的ページを使用することで、動的コードやデータベースクエリーに伴う潜在的な脆弱性のリスクを軽減できます。

通常、プリレンダリング処理は数秒で完了します。多くのテンプレートやページに含まれるモジュールの更新など、大規模な変更を行うと、ページのレンダリングが完了するまでに数分かかることがあります。

CSS、JavaScript、画像ファイルはHubSpot上で常に静的に生成されるので、実質的には常にプリレンダリングされます。

<Alert type="info">
  CSSとJavaScriptファイルのHubLは、アセットの公開時に一度だけ評価されます。
</Alert>

## ページがプリレンダリングされているかどうかを確認する

ページがプリレンダリングされているかどうかを確認する方法は2つあります。

* `?hsDebugOnly=true`：`?hsDebugOnly=true`クエリーパラメータを指定してページを読み込みます。この場合、ページがプリレンダリング可能かどうかも示されます。プリレンダリングできない場合には、プリレンダリングを妨げている問題のリストが、特定のファイルおよびテンプレートの行番号と共に表示されます。デバッグ情報の形式が読みにくい場合は、代わりに`?hsDebug=true`パラメーターを使用できます。このクエリーパラメーターを使用してページを調べると、同じデバッグ情報が、ページ下部に整形されたHTMLコメントとして表示されます。

![ページがプリレンダリング可能なことを示すHTMLコメントのスクリーンショット](https://www.hubspot.jp/hubfs/hsDebugTrue-prerender.png)

* `X-HS-Prerendered`：ページリクエストのHTTPレスポンスヘッダーで`X-HS-Prerendered`ヘッダーを探します。このヘッダーは、ページがプリレンダリングされている場合にのみ存在し、最後にページがプリレンダリングされたときの値が含まれます。この情報を見つけるには、ページを確認し、［Network］タブをクリックして、ページリクエストのレスポンスヘッダーを確認します。

![プリレンダリング済みのヘッダーを示すChromeの［Network］タブ](https://www.hubspot.jp/hubfs/Knowledge_Base_2023-24-25/chrome-network-tab-prerendered-troubleshooting.png)

<Alert type="tip">
  可能な限り、動的コンテンツのレンダリングはクライアント側でJavaScriptを使用して処理します。動的データの取り込みには、[サーバーレス関数](https://developers.hubspot.com/docs)も使用できます。
</Alert>

## 互換性のない機能

次のHubL変数、HubL関数、コンテンツ機能は、ページのプリレンダリングを防ぎます。これらの機能により、全てのユーザーに対して同一のレスポンスを提供できません。このため、静的にプリレンダリングされたページが提供されなくなります。これらの機能を使用しているページを提供する際には、[パーシャルプリレンダリング](#partial-prerendering)が使用される場合があります。

### 互換性のないHubL変数

* `account`
* `company`
* `contact`
* `local_dt`
* `owner`
* `request_contact`
* `request.cookies`
* `request.full_url`
* `request.headers`
* `request.path_and_query`
* `request.query`
* `request.query_dict`
* `request.referrer`
* `request.remote_ip`

`request`変数はプリレンダリングと互換性がありませんが、通常は[JavaScriptによる代替手段](#javascript-alternatives-to-incompatible-hubl)があり、同様の情報にアクセスできます。

### 互換性のないHubL関数

* `personalization_token()`
* `today()`

### 互換性のない機能

* [適応型テスト](https://knowledge.hubspot.com/ja/website-and-landing-pages/create-adaptive-tests-for-pages)を使用しているページ
* [スマートコンテンツ](https://knowledge.hubspot.com/ja/website-and-landing-pages/create-and-manage-smart-content-rules)を含むページは、[パーシャルプリレンダリング](#partial-prerendering)によってサポートされます。

## パーシャルプリレンダリング

パーシャルプリレンダリングでは、部分的にプリレンダリングされたページを提供できます。例えば、ページに表示されるコンタクトの名前を除いて、ほぼ全体が静的なページがあるとします。このページの場合、コンタクト名以外の部分をプリレンダリングできます。ページをユーザーに返す直前に、このような動的な値のみのレンダリングがHubSpotによって実行されます。

パーシャルプリレンダリングを使用しているページは、CDNまたはブラウザーでキャッシュできません。ただし、部分的にプリレンダリングされたページは、部分的にプリレンダリングできないページよりも迅速な配信が可能です。パーシャルプリレンダリングされたページは、停止や攻撃が発生した際にはパーソナライズなしの状態で提供することもできまです。

パーシャルプリレンダリングもサイトの速度と信頼性の向上に役立つ場合がありますが、ページのプリレンダリングの妨げになっているHubL機能を削除する方が、ページ全体のパフォーマンスが大きく向上します。

### パーシャルプリレンダリングについて確認する

ページのパーシャルプリレンダリングが可能かどうかを確認するには、`?hsPrcDebug=true`クエリーパラメーターを指定してページを読み込みます。すると、ページのプリレンダリングされたコンテンツに関する出力が追加されます。ページがプリレンダリングされている場合、`X-HS-Prerendered`ヘッダーが存在し、ページがパーシャルプリレンダリングされた時刻の前に`partial`が示されます。

パーシャルプリレンダリングで現在サポートされているHubL変数とフィルターを以下に示します。これらの変数とフィルターを含むページは部分的にプリレンダリングされ、これらを含む式は配信時に評価されます。

### HubL変数

* `account`
* `company`
* `contact`
* `local_dt`
* `owner`
* `query`
* `request`
* `request_contact`
* `year`

### HubLフィルター

* `|random`
* `|shuffle`

## 互換性のないHubLのJavaScriptによる代替手段

さまざまな`request`HubL変数はプリレンダリングと互換性がありませんが、通常はJavaScriptによる代替手段があり、同様の情報にアクセスできます。

例えば、`request.cookies`変数の代わりに[Cookie プロパティー](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)を使用できます。以下に、（Cookieに基づく）ユーザーのサイト訪問経験に応じてコンテンツを動的に表示する、HubLとJavaScriptの使用例を示します。

<Tabs defaultSelected="0">
  <Tab tabId="0" title="HubLメソッド">
    ```html theme={null}
    {% set hubspot_utk = request.cookies.hubspotutk %} {% if hubspot_utk %}
    <div class="returning-visitor">
      <h2>Welcome back!</h2>
      <p>Thanks for returning. Here's what's new since your last visit:</p>
      <ul class="updates-list">
        <li>New product features launched</li>
        <li>Updated pricing plans</li>
      </ul>
    </div>
    {% else %}
    <div class="new-visitor">
      <h2>Welcome to our site!</h2>
      <p>New here? Check out our Get Started guide:</p>
      <a href="" class="btn btn-primary">Get Started</a>
    </div>
    {% endif %}
    ```
  </Tab>

  <Tab tabId="1" title="JSメソッド">
    ```html theme={null}
        <div id="visitor-welcome">
        <div id="new-visitor-content">
        <h2>Welcome to our site!</h2>
        <p>New here? Start with our Get Started guide:</p>
        <a href="" class="btn btn-primary">Get Started</a>
      </div>

      <div id="returning-visitor-content" style="display: none;">
        <h2>Welcome back!</h2>
        <p>Thanks for returning. Here's what's new since your last visit:</p>
        <ul class="updates-list">
          <li>New product features launched</li>
          <li>Updated pricing plans</li>
        </ul>
      </div>
    </div>

    <script>
      function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) {
          return parts.pop().split(';').shift();
        }
        return null;
      }

      function personalizeForVisitor() {
        const hubspotUtk = getCookie('hubspotutk');
        const newVisitorContent = document.getElementById('new-visitor-content');
        const returningVisitorContent = document.getElementById('returning-visitor-content');

        if (hubspotUtk) {
          // Returning visitor
          newVisitorContent.style.display = 'none';
          returningVisitorContent.style.display = 'block';
        }
        // New visitor content is already visible by default
      }

      // Run immediately to minimize content flash
      personalizeForVisitor();
    </script>
    ```
  </Tab>
</Tabs>

## 関連コンテンツ

* [CMS Hubで構築したウェブサイトのパフォーマンス最適化](/cms/best-practices/testing-staging-performance/speed)
* [HubSpotでのJavaScriptフレームワークとライブラリーの使用](/cms/start-building/introduction/developer-environment/js-frameworks)