preact - 在 SSR 中同时渲染多个 preact-router 路由(在 Vercel 上)

Question

如果您在 https://startupguide.vercel.app/ 上访问我的 Preact 应用程序并单击“名称生成器”，您将只看到名称生成器表单(应该如此)。但是如果你去https://startupguide.vercel.app/namegenerator并刷新页面(以获取 SSR 页面)，您首先会看到 Name Generator 表单，以及下方的 Start 页面(!)。
这是我设置 Preact 路线的方式:

import { Router } from 'preact-router'

import Start from './pages/Start'
import NameGenerator from './pages/NameGenerator'

const App = ({ prop }) => {
  return (
    <Router>
      <Start path='/' />
      <NameGenerator path='/namegenerator' />
      <NameGenerator path='/namegenerator/:word1' />
      <NameGenerator path='/namegenerator/:word1/:word2' />
    </Router>
  )
}
export default App

可能是什么问题呢？

Answer 1

/namegenerator页面实际上并没有被服务器渲染。如果您禁用 JavaScript 并加载页面，您将看到它只是主页内容。这会导致 SSR 不匹配，从而破坏水合作用。
要解决此问题，您可以通过创建 prerender-urls.json 来预渲染 namegenerator 页面。文件:

[
  {
    "url": "/",
    "title": "Amazing Startup Guide"
  },
  {
    "url": "/namegenerator",
    "title": "Name Generator – Amazing Startup Guide"
  }
]

然后更新您的 package.json “构建”脚本将该文件作为 --prerenderUrls 传递:

"scripts": {
  "build": "preact build --prerenderUrls ./prerender-urls.json",
  ...
}

预渲染文档在这里: https://preactjs.com/cli/pre-rendering/#multiple-urls-and-custom-data