vite-plugin-ssr

🔧 掌控

在 vite-plugin-ssr 中你可以使用任意UI框架（React, Vue, Svelte, Solid, ...）和任意工具（任意前端框架、web技术栈、部署环境、Vite插件...）

你可以手动继承各种工具，并且保持掌控架构

在 vite-plugin-ssr中，你可以掌控页面如何渲染：

// /pages/about.page.js
// Environment: Browser & Node.js

// vite-plugin-ssr 使用文件系统路由: `/pages/about.page.js` 文件匹配 `/about`路由.

// `Page` 可以是任何代码 — 通常来说是一个 React/Vue/Svelte/... 组件
export function Page() {
  return <>
    <h1>About</h1>
    <p>This is our first vite-plugin-ssr app.</p>
  </>
}

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

import { escapeInject, dangerouslySkipEscape } from 'vite-plugin-ssr'
// 任意UI框架 (React, Vue, Svelte, ...)
import { renderToHtml } from 'my-favorite-ui-framework'

// 你可以掌控 `Page` 如何渲染成 HTML
export async function render({ Page }) {
  const pageHtml = await renderToHtml(Page)
  const title = 'My first vite-plugin-ssr app'
  return escapeInject`<!DOCTYPE html>
    <html>
      <head>
        <title>{title}</title>
      </head>
      <body>
        <div id="page-root">${dangerouslySkipEscape(pageHtml)}</div>
      </body>
    </html>`
}

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

import { hydrateDom } from 'my-favorite-ui-framework'

// 你可以掌控 `Page` 如何注水
export async function render({ Page }) {
  await hydrateDom(Page)
}

如此级别的掌控能力意味着你可以继承任何工具

📦 零配置

vite-plugin-ssr 让你 只在关键的地方进行配置

不需要任何配置即可让一切完美运行

💫 简单

在 vite-plugin-ssr 中你可以手动集成工具链。虽然它意味着更多的工作量，但同时它为你提供了从根本上更简单 & 更加稳定的基础来构建上层框架

vite-plugin-ssr 和你的UI框架（React/Vue/...）之间分割清晰，使得你的应用容易理解

万事开头难

在 vite-plugin-ssr 中，你需要自己集成工具链。这通常意味着更多的工作量和一些难度，上手可能会慢一些。

但是像 Next.js/Nuxt 这样的黑盒框架限制了解决方案。到最后，你会浪费时间在与框架斗争上

相比之下， vite-plugin-ssr 是透明的：它不会妨碍你集成任何工具，只需遵循该工具的官方安装指南即可

简言之：vite-plugin-ssr 可能没那么容易，但是更简单

基础稳定

框架需要持续跟上生态的步伐，而 “只做一件事” 的工具可以快速稳定下来

实际上，vite-plugin-ssr已经很稳定了：破坏性更改只是为了改进vite-plugin-ssr的设计，这意味着你的集成可以继续工作。

干净利落

vite-plugin-ssr 和你的 UI 框架（React/Vue/...）之间没有混淆。这使得你的应用代码容易理解。

趣味十足

最后且重要的是，手动集成既有趣又有见地！（而与框架作斗争是不必要的，而且很烦人）

成熟

文件系统路由, 数据获取， 预渲染， Layouts， HMR， i18n， Link 预请求， HTML 流式渲染

客户端路由 （页面导航快）或 服务端路由 （架构简单）

所有渲染方式: SSR， SPA， MPA， SSG， HTML-only

每个页面可以使用不同的渲染方式

极速 HMR

由 Vite 提供支持的极速 HMR

得益于 Vite 新颖的懒编译，HMR 在项目规模增大时依然保持快速

路由

页面自动路由

FILESYSTEM                        URL
pages/index.page.js               /
pages/about.page.js               /about
pages/faq/index.page.js           /faq
pages/movie/@id/index.page.js     /movie/1, /movie/2, /movie/3, ...

你也可以使用路由字符串 和 路由函数

// 路由字符串
export default '/movie/@id'

// 路由函数 — 完全灵活
export default pageContext => pageContext.urlPathname === '/admin' && pageContext.isAdmin

你可以选择:

页面导航快的客户端路由（页面导航时 DOM 发生改变）
架构简单的服务端路由（页面导航时重新加载 HTML）

渲染方式 (SSR, SPA, SSG, HTML-only)

每个页面你都可以选择以下：

SSR: 页面 HTML 在请求时渲染
SSG: 页面 HTML 在构建时预渲染
SPA: 页面不会渲染为 HTML；页面仅在浏览器中加载和渲染
HTML-only: 页面渲染为纯HTML 或 js 很少的HTML

例如，你可以使用 SPA 渲染管理员面板页面，使用 HTML-only 渲染营销页面

https://cn.vite-plugin-ssr.com 这个网页是HTML-only渲染，只加载了几kb的JavaScript。（它实现了一些交互性，例如本页的可折叠learn more部分）

🌍 随处部署

随处部署 （Vercel Serverless/Edge/ISR，Cloudflare Workers，AWS EC2/Lambda，Firebase，Google Cloud， ...）

预渲染应用并把它部署到 任意静态host（Netlify, GitHub Pages, Cloudflare Pages, ...）

像手套一样适合 Cloudflare Workers 的小型worker尺寸要求

只是个中间件

从服务端的角度来看，vite-plugin-ssr 只是个中间件

import { renderPage } from 'vite-plugin-ssr'

// `app` 可以是任何的服务端框架，比如 Express.js/Fastify/Koa/Hapi/...
app.get('*', async (req, res) => {
  // `renderPage()` 也可用于 serverless 环境，比如
  // Cloudflare Workers 和 Vercel
  const { httpResponse } = await renderPage({ urlOriginal: req.url })
  res.send(httpResponse.body)
})

预渲染 (aka SSG)

你也可以预渲染应用程序来消除生产环境对 Node.js 服务的需求，并且部署到任何静态host （Cloudflare Pages, GitHub Pages, Netlify, ...）

$ vite build 
vite building for production...
✓ 42 modules transformed.
vite-plugin-ssr pre-rendering HTML...
✓ 3 HTML documents pre-rendered.
dist/client/index.html
dist/client/about/index.html
dist/client/404.html