FastComments.com

Menu Icon

Background

What is SSR?
Benefits of SSR
FastComments SSR Supported Features

Using SSR

Use Cases
Where FastComments Uses SSR
Using SSR

What is SSR? Internal Link

SSR, or Server-Side-Rendering, is a mechanism and set of conventions where an application or content is rendered with minimal work from the client.

With SSR, the client does not execute JavaScript. Instead, the client renders HTML/CSS which was "rendered" by the server.

Benefits of SSR Internal Link

A major benefit of SSR is that JavaScript is not required. Because of this, applications can be built to feel "lighter" in many use cases.

Additionally, SSR can be used as a fallback in the event that the user has JavaScript disabled. This way comment threads can still render, and the user can still reply to comments.

FastComments is already well optimized, so in most cases SSR is not required. However, some online communities have users which do not use JavaScript, or disabling it is the preferred practice. This is where FastComments SSR can be useful.

However, a major trade-off of SSR is having to reload the page for small state changes.

FastComments SSR Supported Features Internal Link

FastComments supports the following features with SSR:

  • Customizable commenting widget.
  • Anonymous commenting.
  • Commenting while logged in.
  • SSO.
  • Root and nested replies.
  • Viewing & paginating comment threads.
  • Voting, including anonymous voting.
  • Changing the default sort direction.

An Example

An example of FastComments SSR is available here.

FastComments SSR
External Link

Use Cases Internal Link

Example use cases of SSR are as follows:

  • A fallback for when JavaScript is disabled.
  • To render a comment interface in an environment where JavaScript is not available or desired.
  • For sites or online communities where the inclusion of more JavaScript is not desired.

Where FastComments Uses SSR Internal Link

FastComments uses SSR in the following places:

  • Our WordPress plugin uses SSR as a fallback by default. If JavaScript is disabled, users can still comment on your blog.
  • We use it as a fallback on our own Blog! https://blog.fastcomments.com

Using SSR Internal Link

To use FastComments SSR, the client may fetch HTML from the https://fastcomments.com/ssr/comments endpoint.

This can be done a number of ways.

With WordPress

SSR is enabled by default for users without JS enabled as a fallback in the WordPress plugin since version 3.10.2.

In a Webpage

With an already existing application, SSR can be added with the following example, assuming the language used is PHP:

PHP-Based SSR Example
Copy Copy
1
2<?php
3$tenantId = rawurlencode("my-tenant-id");
4$urlId = rawurlencode("my-page-url-article-id");
5$url = rawurlencode("my-page-url");
6
7$fastcomments_url = "https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url";
8?>
9<iframe
10 src="<?php echo $fastcomments_url; ?>"
11 horizontalscrolling="no"
12 allowtransparency="true"
13 frameborder="0"
14 title="FastComments"
15 width="100%"
16 height="1500px"
17 style= "width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
18></iframe>
19

We can also only show the SSR UI when the user has JS disabled:

PHP-Based SSR Fallback Example
Copy Copy
1
2<?php
3$tenantId = rawurlencode("my-tenant-id");
4$urlId = rawurlencode("my-page-url-article-id");
5$url = rawurlencode("my-page-url");
6
7$fastcomments_url = "https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url";
8?>
9<noscript>
10 <iframe
11 src="<?php echo $fastcomments_url; ?>"
12 horizontalscrolling="no"
13 allowtransparency="true"
14 frameborder="0"
15 title="FastComments"
16 width="100%"
17 height="1500px"
18 style= "width: 1px !important; min-width: 100% !important; border: none !important; overflow: hidden !important;"
19 ></iframe>
20</noscript>
21

For an example using SSO, see here.

With Pre-Rendered Content

Our blog is generated at build time, and provides a good example of SSR with Handlebars.

The Basic Parameters

The basic parameters that you need to pass are:

  • tenantId - This identifies you as a customer.
  • urlId - This identifies the page or article to load comments for, and defines where they are saved.
  • url - This is used for notifications and related features to link back to the comment thread.

Custom Styling

The SSR version of the comment widget uses the same structure and rendering engine as the JavaScript one.

As such, all custom styling that works for the JavaScript commenting widget works for SSR.

Notes

With SSR, there is no JavaScript to control the height of the rendered container. In browsers, a vertical scrollbar may show for long discussions.

As such, you must tune this as desired.

Contribute to This Guide