时间戳

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

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

问题描述

（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-rehydratation-example

- - 更新

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

标签： vue.jsvuejs2nuxt.js

解决方案

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

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

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

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

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

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

我认为，如果您知道该问题，则可以通过设计将其最小化-例如，不要在单个页面上同时混合 auth/non-auth 内容。但是对于您的简单且“不是来自现实生活”的示例，它没有解决方案

推荐阅读