其他集成

由于我们可以控制页面的渲染方式，因此我们可以使用任何想要的工具

事实上，vite-plugin-ssr 已经在各种不同的环境中与各种工具一起使用

视图工具

// /renderer/_default.page.server.js
// Environment: Node.js

import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr";
// 任意 UI 框架（React, Vue, Svelte, ...）
import renderToHtml from "some-ui-framework";

export { render };

async function render(pageContext) {
  // `Page` 是我们的 `*.page.js` 文件的 `export { Page }`；
  // `vite-plugin-ssr` 不对 `Page` 做任何事情，只是让它作为 `pageContex.Page` 可用；
  // 我们可以导出任何我们想要的“Page”值，并用它做任何我们想做的事。
  const { Page } = pageContext;

  // 我们可以控制如何使用 UI 框架将我们的页面渲染为 HTML
  const pageHtml = await renderToHtml(Page);

  // 我们控制整个HTML模板
  return escapeInject`<html>
    <body>
      <head>
        <!-- Some libraries recommend loading code from a CDN -->
        <script src="https://cdn.example.com/some-library/3.3.7/lib.min.js"></script>
      </head>
      <div id="root">
        ${dangerouslySkipEscape(pageHtml)}
      </div>
    </body>
  </html>`;
}

// /renderer/_default.page.client.js
// Environment: Browser

export { render }

import { hydrateDom } from 'some-ui-framework'

async render(pageContex) {
  const { Page } = pageContext
  // 我们控制页面如何 hydrate
  await hydrateDom(Page)
}

由于我们控制我们的页面如何渲染为 HTML 和 hydrated，我们可以使用：

任何 UI 框架（React 16、React 17、Vue 2、Vue 3、petite-vue、Svelte、Solid、Preact 等）
任何视图库（Vuex、Redux、Relay、Apollo GraphQL、PullState、Recoil、Vue Router、React Router，...）

而且，更重要的是，集成视图工具只需遵循其官方安装指南即可。

浏览器端工具

// /renderer/_default.page.client.js
// Environment: Browser

export { render }

import { hydrateDom } from 'some-ui-framework'

// 这是初始化错误跟踪（例如 Sentry 或 Bugsnag）的好地方
Sentry.init()
// 也是初始化 Service Worker 的好地方
navigator.serviceWorker.register(/* ... */)

async render(pageContex) {
  // 在这里我们可以集成性能测量工具，例如 测量 hydration 性能
  const { Page } = pageContex
  await hydrateDom(Page)
  init()
}

function init() {
  // After hydration we usually initialize vanilla JS component libraries, for example tooltips
  // hydration 后我们通常会初始化 vanilla JS 组件库，例如 tooltips
  tooltip.init(document.querySelectorAll('.tooltip')
  // 或者一些 vanilla JS modal 库
  $('.my-modals').modal()
}

我们可以用：

任何 CSS 框架（Tailwind CSS、Bulma、Bootstrap、Material Design 等）
任何浏览器库（Vanilla JS 组件库、Bugsnag、Sentry、jQuery、Google Analytics，...）
任何浏览器技术（Service Workers，PWA，...）

集成浏览器工具只需遵循其官方安装指南即可。

服务端工具

从服务器架构的角度来看，vite-plugin-ssr 只是一个服务器中间件。

// `app` 可以是任何服务器框架，例如 Express.js/Fastify/Koa/Hapi/...
app.get("*", async (req, res) => {
  // 对于给定的 URL，`renderPage()` 函数返回我们的
  // `render()` hook 的结果（通常是 HTML 字符串）。
  // 它可以在 Express.js 中使用，也可以在任何服务器环境中使用，包括无服务器环境，
  // 例如 Cloudflare Workers 或 Vercel。
  const pageContext = await renderPage({ urlOriginal: req.url });
  res.send(pageContext.httpResponse.body);
});

通过预渲染我们可以消除对 Node.js 生产服务器的需求，而是部署到任何静态 host

我们可以用：

任何服务器框架（Express, Koa, Fastify, Hapi, ...）
任何鉴权策略和工具（电子邮件/密码、OAuth、NextAuth.js、Passport.js、Grant、Auth0 等）。
任何无服务器环境（Cloudflare Workers、Vercel、Firebase、AWS Lambda、Google Cloud Functions，...）
任何服务器环境（AWS EC2、谷歌云……）
任何静态host（Cloudflare Pages、GitHub Pages、Netlify……）

✍ Edit this page