Common Issues

Npm packages containing invalid code

Vite purposely doesn't transpile server-side code but lets Node.js directly execute npm packages (for a much faster development DX).

But some npm packages contain invalid JavaScript code and you need to add them to vite.config.js > ssr.noExternal, see Broken npm package.

Hydration mismatch

A recurring problem when doing SSR are so-called hydration mismatches: a hydration mismatch is when the content rendered to HTML on the server isn't the same as the content rendered in the browser.

See deep dive explanation and solution at Hydration Mismatch.