Одновременное отображение нескольких маршрутов preact-router в SSR (на Vercel) - PullRequest
Новая
       103

Одновременное отображение нескольких маршрутов preact-router в SSR (на Vercel)

2 голосов
/ 07 августа 2020

Если вы go зайдете в мое приложение Preact на https://startupguide.vercel.app/ и нажмете «Генератор имен», вы увидите только форму «Генератор имен» (как и должно быть). Но если вы go на https://startupguide.vercel.app/namegenerator и обновите sh страницу (чтобы получить страницу 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

В чем может быть проблема?

Ответы [ 2 ]

2 голосов
/ 12 августа 2020

Страница /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

0 голосов
/ 12 августа 2020

Ответ @ JasonMiller правильный. Но я оставлю свой, потому что он отвечает на проблему с очень похожими симптомами и может быть полезен кому-то еще в будущем.

Вы, скорее всего, делаете что-то вроде 

render(<App/>, root)

, в то время как вам нужно сделать что-то вроде: 

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

для получения более подробной информации вы можете прочитать https://github.com/preactjs/preact/issues/1060 и https://github.com/preactjs/preact/issues/24

...