我如何克服单页应用程序的弱点?

How do I overcome the weaknesses of the single page application?

我想用 vue 构建一个单页应用程序 https://vuetifyjs.com/en/ or https://coreui.io/vue/。但是一些参考资料说单页应用程序在 SEO 中并不好。所以我考虑使用它。也许最好的解决方案是使用多页面应用程序。如果那是最好的选择,那么使用 vue 开发多页面应用程序的最佳技术是什么? API已经可用,所以我就用它

请提供一些最佳选项。所以我可以有几个选择。谢谢

标准的 VueJS-SPA 不利于 SEO 是正确的,因为第一个 HTML 通常是空的,只有在下载并执行 Vue 代码时,您的页面才会动态呈现和安装在客户端上。

构建一个多页面(因为在每个路由中都会导致一个全新的 HTML 页面被服务器发送下来),但是使用 Vue 并不可行。

相反,我建议查看 VueJS 的服务器端渲染。这可以通过 standard VueJS or with a framework that is specialized in this such as NuxtJS.

来实现

这项技术将有效地做的是呈现第一个页面,用户在服务器上访问并发送呈现的 HTML。这将导致良好的 SEO,因为爬虫每次都会收到一个渲染的 HTML 页面。对于每个后续的页面导航,该站点将简单地表现得像一个 SPA。

使用 SPA 进行 SEO 的一般解决方案是启用 SPA 的服务器端呈现。这是通过让您的 HTTP 服务器为客户端提供完全呈现的应用程序来实现的;而不是发送样板 HTML 然后让客户端对应用程序包和诸如此类的东西进行后续请求。

虽然其他人已经加入了 SSR 解决方案,但您可以采取的另一种方法是使用预渲染。 prerender-spa-plugin 是一个可以用于此的 webpack 插件,它接受你想要渲染的路由,并为其生成 HTML 和 JS 文件。

还有Prerender.io,它会拦截来自网络爬虫的请求,并在将 SPA 提供给爬虫之前对其进行预渲染。此服务最多可免费提供 250 个页面,并且几乎可以消除开发人员的所有复杂性。

如果您是 Vue 新手,不想管理服务器端渲染的复杂性,或者不想使用 Nuxt 之类的东西来生成静态站点,那么这些都是很棒的选择。

我工作的公司使用 Nuxt(我们使用通用模式,也称为服务器端渲染),但我们也非常满意它可以使用 generate 为我们的静态站点渲染随机的小项目。请注意,这伴随着另一个构建在 Vue 之上的框架的复杂性增加,以及随之而来的许多额外障碍。