If you go to my Preact app on 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 and refresh the page (to get SSR page), you see first the Name Generator form, AND the Start page underneath(!).
This is how I have set up my Preact routes:
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
What could be the problem?
The /namegenerator
page isn't actually being server-rendered. If you disable JavaScript and load the page, you'll see that it's just the homepage content. This causes an SSR mismatch, which breaks hydration.
To fix this, you can prerender the namegenerator page by creating a prerender-urls.json
file:
[
{
"url": "/",
"title": "Amazing Startup Guide"
},
{
"url": "/namegenerator",
"title": "Name Generator – Amazing Startup Guide"
}
]
Then update your package.json
"build" script to pass that file as --prerenderUrls
:
"scripts": {
"build": "preact build --prerenderUrls ./prerender-urls.json",
...
}
Pre-rendering docs are here: https://preactjs.com/cli/pre-rendering/#multiple-urls-and-custom-data