尤雨溪强烈推荐的这个库你一定要知道 ️️️

前言

今天带大家看看尤雨溪在推特墙裂推荐的 Nitro v3 这个库！

往期精彩推荐

• 字节也在用的 @tanstack/react-query 到底有多好用！
• 告别复制粘贴，这个高效的 Vite 插件让我摸鱼时间更充足了！
• 原来在字节写代码就是这么朴实无华！
• 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军

正文

Nitro 是一个全栈框架，兼容任何运行时。

Nitro v3 可以通过 Vite 插件形式集成，扩展 dev 服务器为生产服务器，支持 vite build 统一输出前后端代码。

快速启动与渐进集成

Nitro 支持 npx create-nitro-app 一键创建项目，或在现有 Vite 项目中安装 nitro 包并添加插件：

import { defineConfig } from "vite";
import { nitro } from "nitro/vite";

export default defineConfig({
  plugins: [nitro()]
});

这样配置后 Vite 的 HMR 无缝延伸至后端路由和 API，可以在单一项目中处理前后端逻辑，无需切换工具链。

路由与生命周期优化

Nitro 的文件系统路由（routes/目录）与 Vite 的模块解析结合，自动映射API端点，支持动态参数、方法特定（如.get.ts）和中间件。

routes/
  api/
    test.ts      <-- /api/test
  hello.get.ts   <-- /hello (GET only)
  hello.post.ts  <-- /hello (POST only)

文件中只需要通过函数暴露对象即可：

import { defineHandler } from "nitro/h3";

export default defineHandler(() => {
  return { hello: "API" };
});

生命周期从路由规则到全局中间件，再到自定义服务器入口和渲染器，确保请求高效处理。

渲染器与SSR支持

Nitro 的渲染器（renderer）捕捉未匹配路由，支持自动 index.html 或自定义模板，使用 Rendu 预处理器注入动态内容。自定义渲染器通过defineRenderHandler生成响应！

插件与扩展性

Nitro 插件（plugins/目录）在启动时运行，支持钩子（如close、error、request）扩展行为。

// nitro.config.ts
export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook("close", async () => {
    // Will run when nitro is being closed
  });
})

支持 hook 时机如下：

"close", () => {}
"error", (error, { event? }) => {}
"render:response", (response, { event }) => {}
"request", (event) => {}
"beforeResponse", (event, { body }) => {}
"afterResponse", (event, { body }) => {}

最后

Nitro v3 与 Vite 搭配，提供高效的全栈方案，从快速启动到路由渲染，再到插件扩展，可以全方位的优化工作流！

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

往期精彩推荐

• 字节也在用的 @tanstack/react-query 到底有多好用！
• 告别复制粘贴，这个高效的 Vite 插件让我摸鱼时间更充足了！
• 原来在字节写代码就是这么朴实无华！
• 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军