在SSR中同时呈现多个预启动路由器路由(在Vercel上)

Question

如果你在https://startupguide.vercel.app/然后单击"名称生成器"，您将只看到名称生成器窗体(应该是这样(。但是如果你去https://startupguide.vercel.app/namegenerator并刷新页面(以获得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

/namegenerator页面实际上并没有被服务器呈现。如果你禁用JavaScript并加载页面，你会看到它只是主页内容。这会导致SSR失配，从而破坏水合作用。

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

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

然后更新您的CCD_ 3"；构建"；将该文件作为--prerenderUrls:传递的脚本

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

渲染前文档如下：https://preactjs.com/cli/pre-rendering/#multiple-url和自定义数据

Answer 2

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

---

你很可能正在做类似的事情

render(<App/>, root)

而你应该做一些类似的事情：

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

有关详细信息，请阅读
https://github.com/preactjs/preact/issues/1060
和
https://github.com/preactjs/preact/issues/24