AI 摘要：本文通过五个真实案例（Vio、DoorDash、Preply、GeekyAnts、Inngest）探讨了 React 和 Next.js 在大型项目中的高级实践，涵盖性能优化（如 INP、LCP 指标）、服务端渲染（SSR）与客户端渲染（CSR）的平衡、缓存策略、状态管理改进及开发者体验提升，最终提炼出 2022-2025 年的行业最佳实践。

1. Introduction
• React 和 Next.js 被用于高性能项目，案例聚焦性能优化（如 INP、LCP）、SSR/CSR 权衡、缓存策略及开发者体验改进。

2. Featured Case Studies
• Vio：通过代码分割、事件优化和状态管理，将 INP 从 380ms 降至 175ms。
• 关键措施：性能分析、React.lazy() 懒加载、事件防抖、React.memo 减少重渲染。
• DoorDash：从 CSR 迁移至 Next.js SSR，LCP 提升 65%-67%，页面加载速度提高 12%-15%。
• 策略：增量迁移、SSR 懒加载、共享状态桥接（AppContext）。
• Preply：未使用 React Server Components 仍优化 INP 至 200ms 以下，预估年节省 20 万美元。
• 方法：性能分析、React 18 并发特性（Suspense）、事件处理优化、代码分割。
• GeekyAnts：升级至 Next.js 13 并采用 RSC，Lighthouse 分数从 50 提升至 90+。
• 改进：服务端组件减少客户端 JS、数据获取迁移至服务端、流式 SSR。
• Inngest：采用 Next.js App Router 实现即时 UX 和更好 DX。
• 亮点：静态预渲染 + 流式 SSR、嵌套布局状态保留、缓存控制优化。

3. Aggregated Takeaways (2022–2025)
• 性能优化：聚焦 Core Web Vitals（如 INP、LCP），减少 JS 负载，拆分长任务。
• SSR/CSR 平衡：SSR 用于首屏和 SEO，CSR 增强交互性，渐进式水合提升体验。
• 缓存策略：CDN 边缘缓存、Next.js 数据缓存、客户端状态缓存（如 React Query）。
• 状态管理简化：减少全局状态，优先使用 Context 和专用库（如 Zustand、React Query）。
• 开发者体验：Next.js 约定式路由、TurboPack 加速构建、Suspense/Error Boundaries 标准化。
• 可访问性：语义化 HTML、ARIA 标签、键盘导航测试。
• 用户体验：快速加载（如 DoorDash 的 LCP 优化）、无缝导航（流式渲染）、跨设备一致性。

4. Conclusion
• 核心建议：测量关键指标、采用 Next.js 高级功能（RSC、App Router）、合理缓存、简化状态管理，并将可访问性和 UX 纳入设计阶段。

AI 摘要（注：重复多次的内容会手动删一下）：本期 Frontend Focus 涵盖前端领域多项重要动态，包括浏览器默认样式更新、桌面应用开发框架对比、AI 对开发者角色的影响，以及最新的工具和教程资源。核心内容涉及 H1 元素样式变更、Tauri 与 Electron 的对比、CSS 新特性实践指南，以及 Astro 5.7 等工具更新。

1. 社区动态
• H1 元素默认样式变更：浏览器正在调整嵌套标题的默认样式，开发者需关注兼容性问题（Simon Pieters）。
• Edge 134 性能显著提升，Opera Mini 浏览器集成 AI 助手。
• 🙁 和许多其他人一样，我们很遗憾地听到 Adam Argyle 不再在 Google 工作。 多年来，他一直是 Chrome 的 CSS 开发者代言人，是一股重要的正义力量。
• Astro 5.7 发布: 引入了 SVG 组件、实验性字体 API 支持、错误修复等。

2. 博文与工具
• Item Flow 本文解释了什么是 Item Flow，以及它对 Flexbox 和 Grid 的影响。 #css
• CSS shape() 函数：创建自适应比例的形状（Simon Fraser）。
• 在 2025 中使用 currentColor: 当然，自定义属性也可以做同样的事情，但 Chris 着眼于这个关键字替代方案的效用。
• 无障碍暗色模式设计：优化暗色主题的对比度与可读性，如何制作适合所有人的深色模式的指南（Alex Williams）。 #设计。
• 一个好的副业的幸福禅 —— “享受探索可能性的自由，并愉快地追随任何引人注目的奇思妙想——这就是一个好的副业的幸福禅意。”
• 使用 Chrome 的（预览版）Prompt API 进行数据汇总
• 减小网站上 HTML 文件大小的五种方法 #性能优化 #html
• 设计师 Noah Davis 批评细字体对可用性的负面影响。
• Tailwind CSS 速查表：覆盖 v3/v4 的实用类检索工具（kombai）。

MDN Web Docs

Default styles for h1 elements are changing | MDN Blog

Browsers are starting to roll out changes in default UA styles for nested section headings. This post describes the incoming changes, how to identify if it's an issue on your websites, and hints for conformant and better-structured pages.

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 ...