服务端渲染及Vue版本控制

本文探讨了客户端渲染、服务端渲染及其对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方法

  1. 基本用法
  • 会将asyncData返回的数据混入到组件中的data中。在服务端渲染期间和客户端路由更新之前调用
export default {
  async asyncData(c){ //参数c中包含上下文对象
    const data = axios({method:'GET',url:'aa/data.json'}) //接口中请求的数据
    const id = c.params.id  //路由参数
  }
}
  1. 注意事项
  • 只能在页面组件中使用,无法在公共组件中使用;由于在组件初始化之前调用因此没有this
    转载:Vue版本区别
    vue cli创建的项目默认使用vue的runtime版本。vue cli对webpack深度封装,可使用vue inspect > xxx.js将配置导出到某一文件中查看。
    使用runtime版本
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值