Fri Jan 21 2022
...

FastComments 發布伺服器端渲染

! 本文包含技術術語

有什麼新消息

自 2020 年初上線以來，FastComments 一直專門使用 JavaScript 來渲染評論小部件。

如果我們告訴您，您可以擁有幾乎所有相同的基本功能，但不使用 JS，您會怎麼想？

這是一個截圖，停止嘗試點擊它。

上述截圖是 FastComments 的評論小部件，無需使用 JavaScript。您可以在這裡查看此頁面，無需 JavaScript。

如何使用

如果您使用 WordPress，FastComments 插件版本 3.10.1 會自動添加對 SSR 的支持，以作為用戶在禁用 JS 的情況下的備份。

對於自定義實現，獲取評論線程的 UI，只需調用該頁面的 /ssr/comments：

https://fastcomments.com/ssr/comments?tenantId=$tenantId&urlId=$urlId&url=$url

其中 $urlId 是頁面的 url 或 id。這方面的文檔在這裡。

例如，使用 PHP 我們可以向頁面發送一個 iframe，該 iframe 會在內部渲染評論線程：

基於 PHP 的 SSR 示例
<?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>

我們還可以進行 API 調用來獲取評論線程的 HTML，並進行渲染或存儲。

完整文檔可在 SSR 文檔 docs.fastcomments.com 獲得。

SSO

因為我們喜歡聽起來像企業的縮寫，不用擔心，SSR 支持 SSO。此處有一個帶 SSR 的單點登錄示例。

本地化

基於 SSR 的端點會根據瀏覽器發送的語言相關標頭自動對響應進行本地化。它還可以使用與基於 JavaScript 的小部件相同的本地化覆蓋。

為什麼要建設這個

關於像 FastComments 這樣的服務的主要抱怨之一是它們需要 JS。我們已經使我們的評論小部件精簡到最小，並確保我們的 API 調用 SLA 低於 20 毫秒，但許多小型社區不會選擇這樣的解決方案，如果這意味著要在他們的網站上添加 JS。

這也開啟了使用無法訪問 JavaScript 的渲染引擎的可能性。

技術

FastComments 使用自己的一個小型微框架來渲染 UI。該框架使用與 React 類似的方法，不過允許在初始渲染之外進行手動 DOM 操作。

核心評論小部件庫有一個單一入口點 - 它接收一組狀態並創建生成的 HTML 和 CSS 供渲染。我們在伺服器上也簡單地調用這個。當用戶與頁面互動時，狀態會更改並提取最新的 HTML。這是作為新年期間舉行的黑客松的結果而建立的。

實時評論

由於 UI 是由伺服器一次性渲染的，因此實時評論功能不可用。

此外，通知鈴目前不可用。我們將在未來開放添加此功能的可能性。

性能

伺服器渲染的 UI 使用與基於 JavaScript 的小部件相同的存儲優化和渲染引擎。對於小型評論線程，性能實際上更好，因為用戶不必下載一個然後提取評論和渲染 UI 的腳本。

爬蟲與 SEO

FastComments 已經與網頁爬蟲良好協作；如果 SEO 是一個關注點，則不需要使用 SSR。

未來應用

我們計劃在未來推出論壇解決方案。傳統上，論壇是分頁的並且伺服器端渲染。現代論壇解決方案不再遵循這一常規，改用無限滾動和客戶端渲染。我們認為這不必是使用第三方論壇解決方案的唯一選擇。

總結

我們希望您覺得這個指南有幫助且易於閱讀。如有任何問題，請隨時在下方評論。

乾杯！

Fri Jan 21 2022...