带有 Nuxt 的 Vuex 中的项目是不是被爬取？

Posted 2023-02-22

【中文标题】带有 Nuxt 的 Vuex 中的项目是不是被爬取？

【英文标题】：Are items in Vuex with Nuxt being crawled?带有 Nuxt 的 Vuex 中的项目是否被爬取？

【发布时间】：2021-02-03 12:55:24

【问题描述】：

我计划将我博客的大部分文本存储在 vuex 中，以加快加载速度。这是一个好主意，特别是对于 SEO 还是我应该为所有帖子创建单独的路线？在我主要使用香草 javascript 之前，我肯定对 SEO 不太了解，而且我也是 vue/nuxt 的新手。

【问题讨论】：

对于 seo 是的，对于速度和可维护性 meh。 nuxt 提供了一个模块来在将被预渲染的静态页面上写博客。 nuxtjs.org/blog/creating-blog-with-nuxt-content 我也在我的博客 blogxon.com 上使用了相同的 nuxt 模块，效果很好

【参考方案1】：

我不会使用 VueX 来存储博客文章，尤其是在您使用所有静态内容的情况下。

Nuxt 有一个很棒的包，nuxt content 就是为此而设计的。它使用降价页面来发布博客文章。

然后我会使用nuxt seo package 来为您网站的搜索引擎优化充电。有了它，您可以轻松设置默认站点 SEO 设置，例如 Twitter 句柄和图像。然后，您可以更新您拥有的每篇博文的社交媒体图片，直接从 nuxt content 获取数据。

【参考方案2】：

你可以，但绝对不建议这样做。

Nuxt 为写博客提供了一个很好的模块https://nuxtjs.org/blog/creating-blog-with-nuxt-content

也适用于静态网站。它们被预渲染。

【讨论】：

感谢您的资源！与在 Vuex 中保存一般信息以及在自己的 Componenet 中保存每个特定帖子相比，将信息保存在 API 中究竟有什么好处。对不起，如果这个问题看起来很基础，网络开发绝对是我最大的弱点^^

@jonithani123 好吧，如果你将它保存在 vuex 商店中，比如假设 10 个博客，并且eath 博客中至少有 1000 个单词，那么你的用户将始终将所有 10 个单词一起加载，一段时间后会非常慢。 vuex 是为 UI 状态而设计的，比如切换侧边栏，或者保存一些信息，比如网络令牌，而不是博客文章。它们通常保存在数据库中或类似 nuxt 模块中，它们在构建过程中被预渲染。

@jonithani123 也提出了一个问题：如果你想要一些大胆的东西怎么办？或者你想要一个 h2 或 h3 标签？或者如果您想在博客文章中添加链接和图片怎么办？仅使用 vuex 将很难。使用 nuxt-content 模块，您有一个 markdown editor 女巫将您的文本转换为 html 元素

是的，你是对的，使用 API 也有助于轻松扩展博客，我为此使用了 vue 来最大程度地减少以后的工作量，以后使用 markdown 将特别容易。非常感谢您的意见！

【参考方案3】：

如果您想知道 Google 是否能够查看内容，我不会担心。我已经测试了许多类似的情况，即使通过外部 API 提取数据，Google 也很乐意等待一段时间，看看页面是如何呈现和抓取结果的。

但是，如果您担心，只需使用 asyncData 或 fetch 生成组件数据。两者都将在您的模板呈现之前运行，因此您可以获取数据并在页面加载之前使其可用。

export default 
  async asyncData( store ) 
    return 
      blogData: store.state.blogs.find(blog => blog.id === 1)
    
  

Nuxt asyncData

【讨论】：

太好了，我可能仍然会使用路由，因为没有它们谷歌将无法对我的各个页面进行排名，对吧？