Hacker News Reader

Comment by _han | Hacker News Reader

I recently learned about SvelteKit's (https://kit.svelte.dev/) solution to mixing SSR with dynamic components: The dynamic component is rendered at the server, but the data that it's based on is included with the HTML. So, after the page loads, it converts the static HTML into a dynamic component using the data, in a process called 'hydration': https://kit.svelte.dev/docs/appendix#hydration

View on HN

This approach is not unique to Svelte(Kit), and not particularly efficient. You serialize the entire app state at once, and still have to send the complete application/component code down the wire and execute. It’s how this has been done for the past decade. The main advantage Svelte has is that it doesn’t need a “reconciliation” step, since it doesn’t use a virtual DOM, so this whole dance takes a lot less CPU time.

The ideal scenario is that you only serialize state, download and execute code for the parts of the app that are actually interactive. This is now called “partial hydration”.

Hydration is how most (if not all) similar frameworks do it (Next, Nuxt etc).

Not all. One mentioned in the article, Qwik, uses a different technique the authors call resumability. It’s similar in that it applies JS to components client side which were rendered with the same code server side. The subtle differences:

- it derives its initial client state from the HTML, rather than re-running the initialization which already ran on the server

- it doesn’t render top down, it resumes interactive components on demand (on first user interaction by default)

- it doesn’t load any of that code at all by default; if your page is fully static, none of the code ever gets loaded

This is similar to frameworks like Astro which use a technique called “partial hydration”, but with Qwik it’s handled by the compiler. Another which is somewhere in between (and has been doing all this for years; I’m not sure exactly where its most recent release sits on the spectrum) is Marko.

When backbone.js was the new hotness, you used to do this by templating out the page (in PHP or whatever) and including in the head some JSON that the page picked up on client-side render.

It is all common sense, and I feel like the language reinvention is an attempt to make old things new, not new things better, because everyone wants to performatively demonstrate how far up the curve they are.

It seems common to compare SSR to the old days of PHP, but the term SSR is usually used with dynamic component-based frameworks like React or Angular. These frameworks give you much better composability than what we had with PHP

Doing the same with React[1] for my website[2]. Notice how the elements on top are dynamic, but the whole content is loaded upfront.

[1] https://reactjs.org/docs/react-dom-server.html

[2] https://stockevents.app

Reply on news.ycombinator.com