AI 摘要：本期 React Status 虽因复活节缩短篇幅：5 个团队的高级 React 实战案例、Dan Abramov 对服务端-客户端数据传递的思考、AI 聊天界面开发指南等。

1. 专题文章
• 《Advanced React in the Wild》
• Addy Osmani 和 Hassan Djirdeh 汇总 5 个工程团队的 React 极限优化案例，涵盖性能、Core Web Vitals 和缓存等实战成果。
• 《JSX Over the Wire》
• Dan Abramov 探讨服务端到客户端数据传递的演进，对比 REST 与 BFF（Backend For Frontend）模式，提出基于 React 组件树的 ViewModel 设计思路。
• 《React.js AI Chat with OpenAI API》
• Robin Wieruch 为 OpenAI 的模型（例如新的仅限 API 的 GPT 4.1 模型）创建自己的流式聊天 UI，提供了一些入门指南。

2. 工具与库更新
• Next.js 15.3（Turbopack 生产构建 alpha 支持）
• react-photo-sphere-viewer（360° 照片查看组件） 一个演示
• Agent Hooks（将 React Hooks 变成 LLM 工具）

3. 社区动态
• Grep 搜索引擎从 CRA 迁移至 Next.js —— Vercel 团队分享从 Create React App 迁移的技术细节。
• TC39 撤回 records/tuples 提案。

overreacted.io

JSX Over The Wire — overreacted

Turning your API inside-out.

到这一步，也终于该写写代码了，当然，还有半篇文章都没提起的 AI。
毫无疑问，AI 可以为自学过程带来相当之大的提升，它解决了许多痛点，尤其是在从零到一的方面。
其实对于大部分初学者，最难的地方也就是从零到一，因为真正优秀的新手教程实在太少了，那种上来先让你背「gank 到底有几种方法」的就不多提了，即使是实践为主的教程，你学习的时候，也不是在做你真正想去做的那个东西，这就很难让人坚持下来。
AI 的出现改变了这一切，这就是前面我为什么说要准备自己的项目，在 AI 的帮助下，你完全可以定制一个专属自己的新手教程，并且把控其中的每一个教学节点，不用再去翻文档，不用再先做一个跟你毫无关系的东西，现在你可以同时做两件事：解决自己的实际问题，并且在这个过程中学习你想学的技术。

AI 摘要：本文探讨了在 AI 时代如何高效自学技术，强调学习动机、问题导向和 AI 辅助的重要性。作者通过编程案例（如构建 to-do list）拆解自学核心逻辑，提出「技术是手段而非目的」，并分享如何利用 AI 工具优化学习路径，最终实现从入门到精通的成长闭环。

AI 摘要：本期 Node Weekly 聚焦 JavaScript 生态的最新动态，涵盖 Fastify + React 的高性能组合、Prisma ORM、Bun 运行时等工具更新。同时推荐了 TypeScript 新书、云服务集成方案及 AI 开发工具等，为开发者提供全面的技术参考。

1. 更新动态
• Fastify + React – 比 Next.js 快 7 倍？ —— Fastify 框架的 Vite 插件 @fastify/react 发布 1.0 版本，支持快速构建高性能 React 应用，测试显示其速度可达 Next.js 的 7 倍。
• 比 Next.js 更轻但具有出色文档的 Waku 也值得一试。
• Lexe ：将 Node 应用打包为单文件（<10MB），基于 Amazon LLRT 引擎，但仅支持部分 Node API。
• Prisma ORM 6.6.0 ：引入了一个新的 prisma-client 生成器，该生成器更加灵活，并带有 ESM 支持，以及 MCP 服务器的预览版，可让 AI 代理和工具管理 Postgres。
• Chrono 2.8 ：自然语言日期解析库，支持灵活的时间描述。
• 其他工具更新：OpenAI Node 库支持 GPT-4.1、Tesseract.js 6.0.1（OCR）、Javet（Node.js 嵌入 Java）。

2. 社区动态
• 新书发布 ：Dr. Axel Rauschmayer 的 Exploring TypeScript: TS 5.8 Edition 可免费在线阅读
• ESLint 新增批量抑制规则功能，便于管理严格代码检查。
• npm 注册表短暂故障导致访问令牌丢失，已修复。
• Bun 1.2.9 发布，持续提升 Node.js 兼容性。
• Cloudflare 开发者周：支持 Next.js 一键部署至 Workers，集成全栈应用部署。
• Google 推出 Firebase Studio：AI 开发环境类似 Cursor 或 v0。

3. 资源推荐
•  NPM 安全最佳实践 OWASP 备忘单系列
• 在 Bun 中调试 JavaScript 内存泄漏

Bun

Debugging JavaScript Memory Leaks

Use v8 heap snapshot API + Chrome DevTools to compare heap snapshots

AI 摘要：文章高度评价了 Owen 在其博客上发布的《对「假开源」事件的反省》。文章结构清晰，针对用户提出的问题逐一回应，并提供验证链接。Owen 坦诚承认沟通不足，并通过行动回应质疑，展现了开放、透明的态度。文章末尾分享了关于开源协议的知识，具有借鉴意义。总的来说，该文章是处理争议、与用户沟通的优秀范例，强调了开发者以开放态度面对社区的重要性。

AI 摘要：作者反思两年前发表的"前端开发终结"一文，并重新评估 AI 对软件开发行业的实际影响。尽管 AI 工具在编程中的应用越来越广泛，但它们更多是作为开发者的辅助工具而非替代品。文章分析了 AI 工具的局限性、当前就业市场状况，并对开发者行业的未来给出了谨慎乐观的预测，鼓励有志成为开发者的人不要因 AI 炒作而气馁。

1. 回顾与现状
• 2023 年 3 月作者发表了 "The End of Front-End Development" 一文，当时许多人预测 AI 将很快取代人类开发者
• 两年后的今天，作者重新评估这一预测是否准确，我们是否已进入"后开发者时代"

2. 公司与 AI 的使用情况
• Forbes 报道谷歌 25% 的代码由 AI 编写，但这并不意味着 AI 独立完成了 25% 的工作
• AI 仍需人类开发者引导、编辑和整合输出结果
• 尚未有大型科技公司完全用 AI 替代开发团队
• 声称能完全替代人类开发者的初创公司产品（如 Devin）在实际使用中遇到很多问题

3. 作者的 AI 工具使用体验
• 使用 Cursor 这类 AI 驱动的 IDE 确实能显著提高效率
• 但 AI 需要持续引导，类似于高速公路上的"巡航控制"，仍需人类"掌握方向盘"
• 如果不懂编码，无法识别 AI 输出中的细微但关键的问题
• 某些任务 AI 表现出色，但对很多任务而言，人工编码仍然更快更有效
• 理想的工作方式是人机配合，针对不同任务选择最佳解决方案

4. 当前的就业市场状况
• 就业市场仍然艰难，但并非因为公司用 AI 取代了开发者
• 困难的原因包括：宏观经济因素、大规模裁员导致市场上有大量高素质开发者、对 AI 能力的过度期待

5. 未来展望
• 公司仍然需要人类开发者构建产品
• AI 支持者仍在宣称 AI 即将取代人类开发者，但实际证据不支持这一观点
• AI 模型确实在不断进步，但更多是渐进式改进而非革命性突破
• 开发者可能面临的真正风险是过度依赖 AI 而不理解底层代码，从而失去必要的技能
• AI 实际上可以成为学习编程的强大辅助工具

6. 结论与建议
• 作者预测在不久的将来可能会出现"开发者复兴"
• 熟练的开发者配合强大的 LLM 可以创造惊人成果
• 鼓励有志从事软件开发的人不要因 AI 炒作而气馁
• 公司仍在招聘，这种情况在可预见的未来不会停止

Joshwcomeau

The Post-Developer Era • Josh W. Comeau

When OpenAI released GPT-4 back in March 2023, they kickstarted the AI revolution. The consensus online was that front-end development jobs would be totally eliminated within a year or two.Well, it’s been more than two years since then, and I thought it was…

AI 摘要：本文探讨了通过 CSS 和 JavaScript 实现高级自定义光标样式的方法，强调在提升视觉效果的同时需兼顾用户体验和可访问性，强调谨慎替换原生功能，保持默认可访问性，避免过度设计。

CSS-Tricks

Next Level CSS Styling for Cursors | CSS-Tricks

Custom cursors with CSS are great, but we can take things to the next level with JavaScript. Using JavaScript, we can transition between cursor states, place dynamic text within the cursor, apply complex animations, and apply filters.

If you take one thing away from this tutorial, it should be that authorization should be as close as possible to your sensitive data. This means that you should have authorization checks in your API, Service, and Data Access Layers. This is the most important part of your application and should be implemented in a way that is secure and maintainable.

AI 摘要：本文深入探讨了在 Next.js 应用中实现授权的多层次策略，重点围绕 React Server Components 和 Server Actions 展开。作者强调授权应尽可能靠近数据源（如 API 层、服务层和数据访问层），并详细分析了路由、UI 和中间件中的授权实现方案及其权衡，同时指出中间件授权的性能隐患和局限性。

1. 数据访问授权
• 核心原则：授权应在 API 层作为读写操作的第一道防线，通过自定义查询函数和服务端动作（Server Actions）实现。
• 代码示例：
• getPosts 和 createPost 函数中通过 getAuth 校验用户会话，未授权时抛出错误或重定向。
• 使用 cache 优化会话验证性能，避免重复数据库查询。
• 分层架构：
• 服务层：处理业务逻辑和精细权限（如角色/所有者校验）。
• 数据访问层：作为最后防线，但建议权限逻辑集中在服务层。

2. 路由授权
• 页面组件检查：在 Server Component 的入口（如 PostsPage ）调用 getAuthOrRedirect 实现基础防护
• 布局组件优化：
• 通过 AuthLayout 集中管理路由组（如 (authenticated)）的授权，提升开发效率但存在安全风险（恶意用户可能绕过布局直接访问页面）
• 权衡策略：建议结合后端授权（策略1）或在页面组件重复校验（策略2）
• 多角色扩展：如 AdminLayout 实现管理员路由隔离

3. UI 授权
• 根据 useAuth 动态隐藏/禁用 UI 元素（如删除按钮），但强调这仅是辅助手段，核心安全仍需依赖后端校验

4. 中间件授权
• 性能问题：避免中间件中直接查询数据库，仅做轻量级检查（如会话 Cookie 存在性）
• 边缘运行时限制：不支持部分 Node.js 功能（如 Prisma ORM 需适配）
• 建议将关键授权逻辑保留在 API/服务层

www.robinwieruch.de

Authorization in Next.js

Learn about authorization in Next.js when using React Server Components, Server Actions, and Next's App Router ...

AI 摘要：本文通过实际案例演示了 7 种减少 React 应用打包体积的方法，最终实现 30% 的优化效果。核心策略包括消除副作用代码、清理未使用的依赖、避免 Barrel 文件、优化导出方式、替换重型库、动态加载非关键资源等，并提供了详细的代码对比和工具推荐。

1. 前言
• 问题背景：随着应用迭代，打包体积膨胀导致构建变慢、用户体验下降。
• 优化前 vs 优化后：从 283.39 kB 降至 198.33 kB，减少 30%。
2. 具体优化步骤
• Step 1: 消除文件副作用
• 移除 window 全局副作用代码，避免强制打包未使用的文件。
• Step 2: 清理未使用的文件和依赖
• 使用 npx knip 检测并删除冗余代码（如未使用的 lodash-es ）。
• Step 3: 避免 Barrel 文件
• 直接导入组件而非通过 index.js 聚合，减少不必要的文件处理。
• Step 4: 直接导出函数而非对象/类
• 仅导出被调用的函数（如 getTimeInFormat ），避免打包未使用的方法。
• Step 5: 替换重型库
• 用轻量级 dayjs 替代 moment.js ，显著减小体积。
• Step 6: 动态加载非关键包
• 按需加载 fuse.js（搜索功能库），拆分初始包。
• Step 7: 动态加载非关键组件
• 使用 React.lazy 延迟加载非首屏组件（如 Dashboard）。
3. 额外建议
• 在 package.json 标记 "sideEffects": false 增强 Tree-Shaking。
• 使用 Bundlewatch 监控打包体积。

FrontendJoy

✨ How I Reduced My React Bundle Size by 30% (With Real Examples)

A step-by-step guide to shrinking your React bundle with a real example