SSR (Server-Side-Rendering) | FastComments Docs

Was ist SSR?

SSR, oder Server-Side-Rendering, ist ein Mechanismus und ein Satz von Konventionen, bei denen eine Anwendung oder Inhalte mit minimaler Arbeit seitens des Clients gerendert werden.

Mit SSR führt der Client kein JavaScript aus. Stattdessen rendert der Client HTML/CSS, das vom Server "gerendert" wurde.

Vorteile von SSR

Ein großer Vorteil von SSR ist, dass JavaScript nicht erforderlich ist. Dadurch können Anwendungen sich in vielen Anwendungsfällen "leichter" anfühlen.

Außerdem kann SSR als Fallback verwendet werden, falls der Benutzer JavaScript deaktiviert hat. Auf diese Weise können Kommentarstränge weiterhin gerendert werden, und der Benutzer kann weiterhin auf Kommentare antworten.

FastComments ist bereits gut optimiert, sodass SSR in den meisten Fällen nicht erforderlich ist. Allerdings haben einige Online-Communities Nutzer, die kein JavaScript verwenden, oder das Deaktivieren davon ist die bevorzugte Praxis. Hier kann FastComments SSR nützlich sein.

Ein wesentlicher Nachteil von SSR ist jedoch, dass die Seite bei kleinen Zustandsänderungen neu geladen werden muss.

Von FastComments SSR unterstützte Funktionen

FastComments unterstützt die folgenden Funktionen mit SSR:

Anpassbares Kommentar-Widget.
Anonymes Kommentieren.
Kommentieren, während man angemeldet ist.
SSO.
Root- und verschachtelte Antworten.
Anzeigen & Paginieren von Kommentar-Threads.
Abstimmungen, einschließlich anonymer Abstimmungen.
Ändern der Standard-Sortierreihenfolge.

Ein Beispiel

Ein Beispiel für FastComments SSR ist hier.

FastComments SSR

Anwendungsfälle

Beispiele für Anwendungsfälle von SSR sind:

Eine Fallback-Lösung für den Fall, dass JavaScript deaktiviert ist.
Um eine Kommentaroberfläche in einer Umgebung darzustellen, in der JavaScript nicht verfügbar oder nicht erwünscht ist.
Für Websites oder Online-Communities, in denen die Einbindung von zusätzlichem JavaScript nicht erwünscht ist.

Wo FastComments SSR einsetzt

FastComments verwendet SSR an folgenden Stellen:

Unser WordPress-Plugin verwendet SSR standardmäßig als Fallback. Wenn JavaScript deaktiviert ist, können Benutzer weiterhin in Ihrem Blog kommentieren.
Wir verwenden es als Fallback auf unserem eigenen Blog! https://blog.fastcomments.com

SSR verwenden

Um FastComments SSR zu verwenden, kann der Client HTML vom Endpunkt https://fastcomments.com/ssr/comments abrufen.

Dies kann auf verschiedene Weise erfolgen.

Mit WordPress

SSR ist standardmäßig als Fallback im WordPress-Plugin für Benutzer bei deaktiviertem JS seit Version 3.10.2 aktiviert.

In einer Webseite

Bei einer bereits bestehenden Anwendung kann SSR mit dem folgenden Beispiel hinzugefügt werden, vorausgesetzt, die verwendete Sprache ist PHP:

PHP-basiertes SSR-Beispiel

Copy

<?php
$tenantId = rawurlencode("my-tenant-id");
$urlId = rawurlencode("my-page-url-article-id");
$url = rawurlencode("my-page-url");
$fastcomments_url = "https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url";
?>
<iframe
    src="<?php echo $fastcomments_url; ?>"
    horizontalscrolling="no"
    allowtransparency="true"
    frameborder="0"
    title="FastComments"
    width="100%"
    height="1500px"
    style= "width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
></iframe>

Wir können die SSR-Benutzeroberfläche auch nur anzeigen, wenn der Benutzer JS deaktiviert hat:

PHP-basiertes SSR-Fallback-Beispiel

Copy

<?php
$tenantId = rawurlencode("my-tenant-id");
$urlId = rawurlencode("my-page-url-article-id");
$url = rawurlencode("my-page-url");
$fastcomments_url = "https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url";
?>
<noscript>
    <iframe
        src="<?php echo $fastcomments_url; ?>"
        horizontalscrolling="no"
        allowtransparency="true"
        frameborder="0"
        title="FastComments"
        width="100%"
        height="1500px"
        style= "width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
    ></iframe>
</noscript>

Für ein Beispiel mit SSO, siehe hier.

Mit vorgerendertem Inhalt

Unser Blog wird zur Build-Zeit generiert und bietet ein gutes Beispiel für SSR mit Handlebars.

Die grundlegenden Parameter

Die grundlegenden Parameter, die Sie übergeben müssen, sind:

tenantId - Dies identifiziert Sie als Kunden.
urlId - Dies identifiziert die Seite oder den Artikel, für den Kommentare geladen werden sollen, und legt fest, wo sie gespeichert werden.
url - Dies wird für Benachrichtigungen und verwandte Funktionen verwendet, um auf den Kommentar-Thread zurückzuverlinken.

Benutzerdefiniertes Styling

Die SSR-Version des Kommentar-Widgets verwendet die gleiche Struktur und Rendering-Engine wie die JavaScript-Version.

Dementsprechend funktioniert sämtliches benutzerdefiniertes Styling, das für das JavaScript-Kommentar-Widget funktioniert, auch für SSR.

Hinweise

Bei SSR gibt es kein JavaScript, das die Höhe des gerenderten Containers steuert. In Browsern kann bei langen Diskussionen eine vertikale Bildlaufleiste angezeigt werden.

Passen Sie dies entsprechend an.

Hintergrund

Verwendung von SSR

Was ist SSR?

Vorteile von SSR