How safe is it to use Vite + SSR in production?

[tonycassara]

I'm considering Vite for a one-off service at my company. It's a great fit but the large "Experimental" banner at the top of the SSR page has my team on edge about using it. It is a simple React app + styled components generating static markdown. Are there any examples of Vite + SSR being used in production at a well-known company? What are some specific concerns I should have about using this with user facing content?

[frandiox]

@tonycassara Hello! There's a discussion about this here: vitejs/vite#4230

This package (vite-ssr) is just using Vite internally to do the SSR for you without big complications, but of course it's subject to Vite's "experimental" status.

I know other people that have used this with React + Styled Components, and I can tell you the following:

• React itself is not very SSR-friendly, so it is possible you might find issues with advanced stuff (but I guess this is true regardless if you use Vite or not).
• Styled Components need extra setup on your end because they require using Babel (and Vite does not use Babel by default) for some sort of SSR style hashing. I think you can use vite-plugin-babel for that. I believe this is not needed for Emotion, Material UI or other CSS solutions.

That said, I think most of the things should work well even if it's marked as experimental right now, so I would suggest to make a quick test with your usual dependencies and see how it works.

Are there any examples of Vite + SSR being used in production at a well-known company?

I know of some companies that are developing new apps or migrating existing apps to using Vite and SSR. I do not know of any in production already.

What are some specific concerns I should have about using this with user facing content?

Nothing in particular comes to mind, apart from that I've mentioned already about React and Styled Components. But just so you know, this package (vite-ssr) renders the first page in the server, and then it works as an SPA-takeover. It does not do SSG at build time. Just to make sure you don't get the wrong idea.

Hope that helps!

[tonycassara]

@frandiox thank you this answers my question! Also the note on vite-ssr is very important for my use. I'm currently following the React example listed on the SSR page of the docs and it's working fine atm. Will add the babel plugin for styled components.