在 SSR（在 Vercel 上）中同时呈现多个 preact-router 路由

Question

如果您在 https://startupguide.vercel.app/ and click “Name Generator”, you will see only the Name Generator form (as it should be). But if you go to https://startupguide.vercel.app/namegenerator 上访问我的 Preact 应用程序并刷新页面（以获取 SSR 页面），您首先会看到名称生成器表单，以及下面的开始页面（！）。

这是我设置 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

@JasonMiller 的回答是正确的。但我会离开我的，因为它回答了一个症状非常相似的问题，并且将来可能对其他人有用。

你很可能在做类似的事情

render(<App/>, root)

虽然你应该这样做：

render(<App/>, root, root.firstElementChild)

更多详情请阅读
https://github.com/preactjs/preact/issues/1060
和
https://github.com/preactjs/preact/issues/24

Answer 2

/namegenerator 页面实际上并不是 server-rendered。如果禁用 JavaScript 并加载页面，您会看到它只是主页内容。这会导致 SSR 不匹配，从而破坏水合作用。

要解决此问题，您可以通过创建 prerender-urls.json 文件来预呈现名称生成器页面：

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

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

传递

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

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

在 SSR（在 Vercel 上）中同时呈现多个 preact-router 路由

Multiple preact-router routes rendered at the same time in SSR (on Vercel)

preact

vercel

preact-router