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

了解更多