next中服务端组件共享接口数据

1、首先创建一个共享的数据获取文件:

getSharedData.ts

javascript 复制代码
import { cache } from 'react'
import { getAnchorArticle } from '@/service/supabase/api/article'
import { getMaterialCategory } from '@/service/supabase/api/materials'
import { getTechnologyCategory } from '@/service/supabase/api/technology'

export type SharedData = {
  anchorArticle: any // 替换为实际的类型
  materialCategory: any // 替换为实际的类型
  technologyCategory: any // 替换为实际的类型
}

export const getSharedData = cache(async (): Promise<SharedData | null> => {
  try {
    const [anchorArticle, technologyCategory, materialCategory] = await Promise.all([
      getAnchorArticle(),
      getTechnologyCategory(),
      getMaterialCategory(),
    ])

    return {
      anchorArticle,
      technologyCategory,
      materialCategory,
    }
  } catch (error) {
    console.error('Error fetching shared data:', error)
    return null
  }
})

2、然后在需要使用这些数据的服务端组件中:

index.tsx

javascript 复制代码
import { getSharedData } from '@/lib/getSharedData'

const Header = async () => {
  const data = await getSharedData()
  const { anchorArticle, technologyCategory, materialCategory } = data!

  return (
    // ... rest of the component
  )
}

3、在其他服务端组件中也可以直接使用:

SomeOtherServerComponent.tsx

javascript 复制代码
import { getSharedData } from '@/lib/getSharedData'

const SomeOtherServerComponent = async () => {
  const data = await getSharedData()
  // 使用相同的数据,不会触发新的请求
  
  return (
    // ... component JSX
  )
}

这种方式的优点:

  • 数据获取逻辑集中管理,易于维护
  • 使用 cache 确保多个组件调用时只请求一次
  • 可以在 getSharedData.ts 中定义清晰的类型
  • 便于添加错误处理和数据转换逻辑

如果某些组件只需要部分数据,你也可以拆分成多个更小的缓存函数:

getSharedData.ts

javascript 复制代码
export const getAnchorArticleData = cache(async () => {
  return await getAnchorArticle()
})

export const getMaterialCategoryData = cache(async () => {
  return await getMaterialCategory()
})

export const getTechnologyCategoryData = cache(async () => {
  return await getTechnologyCategory()
})

这样组件可以只获取它们需要的数据:

javascript 复制代码
const SomeComponent = async () => {
  // 只获取需要的数据
  const anchorArticle = await getAnchorArticleData()
  
  return (
    // ... component JSX
  )
相关推荐
江城开朗的豌豆4 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆6 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er13 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子14 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆18 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山26 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45335 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^37 分钟前
条件渲染 v-show与v-if
前端