Support hot reload for server components

[tom-sherman]

Unless I'm mistaken waku dev only supports full-page reload with HMR right now, could it support react fast refresh?

[dai-shi]

Fast refresh should work if you only modify client components. If a file is used both by client components and server components, it will full reload.

[tom-sherman]

Ah cool. It would be great to support fast refresh of server components then! This is possible in Next.js.

[dai-shi]

Yeah, if it's technically possible, we could do it. As Vite (probably) supports only fast refresh of client components, to support that of server components, Waku would need its own mechanism...

[tom-sherman]

Yep. I'm hoping vite allows you to extend the websocket messages so that it could say something like {type: refresh, component: App} and that would trigger Waku client to re-fetch the RSC.

[ojj1123]

@dai-shi
I'm interested in it!
Out of curious, I was wondering if I could find where you refer to make vite-plugin-rsc-reload.

I try to find the references about RSC fast refresh, but I could do it just in Next.js. It seems like that Vercel made HotReloaderWebpack module to fast-refresh a various of changes such as clientComponentChanges, serverComponentChanges, etc.

What I make vite rsc fast-refresh plugin is a bit challenge, but I would like to invest it

[dai-shi]

Yeah, it will be challenging. We need to detect the server component changes and then do RSC refetch.

[dai-shi]

this has a priority after v0.19.0.
i'll eventually work on it, but not soon. meantime, feel free to tackle it.

[ojj1123]

i was investigating but It's a bit hard for me to solve this issue cause i don't have enough knowledge about the vite bundler.
but yeah i will try to do this :)
If someone have the solution, feel free to catch it

[dai-shi]

Please feel free. We are all new to this stuff. You will learn something trying this, even if you don't reach the final solution. Challenging is good.

[dai-shi]

As it seems there is a high demand on this #404, I will work on this with priority.

[dai-shi]

I will call it "hot reload", because what I will do is not React Fast Refresh, nor HMR.