With a SPA Partial Hydration doesn't really work since you basically need everything below the client side router in the browser. You can make some small gains, but with an MPA it can be more drastic. The best you can do with a SPA is code Splitting since you may need page B in the browser eventually. You may never load Page B so you save the enduser where they don't but that JavaScript chunk for it contains all the code to render Page B.
Partial Hydration is looking at a page and going well the footer has no events or state we don't need to ship it, and neither does the header but some navigation links. Actually for our whole product page the only part this is interactive is that "Add to Cart" button. Even though I wrote my app with a bunch of re-usable components (since the Header/Footer is used on all product pages) I'm only going to ship the Add To Cart button to the client. The rest of it never needs to be shipped.
What's nice about it being a single app experience is if there is no need for any client side JavaScript it sends none. Which is what I was trying to show in the Hackernews example. I just wrote some pages and components as normal and it never sent any JavaScript bundle to the client. It does on the article page because there is some JS needed to toggle the collapsing of comments. But I wasn't doing anything differently as the developer.
But this is different than Code Splitting. Code splitting is a super powerful tool. But if I know that a certain <div> is never going to be rendered in the browser I can just not include it in any bundle. Not the JS code, not the template. Partial Hydration isn't about deferred loading but only sending the parts of the code that actually need to be in the browser. The next version of Marko is looking at making this even more granular and sending not whole components but only parts of components that need to be in the browser.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
With a SPA Partial Hydration doesn't really work since you basically need everything below the client side router in the browser. You can make some small gains, but with an MPA it can be more drastic. The best you can do with a SPA is code Splitting since you may need page B in the browser eventually. You may never load Page B so you save the enduser where they don't but that JavaScript chunk for it contains all the code to render Page B.
Partial Hydration is looking at a page and going well the footer has no events or state we don't need to ship it, and neither does the header but some navigation links. Actually for our whole product page the only part this is interactive is that "Add to Cart" button. Even though I wrote my app with a bunch of re-usable components (since the Header/Footer is used on all product pages) I'm only going to ship the Add To Cart button to the client. The rest of it never needs to be shipped.
What's nice about it being a single app experience is if there is no need for any client side JavaScript it sends none. Which is what I was trying to show in the Hackernews example. I just wrote some pages and components as normal and it never sent any JavaScript bundle to the client. It does on the article page because there is some JS needed to toggle the collapsing of comments. But I wasn't doing anything differently as the developer.
But this is different than Code Splitting. Code splitting is a super powerful tool. But if I know that a certain
<div>is never going to be rendered in the browser I can just not include it in any bundle. Not the JS code, not the template. Partial Hydration isn't about deferred loading but only sending the parts of the code that actually need to be in the browser. The next version of Marko is looking at making this even more granular and sending not whole components but only parts of components that need to be in the browser.