renderPage()

环境: Node.js

我们使用 renderPage() 在服务端渲染页面:

// server.js
// Environment: Node.js server

// 在此例子中我们使用 Express.js,
// 但我们也可使用任意其他服务端框架
import express from 'express'
import { renderPage } from 'vite-plugin-ssr'

const isProduction = process.env.NODE_ENV === 'production'
const root = `${__dirname}/..`

startServer()

async function startServer() {
	const app = express()

	if (isProduction) {
		app.use(express.static(`${root}/${outDir}/client`))
	} else {
		const vite = await import('vite')
		viteDevMiddleware = (
			await vite.createServer({
				root,
				server: { middlewareMode: true },
			})
		).middlewares
		app.use(viteDevMiddleware)
	}

	app.get('*', async (req, res, next) => {
		const pageContextInit = { urlOriginal: req.originalUrl }
		const pageContext = await renderPage(pageContextInit)
		if (pageContext.httpResponse === null) return next()
		const { body, statusCode, contentType } = pageContext.httpResponse
		res.status(statusCode).type(contentType).send(body)
	})

	const port = 3000
	app.listen(port)
	console.log(`Server running at http://localhost:${port}`)
}
  • pageContext.httpResponse.statusCode200404500
  • pageContext.httpResponse.contentTypetext/html;charset=utf-8application/json。(当 客户端路由 获取新页面的 pageContext 时,Content-Typeapplication/json
  • pageContext.httpResponse.bodyrender() hook 返回的 HTML 字符串,带有由 vite-plugin-ssr 注入的额外的 <script><style> 标签
  • pageContext.httpResponse 在以下情况下为 null
    • 页面发生错误,而你没有创建 _error.page.js 文件
    • 渲染 _error.page.js 时发生错误
    • URL 被跳过:vite-plugin-ssr 不渲染某些 URL。 (例如,pageContext.urlOriginal === '/favicon.ico' 因为浏览器会自动发出 favicon 请求)。

renderPage() 与框架无关:我们可以将 vite-plugin-ssr 与任何服务器框架(Koa、Hapi、Fastify、vanilla Node.js 等)和任何部署环境(AWS、Cloudflare Workers、Vercel)一起使用 ,...)。

Examples: