配置SSR
Nuxt3 默认首屏SSR，由服务端渲染，可以通过配置 ssr:false 来取消服务端渲染
nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
// ssr:false, //页面全部为客户端渲染
routerRules:{ // 指定路由页面为客户端渲染
'/home': {
ssr:false
}
}
})数据请求
根据vue 的声明周期，只有 setup beforeCreate Created**里的内容会在服务端执行，所以如果是首屏服务端渲染时，需要将获取数据方法写到这几个生命周期之中**
Nuxt3 有封装好的$fetch方法做数据请求，可以不需要引入第三方axios或者fetch做数据请求，可能会出现多个请求数据混乱问题
下列情况都是不需要跨域的请求，服务端和客户端不需要做其他配置代理就可以请求的内容
useAsyncData && useLazyAsyncData
useAsyncData 需要结合 $fetch 来使用，且要 传入一个唯一的key值，防止请求过多数据混乱，lazy默认为false ，会在从别的页面跳转进来时阻塞路由跳转 即：需要先请求完后路由才会切换
useLazyAsyncData 的lazy默认为true 不需要再额外写配置
代码语言：txt复制<template>
<div>
<div v-for="item of list" :key="item.name">
{{ item.name }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const list = ref([])
const { data } = await useAsyncData(
'id', // 需要输入唯一ID
() =>
$fetch('https://xxx.xxx.com', {
headers: {
...
}
}),
{
pick: ['data'], // 选择返回对象中想要的属性
// lazy: false, // 这里默认为false 会阻塞路由渲染，（一定要等到数据请求回来后才会跳转路由）
lazy: true // 不会阻塞路由跳转，但是会导致跳转后无数据，需要通过watch监听数据后赋值
}
)
// 不可以去掉，否则首屏加载会报错
list.value = data.value
watch(data, () => {
list.value = data.value
})
</script>这里获取数据最开始是空数组，请求数据后将内容赋值，使用lazy后会导致最开始数据没有，进入页面请求数据不加载，这里可以使用 watch监听返回内容，改变时赋值。
也可以不做赋值处理，直接将取出的内容解构 用于页面渲染，就可以不需要监听
代码语言：txt复制<template>
<div>
<div v-for="item of data" :key="item.name">
{{ item.name }}
</div>
</div>
</template>
<script setup lang="ts">
const { data } = await useAsyncData(
'id', // 需要输入唯一ID
() =>
$fetch('https://xxx.xxx.com', {
headers: {
...
}
}),
{
pick: ['data'], // 选择返回对象中想要的属性
// lazy: false, // 这里默认为false 会阻塞路由渲染，（一定要等到数据请求回来后才会跳转路由）
lazy: true // 不会阻塞路由跳转，但是会导致跳转后无数据，需要通过watch监听数据后赋值
}
)
</script>useFetch && useLaztFetch
相当于useAsyncData的 语法糖，不需要写$fetch也不需要传入唯一id
useLaztFetch 就是 默认将lazy设置为true ，
写法相对简单
代码语言：txt复制const { data } = await useFetch(
'https://xxx.xxx.com',
{
headers: {
...
},
transform: (res: any) => res.data.films, // 返回内容过多可以筛选 想要的返回内容
// lazy: false, // 这里默认为false 会阻塞路由渲染，（一定要等到数据请求回来后才会跳转路由）
lazy: true // 不会阻塞路由跳转，但是会导致跳转后无数据，需要通过watch监听数据后赋值
}
)
</script>
