# Vite SSR HTML
> Server-side rendering with vanilla HTML, Vite, and Nitro.
```html [index.html]
Nitro Quotes
Powered by
Vite
and
Nitro v3.
```
```json [package.json]
{
"type": "module",
"scripts": {
"build": "vite build",
"dev": "vite dev",
"preview": "vite preview"
},
"devDependencies": {
"@tailwindcss/vite": "^4.2.2",
"nitro": "latest",
"tailwindcss": "^4.2.2",
"vite": "latest"
}
}
```
```json [tsconfig.json]
{
"extends": "nitro/tsconfig"
}
```
```ts [vite.config.ts]
import { defineConfig } from "vite";
import { nitro } from "nitro/vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [
nitro({
serverDir: "./",
}),
tailwindcss(),
],
});
```
```ts [app/entry-server.ts]
import { fetch } from "nitro";
export default {
async fetch() {
const quote = (await fetch("/quote").then((res) => res.json())) as {
text: string;
};
return tokenizedStream(quote.text, 50);
},
};
function tokenizedStream(text: string, delay: number): ReadableStream {
const tokens = text.split(" ");
return new ReadableStream({
start(controller) {
let index = 0;
function push() {
if (index < tokens.length) {
const word = tokens[index++] + (index < tokens.length ? " " : "");
controller.enqueue(new TextEncoder().encode(word));
setTimeout(push, delay);
} else {
controller.close();
}
}
push();
},
});
}
```
```ts [routes/quote.ts]
const QUOTES_URL =
"https://github.com/JamesFT/Database-Quotes-JSON/raw/refs/heads/master/quotes.json";
let _quotes: Promise | undefined;
function getQuotes() {
return (_quotes ??= fetch(QUOTES_URL).then((res) => res.json())) as Promise<
{ quoteText: string; quoteAuthor: string }[]
>;
}
export default async function quotesHandler() {
const quotes = await getQuotes();
const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
return Response.json({
text: randomQuote.quoteText,
author: randomQuote.quoteAuthor,
});
}
```
This example renders an HTML template with server-side data and streams the response word by word. It demonstrates how to use Nitro's Vite SSR integration without a framework.
## Overview
1. **Add the Nitro Vite plugin** to enable SSR
2. **Create an HTML template** with a `` comment where server content goes
3. **Create a server entry** that fetches data and returns a stream
4. **Add API routes** for server-side data
## How It Works
The `index.html` file contains an `` comment that marks where server-rendered content will be inserted. Nitro replaces this comment with the output from your server entry.
The server entry exports an object with a `fetch` method. It calls the `/quote` API route using Nitro's internal fetch, then returns a `ReadableStream` that emits the quote text word by word with a 50ms delay between each word.
The quote route fetches a JSON file of quotes from GitHub, caches the result, and returns a random quote. The server entry calls this route to get content for the page.
## Learn More
- [Renderer](/docs/renderer)
- [Server Entry](/docs/server-entry)