Vite SSR HTML
使用原生 HTML、Vite 和 Nitro 进行服务端渲染。
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<Uint8Array> {
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();
},
});
}
此示例使用服务器端数据渲染 HTML 模板,并逐词流式传输响应。它演示了如何在不使用框架的情况下使用 Nitro 的 Vite SSR 集成。
概述
添加 Nitro Vite 插件以启用 SSR
创建 HTML 模板,包含 <!--ssr-outlet--> 注释,用于标记服务器内容的插入位置
创建服务器入口,获取数据并返回流
添加 API 路由,用于服务器端数据
工作原理
index.html 文件包含 <!--ssr-outlet--> 注释,用于标记服务器渲染内容的插入位置。Nitro 会使用服务器入口的输出来替换此注释。
服务器入口导出一个包含 fetch 方法的对象。它使用 Nitro 的内部 fetch 调用 /quote API 路由,然后返回一个 ReadableStream,以逐词发送名言文本,每个词之间延迟 50 毫秒。
名言路由从 GitHub 获取包含名言的 JSON 文件,缓存结果,并返回随机名言。服务器入口调用此路由来获取页面内容。