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,该流以每个单词间隔 50ms 的速度逐字发送引用文本。
引用路由从 GitHub 获取包含多个引用的 JSON 文件,缓存结果,并返回一个随机引用。服务器入口调用此路由以获取页面内容。