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 文件,缓存结果,并返回随机名言。服务器入口调用此路由来获取页面内容。

了解更多