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 を取得します。
これにはいくつかの方法があります。
WordPress の場合
WordPress プラグインでは、バージョン 3.10.2 以降、JS が無効なユーザー向けのフォールバックとして、SSR がデフォルトで有効になっています。
Web ページの場合
既存のアプリケーションでは、使用している言語が PHP であると仮定して、次の例のように SSR を追加できます。
ユーザーが JS を無効にしている場合にのみ SSR UI を表示することもできます:
SSO を使用した例については、こちらを参照してください。
事前レンダリングされたコンテンツの場合
私たちのブログはビルド時に生成されており、Handlebars を使用した SSR の良い例を提供しています。
基本パラメーター
渡す必要がある基本パラメーターは以下の通りです:
tenantId- 顧客としてあなたを識別します。urlId- コメントを読み込むページまたは記事を識別し、コメントの保存先を定義します。url- 通知や関連機能でコメントスレッドへのリンクに使用されます。
カスタムスタイリング
コメントウィジェットの SSR 版は、JavaScript 版と同じ構造とレンダリングエンジンを使用しています。
そのため、JavaScript コメントウィジェットで機能するすべてのカスタムスタイリングは、SSR でも機能します。
注意事項
SSR では、レンダリングされたコンテナの高さを制御する JavaScript がありません。ブラウザでは、長いディスカッションの場合に垂直スクロールバーが表示されることがあります。
そのため、必要に応じて調整する必要があります。