Fri Jan 21 2022
...

FastComments发布服务器端渲染

! 本文包含专业术语

新鲜事

自2020年初发布以来，FastComments一直使用JavaScript来渲染评论小部件。

如果我们告诉您，可以在不使用JS的情况下获得几乎所有相同的基本功能，您会怎么想？

这是一张截图，别试图点击它。

上面的截图是FastComments评论小部件，无需JavaScript。您可以在此查看此页面，无需JavaScript。

如何使用

如果您使用的是WordPress，FastComments插件版本3.10.1会自动为您的用户添加SSR支持，以防他们禁用JS。

对于自定义实现，获取评论线程的用户界面，只需调用该页面的/ssr/comments：

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

其中$urlId是页面的url或id。相关文档在这里。

例如，使用PHP，我们可以向页面发送一个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文档网上查阅。

SSO

因为我们喜欢听起来像企业的缩写，不用担心，SSR支持SSO。使用SSR的单点登录示例在这里。

本地化

基于SSR的端点会根据浏览器发送的语言相关头自动本地化响应。它还可以使用与基于JavaScript的小部件相同的本地化覆盖。

为什么要构建这个

关于像FastComments这样的服务，主要的抱怨之一是它们需要JS。我们已经尽可能使我们的评论小部件精简，并确保满足我们的API调用SLA，即< 20ms，但许多较小的社区如果这意味着要在其网站上添加JS，就不会选择这样的解决方案。

这也为使用没有JavaScript访问权限的渲染引擎打开了机会。

技术

FastComments使用自己的小型微框架来渲染用户界面。该框架采用与React类似的方法，只是允许在初始渲染之外进行手动DOM操作。

核心评论小部件库有一个单一入口点 - 它使用一组状态并创建生成的HTML和CSS以进行渲染。我们也在服务器上简单调用它。当用户与页面交互时，状态就会改变，最新的HTML会被获取。这是由于新年期间举行的黑客马拉松的结果而构建的。

实时评论

由于用户界面是一次性由服务器呈现的，因此实时评论功能不可用。

此外，通知铃现在不可用。我们将在未来考虑添加此功能。

性能

服务器渲染的用户界面使用与基于JavaScript的小部件相同的存储优化和渲染引擎。对于小的评论线程，性能实际上更好，因为用户不必下载一个脚本来获取评论并渲染用户界面。

网络爬虫和SEO

FastComments已经与网络爬虫良好兼容；如果SEO是一个问题，使用SSR并非必需。

未来应用

我们计划在未来推出一个论坛解决方案。传统上，论坛是分页的，服务器端渲染的。现代论坛解决方案通过使用无限滚动和客户端渲染来摆脱这种规范。我们不认为这必须是使用第三方论坛解决方案的唯一选择。

总结

我们希望您觉得这份指南对您有帮助且易于阅读。如有任何问题，请随时在下方评论。

干杯！

Fri Jan 21 2022...