Fri Jan 21 2022
...
FastComments がサーバーサイドレンダリングをリリース
! この記事には技術用語が含まれています
新機能
2020年初頭のローンチ以来、FastCommentsはコメントウィジェットをレンダリングするためにJavaScriptのみを使用してきました。
もし、JSを使用せずにほぼすべての基本的な機能を持つことができると言ったらどうしますか？
上記のスクリーンショットは、JavaScriptなしのFastCommentsコメントウィジェットです。JavaScriptなしでこのページを表示できます。
使い方
WordPressを使用している場合、FastCommentsプラグインバージョン3.10.1は、自動的にJavaScriptが無効なユーザーのためにSSRのサポートを追加します。
カスタム実装の場合は、コメントスレッドのUIを取得するために、そのページのために/ssr/commentsを呼び出します：
ここで、$urlIdはページのURLまたはIDです。このドキュメントはこちらにあります。
例えば、PHPを使用してコメントスレッドを表示するiframeをページに送信することができます：
また、API呼び出しを行ってコメントスレッドのHTMLを取得し、レンダリングまたは保存することもできます。
完全なドキュメントは、SSR Docs at docs.fastcomments.comにあります。
SSO
企業的な響きを持つ略語が好きなので、心配しないでください。SSRはSSOをサポートしています。SSRを用いたシングルサインオンの例はここにあります。
ローカリゼーション
SSRベースのエンドポイントは、ブラウザが送信する言語関連のヘッダーに基づいて自動的にレスポンスをローカライズします。また、JavaScriptベースのウィジェットと同じローカリゼーションのオーバーライドを使用することもできます。
なぜこれを作ったのか
FastCommentsのようなサービスに対する主な不満の1つは、JSが必要であることです。コメントウィジェットをできる限りスリムに保ち、API呼び出しのSLAが< 20msであることを保証していますが、多くの小規模コミュニティは、サイトにJSを追加するという意味でそのようなソリューションを選びません。
これにより、JavaScriptにアクセスできないレンダリングエンジンを使用する機会も得られます。
技術
FastCommentsは、UIをレンダリングするために独自の小さなマイクロフレームワークを使用しています。このフレームワークはReactと似たアプローチを取っていますが、初回のレンダリング以外の手動DOM操作が許可されています。
コアのコメントウィジェットライブラリは単一のエントリポイントを持っており、状態のセットを受け取り、レンダリングされるHTMLとCSSを生成します。これをサーバー上でも呼び出します。ユーザーがページと対話すると、状態が変更され、最新のHTMLが取得されます。これは新年の一環として行われたハッカソンの結果として作られました。
ライブコメント
UIはサーバーによって一度レンダリングされるため、ライブコメント機能は利用できません。
また、通知ベルは現在使用できません。将来的にはこの機能を追加することを検討しています。
パフォーマンス
サーバーでレンダリングされたUIは、JavaScriptベースのウィジェットと同じストレージ最適化とレンダリングエンジンを使用しています。小さなコメントスレッドでは、ユーザーがコメントを取得しUIをレンダリングするスクリプトをダウンロードする必要がないため、実際にはパフォーマンスが向上します。
クローラーとSEO
FastCommentsはすでにウェブクローラーと良好に動作します。SEOが懸念される場合、SSRを使用する必要はありません。
今後のアプリケーション
今後フォーラムソリューションを発表する予定です。伝統的に、フォーラムはページングされ、サーバーサイドレンダリングされます。現代のフォーラムソリューションは、この標準から脱却し、無限スクロールとクライアントサイドレンダリングを使用しています。私たちは、これがサードパーティのフォーラムソリューションを使用する唯一のオプションである必要はないと考えています。
結論
このガイドが役に立ち、読みやすいものであったことを願っています。質問があれば、下にコメントしてください。
よろしくお願いします！