vike VS vite-ssr

Here are some collected notes of the distinctions between SSRx, Vinxi and Vike, to share with anyone else searching the web. Since my Google search came up empty, and I had to ask around on Twitter/X and GitHub to find out.

We're working on exactly this. You can already do this with Triplit but it's challenging to make an out of the box solution because each framework passes context/data different from server to client differently. There's a cool project called [Vike](https://github.com/vikejs/vike) that generalizes this pattern across SSR'd UI frameworks

Anyone have experience with https://github.com/vikejs/vike?

have you seen https://vite-plugin-ssr.com/ ? i've only browsed their docs, but AFAICT their pitch that it's a more DIY approach to a framework, where you keep a lot of control over how things are wired together.

I agree and, as the author of vite-plugin-ssr[1], that's what I recommend to my users: go for static whenever you can.

I think it's something every web developer should be aware of. Static is indeed a lot simpler than dynamic.

I've wrote more about it over here[2] (SSG = static, SSR = dynamic).

[1]: https://vite-plugin-ssr.com

Maybe vite-plugin-ssr? It's pretty unopinionated and doesn't get in your way.

Now by default, Vite doesn't do SSR. One way to do Vite+SSR is to use vite-plugin-ssr. You can scaffold an example project that does SSR based on some dynamic data:

vite-plugin-ssr

Today, Nextjs is not only cool guy in the town, A lot of meta frameworks exist like Astro, Remix. There are a few ssr frameworks also build over Vite - such as - https://vitedge.js.org/, https://rakkasjs.org/, https://github.com/frandiox/vite-ssr,

Vite ssr seems what you're looking for: https://github.com/frandiox/vite-ssr

very confusing for me, it says https://github.com/frandiox/vite-ssr there is something called vitese and vitedge, am I supposed to use all 3 or 1 of them? if one of them why is this vite-ssr guy endorsing the other frameworks?

I am using a library that is not SSR friendly. Because of this I’ve only imported the library on the client-side and used a Vue 3 ClientOnly component (https://github.com/frandiox/vite-ssr/blob/master/src/vue/components.ts). The initial hydration works correctly, however, after interacting with the non-SSR-friendly component I am getting a bunch of hydration errors.