nuxt 使用存储数据渲染 header.vue

Question

我有 header.vue 以及来自 store(vuex) 的用户信息，比如用户名和他的 img。当您在网站上单击链接时，一切正常，但是当您重新加载页面时，带有此信息的标题会消失并在呈现主要组件后出现一些延迟，并且在标题中几秒钟您只能看到登录、注册按钮。我怎样才能解决这个问题？我尝试添加标签<no-ssr>，但这不是最好的解决方案，因为页面只是在没有标题的情况下呈现，并且仅在几毫秒后才会出现

Answer 1

你有一些加载内容的事实并不能通过魔法来缩短。您可以使用asyncData 阻止页面的呈现，这样您的应用将在呈现页面之前等待 HTTP 调用完成（顺便说一句，仅适用于页面）。

此外，如果您将代码包装在 <client-only> 标记内（不是 <no-ssr>，因为该标记已被弃用），您在这里要问的几乎是：“请不要在服务器上渲染这部分，但是让我的客户做这项工作”。这主要与您在这里想要实现的目标相反。

如果可能的话，您还可以尝试对正在加载的内容进行服务器渲染，这样即使还没有水合，它也会在视觉上可用。