Nitro is a universal server toolkit that adds server-side rendering (SSR), API routes, server middleware and other backend capabiltiies to any Vite application. It powers frameworks like Nuxt and deploys to Vercel with zero configuration.
By adding Nitro to your existing Vite project, you get:
- Server-Side Rendering (SSR): Render pages dynamically on the server for improved SEO and faster initial page loads
- API Routes: Create backend endpoints using file-based routing in the api/ or routes/ directory
- Vercel Functions: Your server routes automatically become Vercel Functions with Fluid compute
Getting started
To add server capabilities to an existing Vite project, install the nitro package:
Dynamic routes
Create a file in the api/ directory to define a route:
This creates a GET /api/hello endpoint.
import { defineHandler } from'nitro/h3';
Nitro supports file-based routing in the api/ or routes/ directory. Each file becomes an API endpoint based on its path.
exportdefaultdefineHandler(() =>'Hello from the server!');
Use square brackets [param] for dynamic URL segments. Access params via event.context.params:
exportdefaultdefineHandler((event) => {
const { id } =event.context.params!;
This creates a GET /api/users/:id endpoint (e.g., /api/users/123).
});
return { userId: id };
Suffix your file with the HTTP method (.get.ts, .post.ts, .put.ts, .delete.ts):
import { defineHandler } from'nitro/h3';
import { defineHandler } from'nitro/h3';
exportdefaultdefineHandler(async (event) => {
constbody=awaitevent.req.json();
return { message:'User created', data: body };
});
When you deploy a Vite + Nitro app to Vercel, your server routes automatically become Vercel Functions with Fluid compute enabled by default.
Vercel Functions scale based on traffic demands, preventing failures during peak hours while minimizing costs during periods of low activity.
With Nitro on Vercel, you get:
- Scaling to zero when not in use
- Automatic scaling with traffic increases
- Support for standard Web APIs, such as URLPattern, Response, and more
Learn more about Vercel Functions
Server-Side Rendering (SSR)
Nitro enables SSR for any Vite app with minimal configuration. The setup varies by UI framework.
Install the required dependencies:
pnpm
bun
pnpm i nitro react react-dom @vitejs/plugin-react
Create the shared app component:
Update your Vite config to add the Nitro and React plugins:
exportdefaultdefineConfig({
});
plugins: [nitro(),react()],
import { nitro } from'nitro/vite';
import { defineConfig } from'vite';
import react from'@vitejs/plugin-react';
Our Services
Digital Marketing
<>
import { useState } from'react';
return (
const [count,setCount] =useState(0);
);
Create the server entry file that renders your app to HTML:
import'@vitejs/plugin-react/preamble';
Vite + Nitro + React
exportfunctionApp() {
import { App } from'./app.tsx';
Create the client entry file that handles hydration:
}
import { hydrateRoot } from'react-dom/client';
hydrateRoot(document.querySelector('#app')!,
import serverAssets from'./entry-server?assets=ssr';
import'./styles.css';
import { renderToReadableStream } from'react-dom/server.edge';
exportdefault {
returnnewResponse(
name="viewport"
/>
))}
{ headers: { 'Content-Type':'text/html;charset=utf-8' } },