Is there any React frameworks that fit my needs?
I've used NextJS at a few jobs before, and my least favorite thing about it is how impossible component-level data fetching w/ SSR is.
I'm not a big fan of server components as a solution to this either, because then you are giving up the ability for the same component to be interactive.
I've used Nuxt 3 a bunch and I love how nice SSR feels with it, how I can just
useAsyncData (or any wrapper) anywhere and the server will just wait for them all to resolve before sending a serialized page. I also like how much control I get with Nuxt, how it exposes it's app instance with useNuxtApp and I can access it's internals how I want to create my own SSR behaviour.
Is there anything like this in React land? I'm asking because I really need to rewrite a project from Vue to React so that a few of my friends can contribute to it, and I don't want to leave behind the DX of Nuxt.
Thanks a lot in advance if all of this <34 Replies
I tried doing a lot of React framework research, and it's getting to the point where I feel like I might have to roll-my-own with Vite
Have you tried the old pages router? maybe serverside props and incremental static regeneration will fit better your needs
i dont recall if it works well with Suspense but ideally you would just separate every "fetch before render" logic inside your getServerSideProps, everything else would be client-side, and you would be able to just Suspend it to wait for the getServerSideProps fetch
I understand that SSR with Next was a painpoint, specifically the GetServerSideProps part, and I'm glad I don't have to use it anymore. But I don't understand what you mean server functions are not a solution.
Technically you are getting the best of both worlds with them. Just do an async function and the HTML will be generated on the server and then sent. You can even make components async and using Suspense stream them in while showing a loader. The rest of the page will be interactive while that 1 component can load by itself.
You can use cache from both Next and React (but be careful there are differences) to deduplicate and/or cache requests.
However, I cant help more since I don't know what exactly you want from your own SSR behaviour
Have you tried Astro ?
Their island architecture for component rendering might fit your use case.
You can mix React and Vue together as framework components during your migration.