服务端渲染及Vue版本控制

最新推荐文章于 2025-04-14 09:18:08 发布

逐渐头冷

最新推荐文章于 2025-04-14 09:18:08 发布

阅读量556

点赞数 1

文章标签： vue.js webpack javascript

本文链接：https://blog.youkuaiyun.com/java_vava2/article/details/123985664

版权

本文探讨了客户端渲染、服务端渲染及其对SEO的影响，并介绍了同构渲染的概念。重点讲述了Nuxt.js，一个基于Vue生态的服务端渲染框架，其自动路由设置和异步数据处理方法asyncData。Nuxt.js有助于提升SEO并实现首屏直出，同时提供了编程式导航和a标签的刷新导航方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端渲染 && 传统服务端渲染

客户端渲染：将数据和页面从服务端请求到客户端进行渲染加载
服务端渲染：客户端直接请求服务端渲染好的页面
客户端渲染过程：请求localhost网页地址 --> 请求引用的js文件 --> 请求ajax数据 --> 加载页面
服务端渲染过程：请求localhost网页地址 --> 加载页面
客户端渲染之后不利于SEO：由于客户端渲染之后网页程序无法解析页面中引入的js，故得到的是空文件
服务端渲染之后程序获得到内容之后通过不同的标签权重提高SEO

同构渲染

首屏服务端渲染提高SEO和实现首屏直出，首屏客户端渲染用于接管页面交互。

Nuxt.js

基于Vue生态的第三方服务端渲染应用框架。

路由

Nuxt.js创建的项目通过项目结构自动设置路由规则。具体实现规则在.nuxt/router.js文件

a标签刷新导航，走服务端渲染
router-link导航链接组件
<router-link to="/">跳转</router-link>
编程式导航
<buttom @click = '$router.push('/')'>编程式导航</buttom>

异步数据asyncData方法

基本用法

会将asyncData返回的数据混入到组件中的data中。在服务端渲染期间和客户端路由更新之前调用

export default {
  async asyncData(c){ //参数c中包含上下文对象
    const data = axios({method:'GET',url:'aa/data.json'}) //接口中请求的数据
    const id = c.params.id  //路由参数
  }
}