前端周刊 #47：Next 与 React 安全修复、Node 26.1 FFI、Rolldown 1.0 与 TanStack 投影 React

本周快讯

Next.js 与 React 五月安全发布 Vercel 协调发布 Next.js 15.5.18、16.2.6 与 react-server-dom-* 的 19.0.6/19.1.7/19.2.6 补丁，覆盖 RSC DoS、中间件与预取绕过、SSRF、缓存投毒、CSP nonce 相关 XSS 等 13 项公告；官方强调应升级而非仅依赖 WAF。
上游 React 安全公告 React Server Components 包存在可导致拒绝服务的漏洞（CVE-2026-23870），需连同框架一并升级受影响的 react-server-dom-webpack 等包。
Node.js 26.1.0 与实验性 node:ffi 在 26.0 之后快速跟进 26.1，核心亮点是 import { dlopen } from 'node:ffi' 以调用原生动态库，受 --experimental-ffi 与权限模型约束。
Rolldown 1.0 稳定 VoidZero 宣布 Rolldown 1.0 达到稳定，强调与 esbuild 相当的打包速度与 Rollup 插件生态兼容，适合作为生产级 bundler 评估。
Electron 42 与 postinstall 调整新版不再在 postinstall 中下载 Electron 二进制，首次运行时再拉取，以缓解供应链攻击面；桌面应用团队需关注 CI 与首启体验。
Expo SDK 56 Beta 携带 React Native 0.85.2 与 React 19.2.3，Expo UI 的 SwiftUI/Jetpack Compose 路径宣告稳定，并带来通用组件、内联模块与预编译 XCFrameworks 等大量更新。
Chrome 148 新特性支持仅名称的容器查询、音视频懒加载、DevTools 更新，并随「Prompt API」等把端侧大模型能力进一步推向 Web（同时引发隐私与体积讨论）。
Astro 6.3：实验性高级路由可用 astro/hono 组合自有中间件与 Astro 内置 handler，便于把 Hono、代理与健康路由编排进同一流水线。
React Router 7.15.0 发布一组面向下一轮 major（预计一至两个月内的 v8）的 API 修整，已在用的应用建议阅读 changelog 预留迁移窗口。
Vercel 开源 deepsec 面向超大仓库的安全扫描 harness，结合静态候选文件与多阶段 Agent 调查，可选扩展到 Sandbox 并行。

技术文章

五月必读：Next.js 协调安全发布与 RSC 上游漏洞

这是一次跨框架、跨运行时的大规模安全修补。

除上游 React RSC 相关的 CVE-2026-23870（DoS）外，Next.js 侧列出中间件授权绕过、WebSocket SSRF、缓存投毒与 CSP nonce XSS 等条目。next@<=15.5.17 → 15.5.18，next@<=16.2.5 → 16.2.6。

官方明确这些逻辑问题无法被 WAF 可靠拦截，使用 App Router 与中间件鉴权的产品应把升级纳入当周最高优先级。

投影 React：当 TanStack Start 把「公共 API」重建成 9KB 级运行时

Tanner Linsley 记录用规范驱动提示工程，为 TanStack Start 生成 React 公 API 投影。

核心 gzip 约 7–9KB，相对完整 react-dom/client 的 ~60KB 有数量级下降，并在其个人站与 tanstack.com 实网运行。

对关注包体与边缘渲染的读者，这是把「发行版」与「你的真实形状」解耦的完整案例。

import { redact } from '@tanstack/redact/vite';

// 接近完整 React 或从最小核按需打开 portal/context/suspense 等
redact({ preset: 'full' });
redact({ preset: 'nano' });

谁拥有树？把 RSC 当成协议而不是唯一架构

TanStack 博客辨析「服务器拥有整棵树 + use client 打孔」只是 RSC 的一种编排方式。

对典型仪表盘这类客户端掌控交互状态的场景，强行把路由翻到服务端 Owned 往往得不偿失。

文章引入 Composite Components：服务端返回 Flight 字节流，客户端解码进已由 Router/Query 管理的树里。

从 React 到 Web Components：一次瘦身约 100KB 的迁移记

Evil Martians 的 Pavel Grinchenko 分享将站点从 React 迁到原生 Web Components 的经验。

用自研极薄 nanotags 做标签化组件包装，比坚持 react-dom 全量运行时更贴近目标站点的真实需求。

若你在 Astro 或岛屿架构之间犹豫，可以把此文当作一条工程味足的参照曲线。

用媒体查询区间语法消灭「恰好等于断点」的双规则重叠

Ahmad Shadeed 复盘经典痛点：同时写 min-width 与 max-width 在恰好等于边界像素时可能两套规则都生效。

区间写法 (width >= 600px) and (width <= 1200px) 可读性更好，也能平滑过渡到容器查询的同构心智模型。

现代浏览器支持已宽，适合作为团队 CSS 规范里「新代码默认采用」的一条。

@media (width >= 600px) and (width <= 1200px) {
  .layout {
    grid-template-columns: repeat(12, 1fr);
  }
}

纯 CSS 的组合校验：`:nth-child(... of …)` 与 `:has()` 联用

Preethi Sam 在 Frontend Masters 博客展示如何用 of 选择器在表单里统计有效/无效字段。

在没有 JavaScript 的情况下驱动错误汇总与提交按钮态，对多步表单、动态增删行更稳。

作为渐进增强手段非常亮眼，复杂场景仍应搭配 aria-live 等提示。

伦敦 Node.js 协作峰会纪要：发布节奏、可迭代流与 AI 贡献治理

官方博文总结了四月伦敦峰会讨论方向。

涵盖 Node 27 起的新发布节拍、node:stream/iter 可迭代流提案、OpenTelemetry 与 AI 生成贡献审核策略。

对维护大型 Node 服务或参与可观测性库的同学，可把它当作与核心团队决策同步的速记板。

工具推荐

deepsec：在自有基础设施上跑「Agent + 静态扫描」混合安全研究

Vercel 开源的 deepsec 以仓库内 npx deepsec init 为入口。

在本地或可选 Sandboxes fan-out 上长时跑多阶段流程：先粗粒度找出安全敏感文件，再让编码 Agent 深追数据流。

适合开源后端与大型 monorepo，可通过自定义 matcher 插件把鉴权模式编码进去。

ShaderPad：几行脚本把 WebGL Shader 嵌进页面

Riley J. Shaw 维护的轻量无依赖 WebGL shader 包装，主打「去掉样板代码」。

若你想给落地页加背景流体、噪声或品牌粒子效果，又不想引入整套 Three.js，这类工具能把创意验证成本压到数小时以内。

发布前请评估低端 GPU、热耗与 prefers-reduced-motion 回退。

AddFox：基于 Rsbuild 的浏览器扩展开发框架

面向 Chromium 与 Firefox 的扩展开发脚手架，内置 HMR、测试流与多框架友好假设。

对要把「网页里成熟的组件资产」复用到扩展侧的团队，可显著减少 webpack 时代遗留配置债。

若你们已在 Rsbuild/Rspack 生态里，这会比从零拼 boilerplate 更一致。

shadcn CLI：package.json imports 与 registry `target` 别名

最新 CLI 支持基于 package.json#imports 安装组件、重写导入路径。

为 registry 项增加 files[].target 映射，方便把同一组件分发到 components/ui 与自定义目录。

对运营多个设计系统包或 monorepo 内嵌文档站的平台工程团队，这能减少手工改 import 的机械劳动。

Fancy Frames：纯 CSS 生成波浪/锯齿相框

Temani Afif 的生成器用 clip-path 组合控制波长、幅度与圆角，无需素材 PNG。

适合博客配图、活动海报壳层或轻运营物料，记得与内容安全策略及打印样式交叉验证。

别把可读性牺牲在装饰之下。

MapLibre React Native：矢量瓦片地图与跨端一致交互

从 rnmapbox 分叉演进而来，现在聚焦 MapLibre 原生 SDK。

强调矢量瓦片、离线包与社区驱动路线图，适合配送轨迹、户外赛事或城市可视化场景。

仍需评估在中国等地区地图合规与数据源策略。

版本发布

Next.js 15.5.18 / 16.2.6 与 React 19 补丁线

配合五月安全公告同时标记，务必连同 react、react-dom 与对应的 react-server-dom-* 包升到矩阵指定版本。

升级后建议针对 middleware、动态路由、WebSocket 代理与图片优化路径跑一遍端到端与负载测试。

若使用第三方 i18n 或自定义缓存键，请额外验证 prefetch 与 next/image 行为。

Node.js 26.1.0（Current）与实验性 FFI

在 26.0 引入默认 Temporal 之后，26.1 把实验性 node:ffi 作为最受瞩目的 API 表面。

dlopen 装载动态库并按签名调用原生符号，启用需要 --experimental-ffi，若打开权限模型还需 --allow-ffi。

同版本还带 crypto.randomUUIDv7()、fs.stat 的 signal 取消等增量改进。

import { dlopen } from 'node:ffi';

const { functions } = dlopen('/usr/lib/libSystem.B.dylib', {
  sqrt: { parameters: ['f64'], result: 'f64' },
});

console.log(functions.sqrt(2));