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

Question

如果您转到https://startupguide.vercel.app/上的my应用程序并单击“名称生成器”，您将只看到名称生成器表单(应该是这样)。但是，如果您转到https://startupguide.vercel.app/namegenerator并刷新页面(以获取SSR页面)，您将首先看到名称生成器表单，下面是开始页面(！)。

我就是这样建立我的预习路线的：

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 "build“脚本，将该文件作为--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