在一个项目中一般不会全部使用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请求一般用于静态文字内容比如官网介绍或者详情页面内容渲染
详细步骤参考下面二篇文章