2025-第三十六周

该周报主要为各个地方内容的汇总整理

技术

使用 Vite 构建 SSR：自定义 getStaticProps 替代方案

本文详细介绍了如何从 Next.js 迁移到自定义 Vite SSR 设置，重点替换了 getStaticProps 和 getServerSideProps 功能。通过构建 Express 服务器、Vite 集成、自定义数据加载函数以及利用 React 18 流式渲染，实现了一个高性能、灵活且可控的服务器端渲染方案。

• 🚀 迁移挑战与动机
  主要挑战是替换 Next.js 的 getStaticProps 和 getServerSideProps，但自定义 Vite SSR 提供了完全控制、更优性能、架构灵活性和 React 18 流式支持。

• 🏗️ 系统架构组成
  系统包含四个核心部分：Express 服务器、服务器入口点（entry-server.tsx）、客户端入口点（entry-client.tsx）以及自定义数据加载函数 loadDataForUrl。

• ⚙️ Express 服务器设置
  服务器根据环境（开发或生产）差异化处理请求，开发时使用 Vite 开发服务器，生产时服务预构建的静态资源。

• 🔄 Vite 开发服务器集成
  开发模式下利用 Vite 中间件实现热模块替换，生产模式下使用压缩和静态文件服务来优化性能。

• 📦 自定义数据加载函数
  loadDataForUrl 函数根据 URL 模式从数据库、内部 API 或请求中获取数据，完全替代了 Next.js 的数据获取方法。

• 🌊 流式 SSR 渲染管道
  流程包括：加载数据、将数据安全序列化到 HTML 中，以及使用 React 18 的 renderToPipeableStream 进行流式渲染以优化性能。

• ⚛️ React 服务端与客户端入口
  服务器入口使用 renderToPipeableStream 渲染应用，客户端入口使用 hydrateRoot 进行水解，并均接收初始数据。

• 📝 在应用中使用服务器数据
  React 应用通过 initialData 属性接收服务器加载的数据，可用于直接渲染或管理客户端状态。

• 📁 Vite 配置与构建脚本
  需要配置 Vite 以支持 React 和 SSR，并设置构建脚本分别构建客户端和服务端包。

• 🧩 高级模式与错误处理
  支持基于路由的正则匹配加载数据，并在客户端实现错误边界与加载状态，以提升用户体验。

• 🚄 性能优化策略
  可通过缓存策略（如为数据设置短期缓存）和 React 18 流式 SSR（提升 TTFB 和渐进加载）来优化性能。

• 🐳 部署与环境变量
  需要正确配置环境变量（如 API URL、数据库连接和缓存开关），并提供 Dockerfile 示例以便于部署。

• 📊 与 Next.js 的对比
  自定义方案在开发速度、构建速度和灵活性上更优，但复杂度稍高，Next.js 则拥有更庞大的生态系统。

• ✅ 方案优势与总结
  该方案提供了优异的性能、完整的控制权和良好的开发体验，适用于从简单博客到复杂应用的各种场景，并已在 Patron 中实践验证。

每位开发者都应尝试的顶级 Chrome API

Chrome API 为开发者提供了强大的浏览器扩展开发能力，通过核心接口实现高效、跨设备且安全的用户体验增强。

• 🚀 Chrome API 是构建浏览器扩展的核心，支持创建功能丰富的应用级工具
• ⚡ 提升开发效率，减少重复代码，内置标签管理、存储和通知等功能
• 🔄 chrome.storage.sync 实现跨设备数据同步，提升用户体验连续性
• 🔒 内置权限和沙箱机制，保障扩展安全性
• 🌐 API 设计兼容多浏览器（Firefox/Edge/Safari），便于技能迁移
• 📑 chrome.tabs 支持程序化标签管理，可实现会话保存和恢复功能
• 💾 chrome.storage 提供数据持久化存储，支持本地和同步存储模式
• 🛠️ chrome.scripting 允许安全注入脚本修改页面内容
• ⏰ chrome.alarms 提供可靠的任务调度，替代传统定时器
• 🖱️ chrome.contextMenus 可扩展右键菜单，添加上下文功能选项
• 🔔 chrome.notifications 实现非侵入式用户通知
• 🔗 chrome.runtime 管理扩展组件间通信和生命周期事件
• 🛡️ chrome.declarativeNetRequest 提供隐私安全的网络请求控制
• 📌 chrome.sidePanel 创建侧边栏界面，增强浏览体验
• 📚 chrome.bookmarks 支持书签的全面管理操作

用 JavaScript Beacon 说再见 | Hemath 的博客

本文介绍了在用户离开网页时向服务器发送数据的可靠方法，重点推荐使用 JavaScript 的 Beacon API 替代传统的 XMLHTTPRequest 方案。

• 🚫 传统 XMLHTTPRequest 在 beforeunload 事件中发送请求不可靠，可能被浏览器取消
• ⚡ 浏览器为避免用户体验延迟，不会等待 JavaScript 完全执行
• 📨 Beacon API 采用 fire-and-forget 机制，请求发送后立即结束执行
• 🎯 使用方法简单：navigator.sendBeacon(url, data)
• 📏 限制：仅支持 POST 请求且数据量较小
• 💡 适用场景：页面关闭时的数据分析、自动登出等
• 🔄 也可用于常规数据同步，如实时保存用户输入
• 📊 特别适合不需要等待响应的场景（如数据分析）

大规模自托管 Next.js 完整指南

本文全面介绍了大规模自托管 Next.js 的生产环境部署挑战与解决方案，重点针对多副本水平扩展场景下的核心问题。

• 🐳 必须改造官方 Dockerfile：添加健康检查实现零停机部署，避免重启循环和僵尸容器
• 🌐 反向代理需禁用响应缓冲：配置 X-Accel-Buffering:no 确保 React Suspense 和流式响应正常工作
• 🧠 分布式缓存必须使用 Redis：替代本地文件缓存，解决多副本数据不一致问题
• 🖼️ 图像优化需外部处理：采用 ImageKit 或自托管 IPX 服务，避免重复处理造成的资源浪费
• 📦 CDN 必须遵循 Cache-Control：根据动态路由、认证状态等头部正确缓存内容
• 🔑 服务器动作需固定加密密钥：设置 NEXT_SERVER_ACTIONS_ENCRYPTION_KEY 避免部署版本不一致错误
• ⚠️ 注意 monorepo 陷阱：缓存处理器文件重复会导致连接失败，需使用绝对路径和 webpack 插件
• 📊 性能优化关键：监控 Redis 内存使用，控制缓存条目大小（建议 < 1MB），预处理数据再缓存
• 🔒 安全注意事项：服务器动作应视为公开 API 端点，必须实施身份验证和授权检查
• ✅ 生产清单：包含负载测试、副本健康监控、缓存命中率告警和回滚策略验证

Next.js 令人抓狂 - Dominik 的博客

作者分享在 Next.js 中配置生产环境日志的挫败经历，指出框架设计缺陷导致开发效率低下，并对比 SvelteKit 提出批评。

• 😠 作者因 Next.js 的日志配置问题感到愤怒，决定撰写博客宣泄情绪
• 🐛 Next.js 默认只在开发环境启用日志，生产环境需自行配置且过程复杂
• 🤦 中间件功能设计存在严重缺陷：仅支持 4 个参数传递且无法链式调用
• 🔄 尝试使用 AsyncLocalStorage 实现请求追踪时遭遇运行时兼容性问题
• 📝 最终被迫通过请求头传递 requestId 的迂回方案实现基础日志功能
• 🚫 自定义服务器方案同样失效，AsyncLocalStorage 在页面组件中无法获取
• ⚖️ 对比 SvelteKit 的 locals 设计，批评 Next.js 缺乏合理的上下文传递机制
• 🐢 指责 Next.js 团队对 GitHub issues 响应迟缓，大量问题多年未解决
• 💔 总结表示不再愿意使用 Next.js，认为其存在大量边界案例和设计缺陷

工具

mediabunny

Mediabunny 是一个纯 JavaScript/TypeScript 编写的高性能媒体工具库，专为浏览器和 Node.js 环境设计，提供媒体文件的读取、写入、转换及编解码等一站式解决方案，具有零依赖、高性能和高度可摇树优化等特点。

• 📦 核心功能：支持读取和写入 MP4、WebM、MP3 等多种媒体格式，内置 25+ 音视频编解码器，并支持基于 WebCodecs 的硬件加速。
• ⚡ 高性能与精确性：提供微秒级精度的读写操作，支持内存高效的流式 I/O 处理大文件。
• 🌐 跨平台运行：可在现代浏览器和 Node.js 环境中使用，完全基于 TypeScript 实现，无任何外部依赖。
• 🧩 高度模块化：极度可摇树优化，最小压缩后仅 5kB，确保用户只引入所需功能。
• 🔄 媒体转换与处理：提供转码、转封装、裁剪、旋转、重采样等丰富的媒体处理 API。
• 📖 完善的文档与示例：提供详细的使用文档、代码示例和开发指南，支持快速上手和深度定制。

CR-Mentor

CR-Mentor 是一个基于 AI 和知识库的智能代码审查与开发者成长平台，旨在将代码审查转化为团队知识积累和个人提升的宝贵机会。

• 🧠 深度代码理解：集成 Deepwiki 技术，可自动追踪和分析代码变更相关的所有文件，实现全局视角的代码分析
• 📊 开发者画像：通过分析 GitHub 用户全部提交历史，自动生成包含技术优势、常见问题与成长曲线的个人能力画像
• 💾 知识库管理：提供 MCP 知识管理能力，支持一键保存审查中的亮点与最佳实践，形成可检索复用的团队知识资产
• ⚙️ 自定义规则：支持上传团队专属代码标准和文档，智能代理能自动识别潜在风险并提供专业建议
• 🚀 快速开始：项目采用多模块架构（前端、智能代理、Koa 后端），支持通过 pnpm 快速部署和体验

nstr

该文章介绍了一个名为 nstr 的 JavaScript 库，它能自动检测并修复浮点数运算中出现的精度问题，从而避免在用户界面中显示不美观的小数点后多余的数字。

• 🧠 智能精度检测：自动识别并清理浮点数运算产生的精度误差（如 0.1 + 0.2 输出 "0.3"），同时保留用户有意输入的高精度数字。
• 🎯 解决实际问题：有效解决了 UI 开发中的常见痛点，例如 CSS 变换属性中的坐标值和价格显示中出现的长小数。
• 🛠️ 优于传统方案：不同于 toFixed() 或 toPrecision() 需要预设精度，nstr 能自动为每个数字选择最佳精度。
• 📦 易于安装使用：通过 npm、pnpm 或 yarn 即可安装，使用简单，只需用 nstr() 函数包装任何数字即可。
• ⚙️ 可定制选项：提供 threshold（检测敏感度）和 maxDecimals（最大保留小数位数）等高级选项以满足不同需求。
• 🔍 工作原理：通过将数字转换为固定小数位字符串，检测连续的 0 或 9 模式，并进行智能截断或舍入来清理结果。

fastmcp

FastMCP 是一个基于 TypeScript 的框架，用于构建支持客户端会话的 MCP（Model Context Protocol）服务器。它简化了 MCP 服务器的开发流程，提供了丰富的功能，如工具、资源、提示词定义、身份验证、会话管理、多媒体内容处理等，并支持多种传输协议和部署模式。

• 🚀 功能丰富：支持工具、资源、提示词、身份验证、会话、图像/音频内容、嵌入式资源、日志记录、错误处理、HTTP 流式传输、无状态模式等。
• 📦 易于使用：提供简洁的 API，快速构建 MCP 服务器，无需处理底层实现细节。
• 🌐 多传输支持：支持 stdio、HTTP 流式传输和 SSE，适用于本地和远程部署。
• 🔒 身份验证与授权：支持会话身份验证和工具访问控制，确保安全性。
• 📡 流式输出与进度通知：工具支持流式输出和进度报告，提升用户体验。
• 🔧 可定制日志与错误处理：支持自定义日志记录器和用户友好的错误提示。
• 🧩 资源与模板：支持动态资源加载和模板，提供自动补全功能。
• 🤖 提示词与自动补全：支持提示词模板和参数自动补全，增强 LLM 交互。
• ⚡ 无状态模式：支持无状态部署，适合服务器 less 环境和负载均衡。
• 📚 生态与展示：已有多个第三方项目基于 FastMCP 开发，社区活跃。

更新

重混新构想：V3 版将弃用 React，转向 Preact 分支 - InfoQ

Remix 团队宣布正在开发 v3 版本，将放弃 React 转而采用 Preact 分支，以掌握全栈控制权并减少关键依赖。新版本遵循四大原则：模型优先开发、优先使用 Web API、运行时优于构建步骤、避免依赖。开发者社区反应两极，部分人赞赏其革新精神，部分人质疑模型优先原则受 Shopify 影响。预览版尚未发布，进展将在 Remix Jam 会议公布。

• 🚀 Remix v3 将用 Preact 分支替代 React，实现全栈自主控制
• 🧩 新版本四大原则：模型优先/Web API 优先/轻构建/去依赖化
• 🌐 开发者评价分化：有人赞赏革新勇气，有人质疑 AI 优先策略
• 🏢 Shopify 收购背景引发对"模型优先"原则的猜测

AI

cc-switch

CC Switch 是一个用于管理和切换 Claude Code 与 Codex 不同供应商配置的开源桌面应用程序，采用 Tauri 2.0 框架开发，具有轻量快速、界面美观的特点。

• 🚀 技术架构迁移 - 从 Electron 完全迁移到 Tauri 2.0，应用体积减少 85%，启动速度提升 10 倍
• 🔄 双平台支持 - 同时支持 Claude Code 和 Codex 的供应商切换与配置管理
• 🎯 一键切换 - 提供预设供应商配置（Qwen coder、kimi k2、智谱 GLM 等），只需填写 API Key 即可快速配置
• 📁 本地存储 - 所有配置信息存储在本地 ~/.cc-switch/config.json，确保数据隐私安全
• 🖥️ 跨平台兼容 - 支持 Windows、macOS 和 Linux 主流操作系统
• ⚙️ 开发友好 - 基于 React 18 + TypeScript + Rust 技术栈，提供完整的开发环境和构建脚本

serena

Serena 是一个强大的、免费开源的编码智能体工具包，它能将大型语言模型（LLM）转变为一个功能齐全、可直接在代码库上工作的智能体。它通过提供类似 IDE 的语义化代码检索和编辑工具，极大地提升了 LLM 在处理代码时的效率和精准度。

• 🚀 核心能力：可将任何 LLM 转变为功能齐全的编码智能体，直接操作你的代码库。
• 🛠️ 独特优势：不绑定特定 LLM、框架或界面，使用方式高度灵活；提供类似 IDE 的语义级代码检索和编辑工具。
• 💰 免费开源：完全免费，旨在免费增强现有 LLM 的编码能力。
• 🔍 工作原理：基于语言服务器协议（LSP），提供符号级别的精准代码查找（如 find_symbol）和编辑（如 insert_after_symbol）能力，避免低效的全文件读取和字符串替换。
• 🤖 集成方式：可通过模型上下文协议（MCP）与多种客户端集成，包括 Claude Code、Claude Desktop、终端客户端（如 Cursor、VSCode）以及本地 GUI（如 OpenWebUI）。
• 🌐 语言支持：支持众多编程语言（如 Python, JavaScript, Go, Rust, Java 等），并可轻松扩展支持更多语言。
• 📊 实际效果：用户反馈其能显著提升智能体在复杂代码库中的工作效率，堪称“游戏规则改变者”。
• ⚙️ 高度可定制：可通过上下文（Contexts）和模式（Modes）调整行为，并支持自定义工具和配置。
• ⚠️ 注意事项：在处理极小型项目或从零开始时优势不明显；建议在项目结构清晰、有良好测试覆盖率的代码库中使用以获得最佳效果。

Awesome-Nano-Banana-images

这是一个收集和展示 Google 图像生成模型 Nano-Banana 在各种任务场景下应用案例的 GitHub 项目仓库。它包含了大量由社区用户分享的、结合了具体提示词和输入输出示例的创意用法。

• 🍌 项目介绍: 一个名为 "Awesome-Nano-Banana-images" 的 GitHub 代码库，专门收集和展示 Google Nano-Banana 模型的惊艳图像生成与编辑案例。
• ⭐ 项目热度: 该项目获得了较高的社区关注度，拥有 1.8k stars 和 190 forks，显示出其受欢迎程度。
• 📚 内容来源: 案例主要来源于 Twitter/X、小红书等社交媒体平台，由社区用户创作和分享。
• 🖼️ 案例丰富: 提供了多达 47 个详细的使用示例，涵盖了从角色设计、照片修复、风格转换、到信息图生成等极其广泛的应用场景。
• 🛠️ 实用指南: 每个例子都包含了所需的输入类型（如上传图片）、具体的提示词（Prompt）以及生成的输出效果，具有很高的参考和学习价值。

llms-txt-hub

llms.txt 是一个用于标准化 LLM 工具和服务如何与项目文档及代码库交互的规范文件。该仓库作为中心枢纽，汇集了各类项目和平台对 llms.txt 的实现和资源。

• 🤖 指导 AI 模型：引导 AI 模型如何解释和使用项目文档。
• 📚 标准化访问：为 LLM 驱动的工具提供标准化的文档访问方式。
• 🔍 提高准确性：提升 AI 关于项目响应的准确性。
• 🛠 增强体验：通过 AI 工具改善开发者体验。
• 🔒 设定边界：为 AI 与内容的交互设定明确的界限。

iphone-mcp

该文本介绍了一个基于 Model Context Protocol (MCP) 的服务端项目，用于通过 Appium 自动化控制 iPhone，支持应用操作、UI 交互和截图等功能。

• 📱 项目简介: 一个用于 iPhone 自动化的 MCP 服务器，通过 Appium 实现应用控制、UI 交互和可流式传输的 HTTP 截图。
• 📋 主要功能: 获取设备信息、列出已安装应用、捕获屏幕截图、列出 UI 元素、执行触摸操作、通过 Bundle ID 启动或切换应用，并提供优化的 XML 输出以减少 token 使用。
• ⚙️ 安装要求: 需要 Python 3.8+、Node.js 和 npm、iPhone UDID、Xcode，并需安装 Appium 及配置 WebDriver Agent。
• 🚀 使用方法: 运行 start.sh 启动服务，默认通过 http://127.0.0.1:8765/mcp 访问，提供多种工具如获取设备信息、截图、点击、滑动、文本输入和应用启动等。
• 🔧 配置方式: 通过修改 start.sh 中的环境变量进行配置，包括设备 UDID（必需）、Appium 及服务器的主机、端口、路径和日志级别等。

ruler

Ruler 是一个用于集中管理 AI 编码助手指令的工具，它通过一个统一的 .ruler/ 目录来存储所有规则，并自动分发到不同 AI 代理的配置文件中，解决了多工具配置不一致和维护复杂的问题。

• 🎯 核心功能：集中管理规则、嵌套规则加载、自动分发配置、MCP 服务器传播和 .gitignore 自动化。
• 📁 目录结构：使用 .ruler/ 目录存放规则文件（如 AGENTS.md）和配置文件（ruler.toml），支持嵌套结构以适应复杂项目。
• ⚙️ 配置管理：通过 ruler.toml 配置默认代理、MCP 服务器和代理特定设置，支持全局和本地配置。
• 🔄 命令使用：ruler init 初始化项目，ruler apply 应用规则，ruler revert 撤销更改，支持多种选项和详细输出。
• 🌐 支持的代理：包括 GitHub Copilot、Claude、Cursor、Aider 等众多 AI 编码工具，每个代理有对应的配置文件和 MCP 设置。

claude-code-memory-bank

Claude Code Memory Bank 是一个专为 Claude Code 设计的结构化记忆管理系统，它通过持久化的项目上下文和自定义工作流命令，解决了多会话间上下文丢失的问题，从而提升 AI 辅助开发的效率和一致性。

• 🧠 持久化上下文管理：通过分层记忆文件（如 projectbrief.md、techContext.md 等）跨会话保存项目知识，避免每次重新开始。
• ⚙️ 自适应初始化：使用 /init-memory-bank 命令自动检测项目状态，智能创建或补全记忆文件结构。
• 🔧 自定义工作流命令：提供 /workflow:understand、/workflow:plan、/workflow:execute 等命令，支持结构化任务执行与记忆更新。
• 📁 项目无关与版本友好：适用于任何技术栈，所有记忆文件均为 Markdown 格式，兼容版本控制系统（如 Git）。
• 🚀 自动化文档生成：在开发过程中自动创建和维护项目文档，形成有价值的副产品。
• 🌐 开源与可扩展：基于 Unlicense 许可开放使用，支持社区贡献和改进，可自定义命令与工作流。

其他

一项美国研究发现，AI 对于非名校的毕业生就业冲击最大，对哈佛、MIT 之类的名校毕业生的就业没有什么冲击。

AI 加剧了普通学校的贬值。

-- 《AI 对就业市场的冲击》

SEO（搜索引擎优化）的游戏早就结束了。

大​部​分​人还​在​拼​命​追求 Google 排名，但​用户其实已经离开了 Google。现在只有 27% 的搜索发生在那里，剩下 73% 都发生​在 TikTok、Amazon、Reddit、YouTube、甚​至 ChatGPT。

-- Neil Patel，美国畅销书作者