Question

如果您在https://startupguide.vercel.app/上转到我的Preact应用，然后单击“名称生成器”，则只会看到“名称生成器”表单（应该是这样）。但是，如果转到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"
  }
]

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

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

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

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

在SSR中同时渲染的多个preact-router路由（在Vercel上）

2 个答案: