Vue预渲染

最新推荐文章于 2023-05-30 16:00:22 发布

辰之祥

最新推荐文章于 2023-05-30 16:00:22 发布

阅读量419

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/l20001109/article/details/110387099

版权

本文介绍了SPA（单页面应用）的概念及其优点，包括减轻服务器压力和提高页面渲染效果。Vue作为SPA框架，面临SEO优化的挑战。文章探讨了预渲染技术，这是一种在构建时生成静态HTML文件的方法，以解决SPA的SEO问题。通过vue-cli-plugin-prerender-spa插件和history模式的Router，可以实现多页面预渲染，从而增加SEO数量。

摘要由CSDN通过智能技术生成

SPA

全称是单页面应用（single page web application）。一个SPA就是一个WEB应用，它所需的资源(HTML CSS JS等)，在一次请求中就加载完成，也就是不需刷新地动态加载。用术语“单页”就是因为页面在初始化加载后就永远不会重新加载刷新。一些前端框架，如 Vue 就是 SPA 架构的，适合单页面开发。
优点：
减轻服务器端的压力
因为服务器先将一份包含了静态资源、JavsScript和模板的静荷数据(payload)发送到了客户端，之后客户端只需要获取渲染页面或视图所需要的数据即可。 payload就是起关键作用的资源
提高了页面的渲染效果
由于移动设备的流行，可以开发提供JSON格式数据的网络服务，然后可以提供不同的客户端使用。 SPA的使用，我们可以使用一个HTTP API，一个HTTP API相比在服务端渲染一个HTML页面有诸多好处，这样就可以很方便的进行单元测试等操作，还可以被其他很多客户端程序所用。
SPA最大的好处就是大量的工作都在浏览器中完成，服务端承担更少的工作，这样就可以处理更多的请求。同时SPA需要额外的请求模版开销，我们可以通过预编译模版、缓存机制和将多个模板拼接成一个大的模板来减少请求数量。

缺点：
但是也带来了SEO（*对搜索引擎的配置）缺少的问题，因为只有一个页面导致SEO只能有一个，有没有什么方法使不同的页面都能有一个SEO呢？也就是使其变成多页开发。