封装nuxt3的SSR请求和CSR请求方法
在一个项目中一般不会全部使用SSR(服务端)方式渲染，所以需要在请求的时候进行区分请求类型
展示文件目录
1.请求封装
request.ts
import { useFetch } from '#app'
// 服务端请求
export async function useApiFetch(url: string, opts: any) {const config = useRuntimeConfig(); // 获取环境变量// 请求配置const defaultOptions: any = {baseURL: opts.apiType == "ssr" ? config.public.baseURLSSR : config.public.baseURL,headers: {"Content-Type": "application/json","token": ''} as any,}// 传参判断 get请求传参放到query里，post请求传参放到data里if (opts.method == 'get') {defaultOptions.query = Object.assign({ ...opts.data })} else {defaultOptions.data = opts.data}// console.log("请求参数", defaultOptions)if (opts.apiType == "ssr") {// 发送ssr请求const res: any = await useFetch(url, { ...defaultOptions, ...opts } as any)return res.data.value} else {// 发送csr请求const res: any = await $fetch(url, { ...defaultOptions, ...opts } as any)// return res// 响应处理return new Promise((resolve, reject) => {if (res.code !== 200) {// 返回接口错误// console.log('接口错误', res.data.value?.message)return reject(res)}// 返回成功resolve(res)})}
}2.接口封装
home.ts
import { useApiFetch } from '@/utils/request'
// apiType区分渲染方式 ssr:服务端渲染（获取页面内容数据渲染） csr:客户端渲染（提交数据等不需要seo的内容）
export default {/**
* 首页课程
*/courseApi() {return useApiFetch("/course/inlet/v1.0/home/course", { method: 'get', apiType: 'ssr' })},/**
* 首页课程
*/getCourseApi(data:{}) {return useApiFetch("/course/inlet/v1.0/home/course", { method: 'get', apiType: 'csr',data })},
}index.ts 这个是接口模块化文件，多个接口文件导入到一个里面方便引用
// 引入所有接口
import home from "./home";// 接口导出
export const homeApi = home; //首页
3.接口配置
nuxt.config.ts
const isTest = process && process.env.npm_lifecycle_event == "test";
export default defineNuxtConfig({ssr: true, // 是否启用服务器端渲染nitro: {// 自定义打包文件名output: {dir: isTest ? "./test_dist" : "./dist"},devProxy: {// 本地代理'/api': {target: 'https://test-api.xxxx.com',changeOrigin: true,},},routeRules: { // 线上代理 /** 表示代理这个前缀的所有请求'/production/**': {//线上正式proxy: 'https://test-api.xxxx.com/**'},'/test/**': {//线上测试proxy: 'https://test-api.xxxx.com/**'},}},runtimeConfig: {public: {baseURL: process.env.NUXT_PUBLIC_API_BASE,// CSR请求代理baseURLSSR: 'https://test-api.xxxx.com',// SSR请求地址},},/**配置本地访问链接*/devServer: {host: 'localhost',// host: '192.168.130.63',// 本地IP地址，需要给别人访问的时候使用port: 3010,},modules: [],imports: {dirs: ['store/**']},devtools: { enabled: false },// 是否显示调试工具，页面下面的图标
})
4.页面使用
index.vue
<template><div>首页</div><div><p>下面内容通过接口请求获取进行渲染的(ssr)</p><div v-for="item, i in courseData.boutiqueResponses" :key="i">{{ item.name }}</div></div><button @click="getCourseData">获取数据</button><div><p>下面内容通过接口请求获取进行渲染的(csr)</p><div v-for="item, i in courseList.boutiqueResponses" :key="i">{{ item.name }}</div></div>
</template>
<script setup lang="ts">
import { homeApi } from "@/api/index"
// 页面seo
useSeoMeta({title: "首页",description: "首页内容说明",
})// 等待数据加载完成再进行渲染 :courseData 对data进行别名赋值
const { data: courseData, pending, error } = useAsyncData('course-list',async () => {const res = await homeApi.courseApi()return res?.data}
)// 点击按钮请求接口
let courseList = ref([] as any)
function getCourseData() {homeApi.getCourseApi({ page: 1, size: 10}).then(res => {console.log(res)courseList.value = res.data})
}
</script>
<style lang="scss" scoped></style>5.效果
6.总结
SSR，即服务器端渲染（Server-Side Rendering），是一种网页应用的渲染方式。其主要目的是为了提升网页的初始加载速度、SEO（搜索引擎优化）效果以及改善用户体验。以下是SSR的主要目的和优势：
1. 提升首屏加载速度
在SSR中，网页的内容是在服务器端生成的，并以HTML的形式发送到客户端，这样浏览器可以直接渲染页面内容，无需等待JavaScript下载和执行，从而加快了首屏内容的显示速度。
2. 改善SEO效果
搜索引擎爬虫在抓取网页时更偏好完整的HTML内容。使用SSR可以确保向搜索引擎提供完全渲染的页面，有助于提高网站在搜索结果中的排名。
3. 更好的用户体验
由于页面能够更快地展示内容，用户不需要长时间等待页面加载完成，尤其是在移动网络环境下，这可以显著提升用户体验。
4. 资源利用效率更高
对于内容不经常变化的页面，使用SSR可以减少客户端的计算负担，因为服务器已经完成了页面的渲染工作。
5. 有利于社交分享
当页面被分享到社交媒体平台时，如果页面是通过SSR生成的，则能确保分享出去的链接预览信息（如标题、描述、缩略图等）是完整且正确的。
尽管SSR有诸多优点，但也要注意到它可能会增加服务器的负载，因为服务器需要为每个请求动态生成HTML。因此，在选择是否使用SSR时，需要综合考虑项目的具体需求和技术栈的特点。
SSR请求一般用于静态文字内容比如官网介绍或者详情页面内容渲染
详细步骤参考下面二篇文章
nuxt3 SSR（服务端渲染）接口请求封装-CSDN博客文章浏览阅读160次，点赞7次，收藏2次。本文介绍了Vue3项目中基于Nuxt3的API请求封装与SSR实现方案。首先通过useFetch封装了useApiFetch方法，处理GET/POST请求参数差异，并设置统一请求头。接着创建API模块集中管理接口，页面直接调用无需放在生命周期中。重点说明了SSR实现要点：1)请求需在useAsyncData中进行，避免客户端/服务端渲染差异导致Hydration错误；2)通过SSR提示和页面源码可验证SSR是否生效。最后对比了错误的直接赋值和正确的useAsyncData数据加载方式，解决渲染水合不匹配问题https://blog.csdn.net/weixin_70563937/article/details/148928350?spm=1011.2415.3001.5331
nuxt3配置客户端请求跨域代理，服务端请求不需要配置-CSDN博客文章浏览阅读160次。本文介绍了Nuxt项目中配置API代理的步骤：首先在.env文件中设置NUXT_PUBLIC_API_BASE为'/api'；然后在nuxt.config.ts中配置devProxy，将目标API地址指向测试环境；最后通过检查请求接口前缀是否变为本地代理路径来验证配置是否成功。该配置实现了开发环境下的API请求代理转发，方便前端调试。https://blog.csdn.net/weixin_70563937/article/details/148919890?spm=1011.2415.3001.5331