3 ms·

I recently learned about SvelteKit's (https://kit.svelte.dev/ https://kit.svelte.dev/) solution to mixing SSR with dynamic components: The dynamic component is

by _han 4y ago

I recently learned about SvelteKit's (https://kit.svelte.dev/ 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 https://kit.svelte.dev/docs/appendix#hydration

alessioalex 4y ago
Hydration is how most (if not all) similar frameworks do it (Next, Nuxt etc).
- eyelidlessness 4y ago
  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.
davidkuennen 4y ago
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 https://reactjs.org/docs/react-dom-server.html [2] https://stockevents.app https://stockevents.app
sirsinsalot 4y ago
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.
- woojoo666 4y ago
  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
ricardobeat 4y ago
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”.

by _han 4y ago

alessioalex 4y ago

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

eyelidlessness 4y ago
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.

davidkuennen 4y ago

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 https://reactjs.org/docs/react-dom-server.html [2] https://stockevents.app https://stockevents.app

sirsinsalot 4y ago

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.

woojoo666 4y ago
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

ricardobeat 4y ago

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”.