react server components

双语

JSX Over The Wire — overreacted
2 months ago
- 传统REST API在原始数据模型与UI特定视图模型之间的张力中挣扎，导致效率低下和维护挑战。
- 前端后端（BFF）模式通过添加返回屏幕特定视图模型的服务器层解决了此问题，支持单次往返数据加载。
- 视图模型可分解为可复用的函数，这些函数镜像组件树，使得自包含的UI元素能够加载自身数据。
- 服务器驱动UI（SDUI）将UI视为JSON，允许服务器返回整个屏幕树，这些树在客户端渲染而不丢失状态。
- React Server Components统一了这些理念：服务器组件充当发出JSON的视图模型，客户端组件消费它们，确保服务器数据与UI之间的直接耦合，并在重新获取时保留客户端状态。
Progressive JSON — overreacted
2 months ago
- Progressive JSON extends the idea of Progressive JPEGs to JSON data transfer by sending data breadth-first with placeholders that get filled later.
- Streaming JSON parsers allow partial object trees but result in malformed data (e.g., missing fields), making them hard to use in applications.
- Progressive JSON uses placeholders (like $1, $2, $3) that resolve as data arrives, enabling the client to handle incomplete parts as Promises.
- Inlining combines related data into fewer chunks when possible for efficiency, while outlining allows deduplication and handling cyclic objects.
- React Server Components (RSC) implement progressive JSON streaming, where <Suspense> boundaries control UI reveal despite out-of-order data arrival.
- Progressive streaming decouples data delivery from UI display, preventing arbitrary page jumps and improving perceived performance.
- Streaming data is beneficial when a server delay blocks client processing, but it requires a programming model like React Suspense to handle incomplete info gracefully.
React for Two Computers — overreacted
2 months ago
- 这篇文章探讨了函数调用（动词/配方）和标签（名词/蓝图）之间的概念差异，展示了标签如何表示被动且可自由解释的潜在计算。
- 它引入了一个跨时间和空间分割计算的框架，使用“早期”和“晚期”世界来表示两台计算机上的分布式计算，而标签则作为它们之间的桥梁。
- 关键概念包括“组件”（首字母大写的函数，嵌入而非内省参数）和“原语”（小写函数，需要立即求值），以及用于跨越计算机边界的“import tag”和“import rpc”等机制。
- 文章展示了如何将类似React的程序拆分为早期和晚期组件，其中interpret()从外到内分解组件，而perform()从内到外处理原语，从而实现了无需传统网络调用的客户端-服务器架构。
- 最后，它介绍了高级思想，如“use client”和“use server”指令、流式执行、有状态的晚期世界以及缓存，展示了这些概念对React Server Components和现代Web开发的实际影响。
Impossible Components — overreacted
2 months ago
- React Server Components allow splitting a component into a backend part (data loading) and a frontend part (interactivity), enabling self-contained ‘impossible components’ that span both computers.
- Data flows from the backend (server) to the frontend (client) as props, preserving React’s top-down data flow and ensuring the backend is the source of truth.
- This pattern supports local state and local data isolation: each component instance manages its own data and state without coordination, enabling independent reuse.
- Props from the backend can be used later on the frontend for interactive behaviors (e.g., event handlers), not just initial HTML rendering.
- Beyond simple values, props can include arrays, objects, or JSX, allowing components like sortable or filterable lists to be composed from backend data and frontend logic.
- The ‘use client’ directive marks frontend components that rely on state or effects, while backend components use server-only APIs (filesystem, ORM, etc.).
- Composing backend and frontend parts into self-contained blocks (e.g., <PostPreview>) lets developers build interactive UIs in a single roundtrip, without extra requests.
- The division between frontend and backend is physical but composable tools enable a unified component model that matches how users perceive UI chunks (sections, cards, lists).
- Future possibilities include adding mutations via ‘use server’, dynamic per-request filtering, or loading placeholders directly from backend resources.
Functional HTML — overreacted
2 months ago
- This article reimagines HTML as a functional, programmable language by introducing custom tags via JavaScript functions that run on the server during serialization.
- Objects can be passed as first-class values to tags, and the primary output format is a JSON tree instead of traditional HTML, allowing richer data representation.
- Async server tags are supported with await, making data fetching part of the HTML structure.
- Client References (via 'use client' directive) enable sending code to the client, representing a first-class script tag.
- Server References (via 'use server' directive) allow clients to call server functions, acting as a first-class fetch API.
- Client Tags are server-encountered references that defer execution to the client, enabling full-stack components.
- Full-Stack Tags compose server and client tags, creating components that span both environments with encapsulated logic.
- Streaming is supported with placeholders for intentional loading states, avoiding page jumps.
- The JSON output format facilitates efficient caching by separating data from code, enabling cacheable partials with dynamic holes.
- The article concludes that this design effectively reinvents React Server Components as a functional, composable version of HTML.
RSC for Astro Developers — overreacted
2 months ago
- Astro 组件 (.astro) 仅在服务器端运行，无法交互；客户端岛屿（React、Vue）处理交互性，但不能嵌套 Astro 组件。
- React 服务端组件 (RSC) 采用类似的思维模型：通过 'use client' 指令区分服务端组件和客户端组件，两者之间没有语法差异。
- RSC 允许不使用服务端或客户端特定功能的组件从任一端导入，使边界变得灵活。
- RSC 解决了 Astro 的限制：分形岛屿（带上下文的嵌套交互性）、无需完全重新加载页面的类 SPA 导航，以及可原地刷新的服务端部分。
- RSC 输出 React 树（HTML 或 JSON），实现可组合的服务端-客户端交错，而 Astro 输出带有一次性交接模型的 HTML。
- RSC 是较低层的实现（Next.js 或 Parcel RSC 实现），而 Astro 是一个框架；Astro 可能为类似概念提供更温和的入门方式。
One Roundtrip Per Navigation — overreacted
2 months ago
- Traditional HTML apps fetch all data in a single roundtrip by embedding data in the HTML itself.
- Client-side REST APIs often require multiple fetches per page, leading to client/server waterfalls and inefficiency.
- Colocating data fetching inside UI components (e.g., via `useEffect` or queries) worsens waterfall problems and makes optimization hard.
- Client loaders (e.g., React Router's `clientLoader`) reduce waterfalls but sacrifice colocation of data requirements with components.
- Server loaders (e.g., `getServerSideProps`) restore single-roundtrip efficiency and server-side optimization levers, but still lack colocation.
- Server Functions (e.g., TanStack or React Server Functions) enable colocation again but reintroduce client/server waterfalls.
- GraphQL Fragments achieve both colocation and single-roundtrip loading by composing data dependencies at build time.
- React Server Components (RSC) combine the efficiency of server loaders with colocation, ensuring one request per navigation and no client/server waterfalls.
Why Does RSC Integrate with a Bundler? — overreacted
2 months ago
- RSC与打包工具集成，高效地序列化和反序列化模块，避免代码重复和网络瀑布流。
- RSC实现包含两个内部包：用于序列化的react-server和用于反序列化的react-client。
- 特定于打包工具的绑定（例如，针对Parcel、Webpack、Vite）处理'use client'入口点和模块解析。
- 打包工具通过将代码预打包成块来实现高效加载，减少对每个文件进行网络请求的需求。
- 该过程涉及序列化服务器端输出并在客户端反序列化，以恢复像JSX这样的交互式组件。
RSC for LISP Developers — overreacted
2 months ago
- LISP 通过引用来将代码视为数据，允许代码不被求值并作为一等原语进行操作。
- React 服务端组件 (RSC) 使用 'use client' 指令从服务器引用客户端代码，将其视为不透明数据，类似于 LISP 的引用。
- RSC 能够模块化地组合服务端和客户端行为，服务端部分保证单轮次执行和渐进式流式传输。
- RSC 不如 LISP 引用强大，因为求值过程由 React 预设，缺乏用于转换代码的元编程能力。
- LISP 拥有更丰富的多环境代码组合解决方案，如 Electric，但 JavaScript 开发者对此不太熟悉。
How Imports Work in RSC — overreacted
2 months ago
- React Server Components 通过使用 'use client' 和 'use server' 指令扩展了 JavaScript 模块系统，以管理客户端/服务器分离。
- JavaScript 模块是单例的——每个模块最多执行一次，防止代码重复并确保私有状态得以保留。
- 在后端和前端之间共享代码涉及两个独立的模块系统；重用代码分别存在于每个环境中。
- 来自不兼容代码（例如在前端使用 'fs'）的构建失败是有益的，因为它们迫使开发人员尽早解决冲突。
- 'server-only' 和 'client-only' 毒丸作为标记，如果模块被拉入错误的环境，则会失败构建，并且会传递性地传播。
- 'use client' 指令创建了一个通往前端的大门，允许后端代码引用前端模块，而无需将它们引入后端。
- 'use server' 指令创建了一个通往后端的大门，允许前端代码引用后端模块，而无需将它们引入前端。
- 这些机制共同让开发人员将 RSC 应用程序视为一个跨越两台计算机的单一程序，具有独立的模块系统和受控的数据传递。
Introducing RSC Explorer — overreacted
2 months ago
- RSC Explorer 是一个基于浏览器的工具，用于可视化 React 服务器组件（RSC）协议，它使用 React 用于读写协议的相同包构建。
- 该工具演示了流式异步组件、服务器操作和无需框架的路由刷新等关键 RSC 概念，帮助开发者理解底层协议。
- 它包含多个示例，如简单的 Hello World、带有 Suspense 的异步组件、带有客户端组件的计数器、使用 'use server' 的表单操作，以及保留客户端状态的路由刷新。
- RSC Explorer 完全在客户端运行（服务器运行在 worker 中），无需网络请求即可模拟 RSC 通信，并允许在其他页面上嵌入代码片段。
- 人们对 RSC 兴趣的增加源于一项关键安全漏洞的披露，这促使了该教育工具的开发。

react server components

JSX Over The Wire — overreacted

Progressive JSON — overreacted

React for Two Computers — overreacted

Impossible Components — overreacted

Functional HTML — overreacted

RSC for Astro Developers — overreacted

One Roundtrip Per Navigation — overreacted

Why Does RSC Integrate with a Bundler? — overreacted

RSC for LISP Developers — overreacted

How Imports Work in RSC — overreacted

Introducing RSC Explorer — overreacted