SSR 渲染和客户端交互答案

【问题标题】：SSR Rendering and Client InteractionSSR 渲染和客户端交互
【发布时间】：2020-11-06 04:52:14
【问题描述】：

如果我使用带有 SSR 的 Nuxt 构建站点，我将如何允许用户与站点交互 - 例如，一个like 按钮，传统上我会使用 axios 访问服务器的 vue 组件来执行此操作。

客户端交互是否仍然可以在 SSR 应用程序中进行 - 如果可以 - 怎么做？

【问题讨论】：

标签： nuxt.js

【解决方案1】：

你可以用 Vue 应用程序处理它的方式来处理它。

SSR 所做的只是预渲染页面的 HTML 内容，这通常是出于 SEO 的原因。一旦浏览器接收到这个预渲染的内容，Vue/Nuxt 就会通过水合过程来引导应用程序。

从那时起，应用程序的行为与普通的 Vue 或 Nuxt 应用程序完全一样。您可以使用@click 处理程序创建一个按钮，调用method，然后将该方法发布到您的服务器。

您需要注意的唯一棘手的事情是，在渲染服务器端时，进程无法访问窗口对象，因此尝试直接引用它或使用引用它的插件/库是一个很大的问题不，不。对于这些，您需要使用<no-ssr></no-ssr>，或检查window 是否存在。

【讨论】：

感谢您的回答。因此，在 NON SSR 页面中，只会传回一个空的 Vue 目标应用程序容器（然后填充客户端），我是否正确地说，使用 SSR，整个 HTML 从服务器传回，然后 Vue 做了一些魔术附加自己来创建交互元素？如果我有许多交互元素，SSR 仍然有意义吗？
完全正确。 SSR 本质上与 Vue SPA 所做的工作相同，但它不是渲染 HTML 客户端，而是渲染它的服务器端。页面上有很多交互性对于它是否是 SSR 没有影响。决定使用 SSR 的主要因素归结为 SEO、托管（您可能已经拥有服务器）或索引大量用户生成的内容。还有其他因素，但这些因素通常是最大的。
谢谢，我已经阅读了有关 SEO 和服务器要求的信息，但您能否详细说明“或为大量用户生成的内容编制索引”。此外，使用 Vue 功能为 SSR 页面补水是“正常的”吗？还是如果您需要前端交互式用户功能，您应该在客户端呈现整个事物？谢谢！
当然！如果您有大量用户发布内容（仅一个示例），例如 Stack Overflow 之类的网站，并且希望搜索引擎对上下文进行索引，那么使用静态网站生成是行不通的。您必须在每次更改数据时重建站点。这就是 SSR 的亮点，因为您可以在服务器端查找数据并动态呈现它。
补水是nuxt中一个完全正常的自动功能。你可以在这里阅读一些关于它的信息：ssr.vuejs.org/guide/hydration.html，但是，这是在 Vues 自己的 SSR 库的上下文中。不过 Nuxt 基本上做同样的事情，而且这一切都发生在幕后。