preactjs / preset-vite

Preset for using Preact with the vite bundler
https://npm.im/@preact/preset-vite
MIT License
262 stars 26 forks source link

feat: Add preview middleware for prerender plugin #132

Closed rschristian closed 4 months ago

rschristian commented 4 months ago

As of v5, Vite's preview server will no longer make any attempt to serve anything but /index.html for any request missing a file extension -- /foo will not result in /foo/index.html being returned.

This tends to result in hydration mismatches that users might not expect or recognize; for example, in our demo here (which largely mirrors our template for create-preact) we assign an active class for items in the header to show which route is active. If the user loads /404 in their browser, both the "Home" and "404" header items will have the active class. It's easy for users to confuse this as a hydration issue with Preact or Preact-ISO when the reality is that the wrong HTML file was returned.

To fix this, we can add a simple middleware that converts /foo into /foo/index.html during Vite's preview mode, and if the file isn't found, it falls back to a config option (like /404) or to /index.html. Naming suggestions certainly welcome & appreciated, not sure if these are as clear as they could be?

Edit: To avoid any potential issues, this is intentionally not enabled by default if the user prerenders their app. Will slip that into the next major though, as I do think it's a better default.

Reference: