阿里云ODPS普惠算力再升级,Data+AI全产品降价低至59元! 了解详情
写点什么

在 RSC 中使用 StoreBook

作者:Michael Shilman

  • 2024-07-18
    北京
  • 本文字数:2655 字

    阅读完需:约 9 分钟

大小:974.47K时长:05:32
在RSC中使用StoreBook

将 Storybook 升级到 8.0alpha 版本,可支持 React 服务端组件。

 

在基于 React 的 Web UI 开发中,React服务端组件(RSC)是一种新的编程模式。与传统的 React “客户端”组件不同,它们只在服务器上进行渲染。这为性能和安全方面带来了一些好处,但与当下的各种 React 工具和库相比,其用法有很大的差异。

 

其中受影响最大的领域之一就是基于组件驱动的开发和测试。诸如 Storybook、Testing Library 以及用于组件测试的工具 Playwright 和 Cypress,全都是假设用户组件在浏览器(或 JSDom)中进行渲染。但是对于服务器组件来说,情况就不再是这样了。

 

因此,这就引出了一个问题:该如何独立进行服务器端组件的开发和测试呢?

 

今天,我很高兴地宣布,Storybook 的 Next.js 框架将提供 RSC 支持,算是作为上述问题的一个尝试性的解决方案。由于它是一个纯客户端实现,所以能很好的集成和适配整个 Storybook 插件生态。

 

本文介绍了它的工作原理和用法,并提供了一个简单的教程。

 

服务端来自火星,客户端来自金星

 

RSC 与传统的客户端组件有两个主要区别,如下代码所示:

 

// ApiCard.tsximport { ComponentProps } from 'react';import { Card } from './Card';import { findById } from './db';export async function DbCard({ id }: {id: number}) {  let props;  try {    const contact = await findById(id);    props = { state: 'success', contact };  } catch (e) {    props = { state: 'error' };  }  return <Card {...props} />;}
复制代码

 

  1. 第一个区别是:服务端组件是异步的,而这在客户端上是不支持的。

  2. 第二个区别是:服务端组件可以直接访问 Node 代码,在这个示例中,函数 findById 封装了一个经过验证的数据库连接。

 

为了实现这两点,RSC 在底层做了很多事情。这段代码只能在服务器上运行,并生成一个静态的、类似 JSON 的结构,然后通过流的方式传输给客户端。

 

Storybook 是一个纯客户端应用。它是一个用于生成纯 HTML/CSS/JS 的静态构建,没有任何 Node 的影子!因此,如果要支持 RSC,就需要解决两个问题:要么找出如何在客户端上渲染 RSC 的方法,要么为服务端渲染重构 Storybook。

 

我们首先专注于客户端方法。这是因为,我们希望最大程度地减少对用户的影响,毕竟这些用户已经在当前的架构下编写了数百万个用例和上百个插件。

 

那么,它到底是如何实现的呢?

 

开始支持异步

 

如何支持异步组件是在客户端上渲染 RSC 组件的第一个挑战。幸运的是,在 Next.js 最新依赖的 React 版本中已经(非官方地)支持了这一功能。我们要特别感谢JamesManningRjulRuss,他们为此提供了一个简单的解决方案!

 

import { Suspense } from 'react';export const ClientContact = ({ id }) => (  <Suspense><DbCard id={id} /></Suspense>);
复制代码

 

从 Storybook 8 开始,通过在.storybook/main.js 中开启 experimentalNextRSC 特性,@storybook/nextjs 就会自动将你的 story 封装在 Suspense 中:

 

// .storybook/main.jsexport default {  features: {    experimentalNextRSC: true,  }};
复制代码

 

在 @storybook/nextjs 7.x 版本中,你也可以手动将 RSC story 封装到装饰器中。

 

注意:这个解决方案目前还不能在其他 Storybook React 框架(例如 react-vite、react-webpack5)中使用,因为它们没有像 Next.js 那样使用 canary 版的 React。希望下一个 React 版本能消除这个限制。

 

模拟和加载

解决异步问题只解决了一半的问题。为了完成组件数据的填充,我们的 DbCard 组件是通过调用 Node 代码获取数据。然而,Node 代码在浏览器中无法执行,这就导致了问题!

 

为了解决这个问题,我们建议搭建一个干净的数据访问层。这也是RSC架构师推荐的最佳实践。

 

创建好数据访问层后,你就可以在浏览器中通过模拟来运行它,并精确控制返回的数据,展示不同的用户界面状态(加载中、错误、成功等)。

 

你可以使用模块模拟网络模拟来模拟数据访问层,这两种方式 Storybook 都支持。

 

模块模拟:有一个叫做storybook-addon-module-mock的社区插件,它提供了和 jest.mock(仅适用于 Webpack 项目)类似的模拟功能。当然,也可以使用webpack/vite的别名实现一个简单但功能有限的解决方案。我们计划在 Storybook 的未来版本中提供更便捷的模块模拟功能。

 

网络 API 模拟:为了模拟网络请求,我们推荐使用Mock Service Worker (msw)。当然 Storybook 还支持许多其他网络GraphQL模拟插件。

 

回到上面的例子,下面是一个使用了 storybook-addon-module-mock 的 story:

 

// DbCard.stories.jsimport { StoryObj, Meta } from '@storybook/react';import { createMock } from 'storybook-addon-module-mock';import { DbCard } from './DbCard';import * as db from './db';export default { component: DbCard };export const Success {  args: { id: 1 },  parameters: {    moduleMock: {      mock: () => {        const mock = createMock(db, 'findById');        mock.mockReturnValue(Promise.resolve({          name: 'Beyonce',          img: 'https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg',          tel: '+123 456 789',          email: 'b@beyonce.com'        }))        return [mock];      },    },  },}
复制代码

 

完整 Demo:API+模块模拟

要了解完整示例,包括使用模块模拟数据库版本和使用 MSW2 模拟 API 版本,请查看完整StorybookRSC示例GitHub仓库

 


有什么问题吗?

在本文中,我们成功地在 Storybook 中为 RSC 编写了第一个 story,并展示了这一切是在幕后是如何实现的。

 

虽然所有事情都相当的简单明了,但是这种方法还是会有一些限制:

 

  1. 保真度:纯客户端实现与在应用程序中实际运行的服务端流式 RSC 相比依然存在显著的差异。

  2. 便利性:这里的模拟解决方案肯定还有改进的空间。当前的模块模拟解决方案不仅冗长,且与 Storybook 的参数/控件也兼容的不够好。

 

我们计划在后续的迭代中解决这两个问题,这也是为什么我们将此解决方案标记为实验性的原因。

 

现在就在 Storybook 中进行 RSC 开发吧

 

要使用 Storybook 进行 RSC 开发,请将 Storybook 升级到 8.0-alpha 版本:

 

npx storybook@next upgrade --prerelease
复制代码

 

然后,在项目的.storybook/main.ts 文件中将实验性功能开启:

 

// .storybook/main.jsexport default {  features: {    experimentalNextRSC: true,    },  };}
复制代码

 

更多信息,请参阅 @storybook/nextjs 的README文档

 

原文链接:

https://storybook.js.org/blog/storybook-react-server-components/

 

2024-07-18 13:328230

评论

发布
暂无评论
发现更多内容

云小课|打造企业数据“高内聚,低耦合”--试试GaussDB(DWS)逻辑集群,实现数据物理隔离

华为云开发者联盟

EI企业智能 数据仓库服务GaussDB(DWS) 逻辑集群

Apache APISIX request_uri 变量控制不当,存在路径穿透风险公告(CVE-2021-43557)

API7.ai 技术团队

Apache 云原生 漏洞修复 Apache APISIX ingress-controller

破解数据匮乏现状:纵向联邦学习场景下的逻辑回归(LR)

华为云开发者联盟

联邦学习 数据隐私 数据安全 逻辑回归 纵向联邦学习

使用kubeadm快速搭建K8s环境

walker12138

《致命愿望》:与魔鬼签订契约

爱奇艺技术产品团队

【干货】大数据开发之Spark总结

@零度

大数据 spark

【活动预告】下一代数据平台走向何方?

SphereEx

大数据 大前端 ShardingSphere SphereEx 线上沙龙

Tapdata “设擂招贤”携手 LeetCode 举办全球极客技术竞赛

tapdata

基于CarbonData的电信时空大数据探索

华为云开发者联盟

大数据 网络 电信 CarbonData 无线通信网络

前端开发规范之代码规范

@零度

大前端

「Oracle」Oracle 数据库基本概念

恒生LIGHT云社区

数据库 oracle

Java 项目中使用 Resilience4j 框架实现异步超时处理

码语者

Java TimeLimiter 超时管理

HBase 的协处理器详细剖析

五分钟学大数据

11月日更

如何与 Dapr 集成打造 Apache APISIX 网关控制器

API7.ai 技术团队

云原生 网关 dapr Apache APISIX ingress-controller

基于内存通信的gRPC调用

Robert Lu

gRPC Go 语言

CWE4.6标准中加入 OWASP 2021 TOP10

华为云开发者联盟

漏洞 cwe 软件安全 CWE4.6 OWASP

加速云原生应用落地,焱融 YRCloudFile 与天翼云完成兼容性认证

焱融科技

云计算 分布式 云原生 高性能 文件存储

ETL工具算法构建企业级数据仓库五步法

大数据技术指南

11月日更

Java开发基础之开发环境搭建

@零度

JAVA开发

架构实战营模块 9 作业指导

华仔

架构实战营

模块四 千万级学生管理系统的考试试卷存储方案

Kvrocks 发布 Exporter 工具

Kvrocks

redis Prometheus kvrocks

质量基础设施“一站式”线上平台搭建,NQI一站式综合平台解决方案

电微13828808271

高可用是什么意思啊?行云管家支持高可用部署吗?

行云管家

高可用 服务器 IT运维

Apache Tomcat 7.x安全加固指南

喀拉峻

网络安全 安全 信息安全

10年阿里人告诉你:秒杀系统设计就该这么玩

热爱java的分享家

Java 架构 程序人生 编程语言 经验分享

龙智携手Atlassian亮相GOPS全球运维大会,助力企业高效开发与运维

龙智—DevSecOps解决方案

运维 运维大会 GOPS大会

本周话题:元宇宙到底是不是未来?

InfoQ写作社区官方

话题讨论 元宇宙

Linux学习有用吗?《Linux一学就会》教你如何学会Linux

侠盗安全

Linux 运维 云计算架构师 linux电子书

微信 ClickHouse 实时数仓的最佳实践

科技热闻

【活动预告】Apache ShardingSphere 5.0.0 全新 Database Plus 架构演进

SphereEx

开源社区 ShardingSphere TiDB SphereEx 线下沙龙

在RSC中使用StoreBook_大前端_InfoQ精选文章