AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

服务端来自火星,客户端来自金星,RSC 开发新思路

作者:Michael Shilman

  • 2024-01-13
    北京
  • 本文字数:2804 字

    阅读完需:约 9 分钟

大小:1014.13K时长:05:46
服务端来自火星,客户端来自金星,RSC开发新思路

将 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文档

 

本文是详细介绍 Storybook 8.0 的第一篇文章,在接下来的几个月里我们将发布更多的内容。请关注我们的社交媒体或订阅Storybook新闻资讯,获取 Storybook 下个版本的全部信息!

 

原文地址:https://storybook.js.org/blog/storybook-react-server-components/

 

相关阅读:


从 Styleguidist 迁移到 Storybook

HTML5 Web Sockets 与代理服务器交互

从新 React 文档看未来 Web 的开发趋势

如何快速构建 React 组件库

2024-01-13 08:007684

评论

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

MySQL 驱动中虚引用 GC 耗时优化与源码分析

PPPHUANG

MySQL 性能优化 JVM

好用的图片管理器:ImageRanger Pro Edition激活版

真大的脸盆

图片管理器 图片管理 管理图片 图片处理工具

大咖直播专场 | 当人工智能遇到数据库

KaiwuDB

KaiwuDB DB4AI AI4DB

MarsEdit for Mac 快速方便的博客编辑器

Rose

mac软件下载 MarsEdit下载 博客写作软件

火了!北大学霸爆肝3个月的算法小抄完整笔记,GitHub疯狂转发

Java 数据结构 算法

业务防资损,质量保障的第一要务!

老张

业务价值 交付质量 防资损

负载均衡算法的实现

王玉川

c++ 负载均衡 高可用 高并发 一致性哈希

云计算时代前端如何保证开源代码的安全性

京东科技开发者

前端 安全 京东云 京东科技 企业号 4 月 PK 榜

限失真信源编码

timerring

限失真信源编码

Spring Boot+Nacos+gRPC,一个区别于 OpenFeign 的微服务通信方案!

江南一点雨

gRPC nacos springboot

NCH Switch Plus mac版:音频转换工具

Rose

全能音频格式转换 Switch Plus NCH 软件 NCH Switch Plus mac版

阿里大佬力荐K8s项目实战笔记!图文并茂带你深度解析Kubernetes

Java Kubernetes k8s

Alfred 教程:如何在 Mac 之间同步 Alfred 设置?

Rose

Alfred 5 苹果效率工具 Alfred 教程 Mac 之间同步 Alfred

微前端架构:将应用拆分为多个小型模块,实现模块化设计

没有用户名丶

小程序容器

基于ArkUI框架开发-ImageKnife渲染层重构

OpenHarmony开发者

面试官:聊一聊Spring中Bean的作用域

Java spring bean

5.5G,运营商能接受吗?

脑极体

5.5G

深度学习基础入门篇[一]:神经元简介、单层多层感知机、距离计算方法式、相似度函数

汀丶人工智能

人工智能 机器学习 深度学习 多层感知机

不敲一行代码,用ChatGPT开发App

FN0

移动开发 ChatGPT

单机最快的队列Disruptor解析和使用

小小怪下士

MySQL 索引常见问题汇总,一次性梳理

Java MySQL 数据库 索引

首届“兴智杯”产业赛收官,文心大模型助推产业创新

飞桨PaddlePaddle

人工智能 深度学习 飞桨 产业赋能

One Switch:Mac上一个集合一键切换系统各项功能的神奇菜单

Rose

Mac软件 苹果软件下载 One Switch Mac资源站

深入理解MySQL索引底层数据结构

京东科技开发者

MySQL 京东云 京东技术 企业号 4 月 PK 榜

架构师日记-如何写的一手好代码

京东科技开发者

代码质量 代码 京东云 企业号 4 月 PK 榜

新一代分布式任务调度框架

程序员大彬

Java 面试

肝完阿里最新Java并发编程全优笔记,我成功晋升公司架构组

程序员小毕

Java 源码 程序员 面试 并发编程

JSF预热功能的实践与探索

京东科技开发者

京东云 jsf 企业号 4 月 PK 榜

Meetup 回顾|Data Infra 研究社第十期(含资料发布)

Databend

服务端来自火星,客户端来自金星,RSC开发新思路_跨端开发_InfoQ精选文章