Hacker News Reader

Comment by pier25 | Hacker News Reader

The big elephant in the room most of these frameworks are missing is partial hydration. Instead of hydrating the whole page, only the interactive parts are hydrated, sending the absolutely minimal JS needed to the client.

AFAIK only Marko has this feature today. Since it's developed and used at Ebay they focused on the best SSR+hydration experience from the start.

Imba v2 will also have patial hydration (confirmed by the devs here on HN).

Other than those two, it seems nobody is really taking partial/progressive/lazy hydration seriously. IMO SSR+partial hydration is really the next frontier in web development.

It's possible to do it yourself (I did it recently with a Svelte project) but it results in complicated setups. We need a solution that does it transparently, extracting the needed components and data automatically.

View on HN

The React team is working on some experiments that’s not quite what you’re describing but achieves the goal of sending way less code to the client. I can’t wait until tools like that are more standard.

There is light at the end of the SPA tunnel :)

Since you mentioned Svelte, you may want to take a look into Elder.js, if you haven't: https://github.com/Elderjs/elderjs

https://github.com/LukasBombach/next-super-performance adds partial hydration to next. I was tempted by this some time ago, but ended up leaving it due to concern about straying too far off-piste from next itself.

It is coming soon.

https://github.com/vercel/next.js/issues/10344

I think it's coming not soon based on the last comment of this issue.

It's not. That issue is closed and the last comment says:

> Overall it’s currently not possible to do this besides following what’s described in the article. Definitely something we plan on tackling eventually!

The React team is or was reportedly working on "progressive hydration" which sounds like what you're talking about.

This tweet from React core team member Dan Abramov in December 2018: https://twitter.com/dan_abramov/status/1079352276433715200

They've been talking about it for years alongside with SSR streaming. Nothing concrete so far.

I get the sense the React team don't really care about SSR as it's not a massive use case for FB.

I thought it was a massive use case for Facebook. I recall seeing Facebook engineering tech talks about how they write their JavaScript with different types of import statements to optimize what gets rendered in SSR versus on the client. I think this is a similar video: https://www.youtube.com/watch?v=KT3XKDBZW7M

The React team has been focusing much more on SSR lately. I think it's likely we'll see big things in 2021.

Good to hear! If that's the case then I'm excited.

Is this not SSR streaming? https://reactjs.org/docs/react-dom-server.html#rendertonodes...

I could be wrong, but I don't think so, no.

> The HTML output by this stream is exactly equal to what ReactDOMServer.renderToString would return.

I imagine this returns a stream as a convenience for Node servers that are streaming chunks of HTML. I don't think it means that React's SSR is rendering chunks of HTML in an async fashion and returning each chunk to the stream as soon as it's ready.

Also look at the last task of suspense:

> Implement a streaming server renderer

https://github.com/facebook/react/issues/13206

You're right. ReactDOMServer.renderToNodeStream is to support HTML streaming, which can allow the browser to start rendering the (as far as it knows, static HTML) document before it receives all the HTML. This is nice, but probably is not a huge factor if you're using HTTP caching via a CDN or a static site generator (since the CDN will likely support HTML streaming).

I remember thinking when I first saw Marko it's kinda crazy how unknown Marko is given how well they've been doing streaming SSR and Partial Hydration for years. At production scale at eBay.

Is Marko the ONLY framework with this feature? Surely there's some more.

I've been looking at this for months and AFAIK it's the only one that has it OOTB. If you find others, please let me know.

It can be implemented with React and others (I've done it with Svelte) but it's complicated. See this example on how to do it with Preact and Next:

https://medium.com/@luke_schmuke/how-we-achieved-the-best-we...

Elder.js (Svelte framework) has partial hydration OOTB: https://github.com/Elderjs/elderjs

> only Marko has this feature

not true, Elderjs from the Svelte ecosystem does exactly this

Ah good point!

Does Elder do SSR or only SSG? It's sort of crazy how automatic partial hydration is in Marko. You just write your code and it works. No extra consideration etc.

Alpine.js has partial hydration. ;-)

It works on any string of HTML but it doesn't have SSR so I don't think it counts as hydration.

Also, the unsafe-eval CSP is way too risky.

Reply on news.ycombinator.com