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

server/2024/11/15 4:32:31/

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)

http://www.ppmy.cn/server/142022.html

相关文章

【开源社区】使用 ES 实现多种地理位置检索

文章目录 1、地理位置检索常用的两种数据类型1.1 geo_point&#xff1a;1.2 geo_shape 2、Geo_point Based Request2.1 矩形查询&#xff08;geo_bounding box&#xff09;2.2 半径查询&#xff08;geo_distance&#xff09;2.3 多边形&#xff08;geo_polygon&#xff09; 3、…

第 7 章 - GO语言 流程控制

在Go语言中&#xff0c;流程控制结构是编程的基础&#xff0c;用于控制程序的执行顺序。下面分别介绍if语句、switch语句以及for循环。 if 语句 if语句用于基于一个条件表达式的真假来决定是否执行一段代码。Go语言中的if语句具有简洁的语法&#xff0c;并且要求条件表达式必…

【海外SRC漏洞挖掘】谷歌语法发现XSS+Waf Bypass

海外SRC赏金挖掘专栏 在学习SRC&#xff0c;漏洞挖掘&#xff0c;外网打点&#xff0c;渗透测试&#xff0c;攻防打点等的过程中&#xff0c;我很喜欢看一些国外的漏洞报告&#xff0c;总能通过国外的赏金大牛&#xff0c;黑客分享中学习到很多东西&#xff0c;有的是一些新的信…

WebAPI性能监控-MiniProfiler与Swagger集成

Net8_WebAPI性能监控-MiniProfiler与Swagger集成 要在.NET Core项目中集成MiniProfiler和Swagger&#xff0c;可以按照以下步骤操作&#xff1a; 安装NuGet包&#xff1a; 安装MiniProfiler.AspNetCore.Mvc包以集成MiniProfiler。安装MiniProfiler.EntityFrameworkCore包以监…

RabbitMQ的死信队列

1.死信的概念 死信简单理解就是因为种种原因&#xff0c;无法被消费的消息. 有死信自然就有死信队列&#xff0c;消息再一个队列中编程死信之后&#xff0c;它能被重新发送到另一个交换器中&#xff0c;这个交换器就是DLX&#xff0c;绑定DLX的队列&#xff0c;就被称为死信队…

技术专家之路:深耕高门槛领域的策略

技术专家之路&#xff1a;深耕高门槛领域的策略 引言 随着科技行业的飞速发展&#xff0c;技术专家成为了职场上炙手可热的角色。他们不仅享有高度的职业满意度&#xff0c;还能获得优渥的薪酬。本文旨在探讨如何通过选择并深耕高门槛领域&#xff0c;实现技术专家的职业目标…

从ROS Bag文件提取点云数据并保存为PCD格式进行处理 ros ubuntu

从ROS Bag文件提取点云数据并保存为PCD格式进行处理 要从ROS bag文件中有效地提取点云数据并利用PCL库对其进行进一步处理&#xff0c;需要通过一系列精确且专业的操作。下面是一个详细的步骤指南&#xff0c;这些步骤不仅详细介绍了如何操作&#xff0c;而且强调了确保数据处…

Mac打开time machine(时间机器)备份特殊文件

Mac 打开time machine&#xff08;时间机器&#xff09;备份特殊文件 设置“时间机器”的作用具体操作办法 前言&#xff1a;今天在使用Nas同步文件时发现有部分重要文件没有同步&#xff0c;为了省事手动拖拽复制文件&#xff0c;导致其中一份非常重要的文件丢失&#xff0c;尝…