我从CSR转变到SSR过程中，让我耗时最多的环节，是网络请求...
我查阅了各种教程，大部分教程都在请求自己的服务端。我想说，后端同学已经写好了N个接口，难道我就要写N个服务端接口，然后客户端又写N个接口调自己的服务端接口吗。兄弟看下去，这篇文章教你更优雅的请求方式。
网络请求中，如果你跟我一样有以下困扰
- 各种教程都在请求自己写的/server/api下面的接口，拜托我又不是搞全栈。
- 我们公司有后端提供接口，能不能请求转发直接调。
- 我配置请求转发之后本地是成功了，但是线上又不行了。
- 或者我根本不会配请求转发，直接就跨域。
- 我这样配了之后还能保证服务端渲染吗。
利用Nuxt3中的混合渲染就能轻松搞定
- 从Nuxt3开始随着公测 rc.12版本 发布，支持路由规则和 混合渲染。务必在使用这个配置前需要将版本更新至 rc.12版本 或最高版本！
- 使用路由规则，您可以为一组nuxt路由定义规则，改变呈现模式或分配基于路由的缓存策略!
- 使用混合渲染，你可以使用 Route Rules 允许每个路由使用不同的缓存规则，并决定服务器应如何响应给定 URL 上的新请求。
1、在nuxt.config.ts中添加以下配置
export default defineNuxtConfig({
routeRules: {
// 针对路径进行接口转发
'/dev-api/**': {
// https://cnodejs.org/api/v1 是个公共接口api前缀，将其替换为后端写好的接口调用地址就好
proxy: `https://cnodejs.org/api/v1/**`
},
}
})
2、在业务层或者封装好的网络请求工具类中调用 useFetch() ，同时设置baseURL为 /dev-api
需要注意的是，使用useFetch才能有水合作用。
// 业务代码中 /pages/home/index
<template>
<div>
<button @click="getInfo">
获取一个请求吧
</button>
<div>
{{ info?.title }}
</div>
</div>
</template>
<script setup>
const info = ref();
const getInfo = async () => {
// 模拟请求一个真实的网络内容
const { data, error } = await useFetch("/topic/5433d5e4e737cbe96dcef312", {
baseURL: "/dev-api",
});
info.value = data.value.data;
};
getInfo();
</script>
3、pnpm run dev 运行程序
项目链接
特别鸣谢
我想藏在罐头里提供的最低版本要求说明
