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.
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 anactive
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 theactive
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:
preact-www
preact-iso
issue from this morning