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

# Prerendering

> Erfahren Sie, wie HubSpot Inhalte vorrendert, um die Ladegeschwindigkeit von Seiten und die Sicherheit zu verbessern.

'Erfahren Sie, wie HubSpot Inhalte vorrendert, um die Ladegeschwindigkeit von Seiten und die Sicherheit zu verbessern.';

Um die Ladegeschwindigkeit und Sicherheit der Seiten zu verbessern, erstellt HubSpot nach Möglichkeit automatisch statische Versionen von Seiten, Blogbeiträgen und Wissensdatenbankartikeln. Anders ausgedrückt: Anstatt die Daten und das Layout der Seite zum Zeitpunkt des Ladens der Seite zusammenzustellen, rendert HubSpot die Seite im Voraus, damit sie direkt bereitgestellt werden kann. Kopien dieser vorgefertigten Seiten werden im [CDN](https://developers.hubspot.com/docs) von HubSpot weltweit gespeichert, sodass Besucher je nach Standort schneller auf die Seiten zugreifen können.

Allerdings kommen nicht alle Seiten für das Prerendering in Frage. Wenn eine Seite bestimmte HubL-Funktionen oder -Variablen enthält oder bestimmte Seitenfunktionen verwendet, wird ein Vorabrendern der Seite verhindert. Ebenso kann eine Seite in einigen Fällen teilweise vorgerendert werden, was viele der gleichen Performance- und Sicherheitsvorteile bietet wie ein vollständiges Prerendering.

Im Folgenden erfahren Sie mehr über den Prerendering-Prozess, wie Sie Probleme beim Prerendering beheben können und welche Funktionen sich auf das Prerendering auswirken.

## Prerendering-Prozess

Der Prerendering-Prozess wird automatisch ausgelöst, wenn die folgenden Aktionen ausgeführt werden:

* Veröffentlichen einer Bearbeitung in der Vorlage einer Seite
* Aktualisieren von freigegebenen Daten, z. B. einiger Website-Einstellungen
* Aktualisieren eines Moduls, das in einer Vorlage oder Seite enthalten ist

Während des Prerendering-Prozesses erstellt HubSpot eine statische Version der Seite, damit sie bereitgestellt werden kann, wenn ihre URL angefordert wird. Dadurch wird die Ladegeschwindigkeit der Seite verbessert, da bei jeder Anfrage weniger serverseitige Verarbeitung stattfindet. Im Hinblick auf die Sicherheit verringern statische Seiten das Risiko potenzieller Sicherheitsrisiken im Zusammenhang mit dynamischem Code und Datenbankabfragen.

In der Regel dauert der Prerendering-Prozess nur wenige Sekunden. Größere Änderungen, wie das Aktualisieren eines Moduls, das in vielen Vorlagen und Seiten enthalten ist, können mehrere Minuten dauern, bis das Rendern der Seite abgeschlossen ist.

CSS-, JavaScript- und Bilddateien werden in HubSpot immer statisch generiert, sodass sie praktisch immer vorgerendert werden.

<Alert type="info">
  HubL wird in CSS- und JavaScript-Dateien nur einmal ausgewertet, wenn das Element veröffentlicht wird.
</Alert>

## Überprüfen, ob eine Seite vorgerendert ist

Es gibt zwei Möglichkeiten, um zu überprüfen, ob eine Seite vorgerendert ist:

* `?hsDebugOnly=true`: Laden Sie die Seite mit einem `?hsDebugOnly=true`-Abfrageparameter. Dazu gehört auch die Angabe, ob die Seite vorgerendert werden kann. Wenn die Seite nicht vorgerendert werden kann, wird eine Liste der Probleme angezeigt, die das Prerendering verhindern, zusammen mit bestimmten Dateien und Zeilennummern der Vorlage. Wenn die Formatierung der Debug-Informationen schwer zu lesen ist, können Sie stattdessen den Parameter `?hsDebug=true` verwenden. Wenn Sie die Seite mit diesem Abfrageparameter überprüfen, werden die gleichen Debug-Informationen in einem formatierten HTML-Kommentar am unteren Rand der Seite angezeigt.

![Screenshot des HTML-Kommentars, der zeigt, dass die Seite vorgerendert werden kann](https://www.hubspot.de/hubfs/hsDebugTrue-prerender.png)

* `X-HS-Prerendered`: Suchen Sie nach dem `X-HS-Prerendered`-Header in den HTTP-Antwortheadern der Seitenanfrage. Dieser Header ist nur vorhanden, wenn die Seite vorgerendert ist, und er enthält den Wert des letzten Vorrenderns der Seite. Sie finden diese Informationen, indem Sie die Seite überprüfen, auf die Registerkarte „Netzwerk“ klicken und sich die Antwortheader für die Seitenanfrage ansehen.

![Registerkarte „Chrome-Netzwerk“ mit vorgerendertem Header](https://www.hubspot.de/hubfs/Knowledge_Base_2023-24-25/chrome-network-tab-prerendered-troubleshooting.png)

<Alert type="tip">
  Behandeln Sie das Rendering von dynamischem Content nach Möglichkeit clientseitig mit JavaScript. Sie können auch [serverlose Funktionen](https://developers.hubspot.com/docs) verwenden, um dynamische Daten abzurufen.
</Alert>

## Inkompatible Funktionen

Die folgenden HubL-Variablen, HubL-Funktionen und Content-Features verhindern, dass eine Seite vorgerendert wird. Diese Funktionen verhindern, dass jedem Benutzer dieselbe Antwort angezeigt wird, sodass eine statische, vorgerenderte Seite bereitgestellt wird. Seiten, die einige dieser Funktionen verwenden, können mit [partiellem Prerendering](#partial-prerendering) bereitgestellt werden.

### Inkompatible HubL-Variablen

* `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`

Beachten Sie bitte, dass die `request`-Variablen zwar nicht mit Prerendering kompatibel sind, aber im Allgemeinen über [JavaScript-Alternativen](#javascript-alternatives-to-incompatible-hubl) verfügen, über die Sie auf ähnliche Informationen zugreifen können.

### Inkompatible HubL-Funktionen

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

### Inkompatible Funktionalitäten

* Seiten, die [adaptive Tests](https://knowledge.hubspot.com/de/website-and-landing-pages/create-adaptive-tests-for-pages) verwenden
* Seiten, die [Smart-Content](https://knowledge.hubspot.com/de/website-and-landing-pages/create-and-manage-smart-content-rules) enthalten, werden über [partielles Prerendering](#partial-prerendering) unterstützt.

## Partielles Prerendering

Partielles Prerendering ermöglicht HubSpot das Bereitstellen teilweise vorgerenderter Seiten. Eine Seite kann zum Beispiel bis auf den Namen eines Kontakts, der auf der Seite angezeigt wird, vollständig statisch sein. Die Seite kann bis auf den Namen dieses Kontakts vorgerendert werden. Kurz bevor die Seite an den Benutzer zurückgegeben wird, führt HubSpot ein Rendering nur dieser dynamischen Werte durch.

Seiten, die partielles Prerendering verwenden, können nicht im CDN oder im Browser zwischengespeichert werden. Teilweise vorgerenderte Seiten lassen sich jedoch schneller bereitstellen als Seiten, die nicht teilweise vorgerendert werden können. Teilweise vorgerenderte Seiten bieten auch die Möglichkeit, im Falle eines Ausfalls oder eines Angriffs in einen nicht personalisierten Zustand zurückzufallen.

Während partielles Prerendering die Geschwindigkeit und Zuverlässigkeit Ihrer Website verbessern kann, hat das Entfernen der HubL-Funktionen, die dazu führen, dass Seiten nicht vorgerendert werden können, einen viel größeren positiven Effekt auf Ihre gesamte Seitenperformance.

### Auf partielles Prerendering prüfen

Um zu überprüfen, ob eine Seite teilweise vorgerendert werden kann, laden Sie die Seite mit einem `?hsPrcDebug=true`-Abfrageparameter, und es erfolgt eine zusätzliche Ausgabe über den vorgerenderten Inhalt für diese Seite. Wenn die Seite vorgerendert wird, ist der `X-HS-Prerendered`-Header vorhanden und enthält `partial` vor dem Zeitpunkt, zu dem die Seite teilweise vorgerendert wurde.

Nachfolgend finden Sie eine Liste der HubL-Variablen und -Filter, die aktuell mit partiellem Prerendering unterstützt werden. Seiten, die diese Variablen und Filter enthalten, werden teilweise vorgerendert, und alle Ausdrücke, die sie enthalten, werden zum Zeitpunkt der Bereitstellung ausgewertet.

### HubL-Variablen

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

### HubL-Filter

* `|random`
* `|shuffle`

## JavaScript-Alternativen zu inkompatiblen HubL-Variablen

Obwohl die verschiedenen `request`-HubL-Variablen nicht mit Prerendering kompatibel sind, gibt es für diese Variablen in der Regel JavaScript-Alternativen, über die Sie auf ähnliche Informationen zugreifen können.

Zum Beispiel können Sie anstelle der `request.cookies`-Variablen die [Cookie-Eigenschaft](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie) verwenden. Nachfolgend finden Sie ein Beispiel für die Verwendung von HubL im Vergleich zu JavaScript, um Inhalte dynamisch anzuzeigen, je nachdem, ob der Benutzer die Website schon einmal besucht hat oder nicht (basierend auf seinen Cookies).

<Tabs defaultSelected="0">
  <Tab tabId="0" title="HubL-Methode">
    ```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-Methode">
    ```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>

## Weiterführende Ressourcen

* [Optimieren der Websiteperformance von CMS Hub](/cms/best-practices/testing-staging-performance/speed)
* [JavaScript-Frameworks und -Bibliotheken in HubSpot verwenden](/cms/start-building/introduction/developer-environment/js-frameworks)