Vite SSR HTML

Open in Playground Source

使用原生 HTML、Vite 和 Nitro 进行服务端渲染。

app

entry-server.ts

routes

index.html

package.json

tsconfig.json

vite.config.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 模板，并在服务器内容插入的位置添加  注释

创建服务器入口，用于获取数据并返回流

添加 API 路由以提供服务器端数据

#工作原理

index.html 文件包含一个  注释，用于标记插入服务器渲染内容的位置。Nitro 会将此注释替换为服务器入口的输出内容。

服务器入口导出一个包含 fetch 方法的对象。它使用 Nitro 的内部 fetch 调用 /quote API 路由，然后返回一个 ReadableStream，以每个单词之间间隔 50ms 的速度逐字发出名言文本。

名言路由从 GitHub 获取名言 JSON 文件，缓存结果，然后返回一条随机名言。服务器入口调用此路由来获取页面内容。

#了解更多

Edit this page

Previous Vite RSC Next 使用 Preact 进行 SSR

On this page