SSR（サーバーサイドレンダリング）
SSRとは？ 
SSR（Server-Side-Rendering）は、クライアント側の作業を最小限にしてアプリケーションやコンテンツをレンダリングするための仕組みと一連の慣例です。
SSRでは、クライアントはJavaScriptを実行しません。代わりに、クライアントはサーバーによって「レンダリング」されたHTML/CSSを表示します。
SSRの利点
SSR の主な利点の一つは JavaScript が不要であることです。そのため、多くのユースケースでアプリケーションは "lighter" に感じられるように構築できます。
さらに、SSR はユーザーが JavaScript を無効にしている場合のフォールバックとして利用できます。こうすることでコメントスレッドは引き続きレンダリングされ、ユーザー はコメントに返信することもできます。
FastComments は既に最適化されているため、ほとんどの場合 SSR は必要ありません。ただし、一部のオンラインコミュニティには JavaScript を使用しないユーザーがいるか、あるいは無効化することが 好ましい運用になっている場合があります。ここで FastComments の SSR が役に立ちます。
しかし、SSR の大きなトレードオフは、ちょっとした状態変化のたびにページをリロードしなければならないことです。
FastCommentsのSSR対応機能
FastCommentsはSSRで以下の機能をサポートしています：
- カスタマイズ可能なコメントウィジェット。
- 匿名コメント。
- ログイン中のコメント。
- SSO。
- ルートおよびネストされた返信。
- コメントスレッドの表示とページング。
- 投票（匿名投票を含む）。
- デフォルトのソート方向の変更。
例
FastComments SSRの例はこちらで利用できます。
ユースケース
SSRの使用例は次のとおりです:
- JavaScriptが無効になっている場合のフォールバック。
- JavaScriptが利用できない、または望ましくない環境でコメントインターフェースをレンダリングするため。
- より多くのJavaScriptの導入が望ましくないサイトやオンラインコミュニティ向け。
FastCommentsがSSRを使用する箇所
FastComments は以下の場所で SSR を使用します:
- 当社の WordPress プラグインはデフォルトでフォールバックとして SSR を使用します。JavaScript が無効になっている場合でも、ユーザーはあなたのブログにコメントできます。
- 私たちは自社のブログでもフォールバックとして使用しています！ https://blog.fastcomments.com
SSRの使用
FastComments SSR を使用するには、クライアントが https://fastcomments.com/ssr/comments エンドポイントから HTML を取得できます。
これはいくつかの方法で行うことができます。
With WordPress
SSR は、WordPress プラグインのフォールバックとして JS が無効なユーザー向けにバージョン 3.10.2 以降でデフォルトで有効になっています。
In a Webpage
既存のアプリケーションでも、使用言語が PHP と仮定すると、以下の例 を使って SSR を追加できます:
ユーザーが JS を無効にしている場合のみ SSR UI を表示することもできます:
SSO を使用した例については、こちらを参照してください。
With Pre-Rendered Content
当社のブログはビルド時に生成されており、Handlebars を使った SSR の良い例 を示しています。
The Basic Parameters
渡す必要がある基本的なパラメータは次のとおりです:
tenantId- これはあなたを顧客として識別します。urlId- これはコメントを読み込むページや記事を識別し、保存先を定義します。url- これは通知や関連機能でコメントスレッドに戻るリンクとして使用されます。
Custom Styling
コメントウィジェットの SSR バージョンは、JavaScript のものと同じ構造およびレンダリングエンジンを使用します。
したがって、JavaScript コメントウィジェットで動作するすべてのカスタムスタイリングは SSR でも動作します。
Notes
SSR では、レンダリングされたコンテナの高さを制御する JavaScript がありません。ブラウザでは、長い議論の場合に垂直スクロールバーが表示されることがあります。
そのため、必要に応じてこれを調整してください。