尝试在同一页面上显示未经身份验证和经过身份验证的内容时闪烁的内容

Question

（Nuxt 项目）我一直在寻找与在同一页面上显示未经身份验证和经过身份验证的内容相关的解决方案。

我有两种可能的解决方案，但它们有一些警告。

第一个，决定mounted用户是否可以看到经过身份验证的内容的方法，但我无法解决闪烁的内容问题，这是该方法的演示： https://60f08a8293123d00e57c14e8--happy-minsky-1268c6.netlify。 app/ 点击登录按钮并重新加载页面，您将看到闪烁的内容

我的第二种方法，它使用null避免未经身份验证和经过身份验证的内容，直到应用程序到达该mounted方法，此解决方案的问题是它对搜索引擎不友好，因为没有生成静态内容，请比较这两个链接：

从此解决方案生成： https : //gist.github.com/ltroya-as/fbbdce2b3dc30063e9c4ec7e93e3aba1#file-index-generated-file-html-L522

预期： https : //gist.github.com/ltroya-as/d37e3d0a89efebbfd66c2daf7700f50d#file-expected-generated-file-html-L523

有没有办法让第二个解决方案对搜索引擎更友好？我担心第二种解决方案会影响搜索引擎结果。

带有说明的存储库：https : //github.com/ltroya-as/nuxt-rehydration-example

- - 更新

我的项目配置为全静态模式

Answer 1

Vue 是一个客户端框架。所有的HTML都是由浏览器内部的JS生成的。这意味着典型的 Vue 应用程序只是非常简单的 HTMl 文件，几乎没有 HTML 和一些 CSS 和 Javascript 标签......

这对 SEO 来说是个问题，因为大多数爬虫（Google、FB、Twitter）不执行 JS，只是扫描从服务器返回的 HTML...

为了解决这个问题，创建了 Nuxt 框架。他们通过在服务器上执行 Vue 应用程序并在服务器上渲染 HTML 来解决问题 - 无论是在请求时（Nuxt classic - 每次请求到来时都会生成新的 HTML - 需要 Node 服务器）或在构建时（Nuxt 生成 - HTML）在构建时生成到文件中，并且为每个请求返回相同的 HTML）

在所有情况下，服务器返回的 HTML 都是不同的，但其他一切都相同。它仍然是一个 Vue 应用程序，在客户端上执行，一旦启动（这需要一些时间 - 因此用户在此期间只能看到服务器发送的内容），它会覆盖从服务器返回的任何 HTML。 。

这就是为什么您会看到“闪烁”，而且当您的网站完全静态生成时，恐怕没有简单的解决方案可以解决此问题。

1. 使用解决方案null- 结果很清楚，没有内容 -> 没有 SEO。没有其他办法了...
2. 如果您的目标是 SEO，我想默认情况下为经过身份验证的客户端呈现内容是没有意义的，因为这会向 Google（或其他爬虫）及其用户泄露此类内容，所以为什么首先将其隐藏在身份验证后面......
3. 剩下的唯一选择是为未经身份验证的用户生成内容，并为已登录的用户忍受闪烁

我认为如果您了解这个问题，您可以通过设计将其最小化 - 例如，不要在单个页面上混合身份验证/非身份验证内容。但对于你的简单且“不是来自现实生活”的例子，它没有解决方案