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

（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

- - 更新

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