4 ms·

Sorta-- that means you render it at least twice. 1. You convert the JavaScript/JSX into HTML on the server and send it down (along with multiple blobs of JSON/

Sorta-- that means you render it at least twice. 1. You convert the JavaScript/JSX into HTML on the server and send it down (along with multiple blobs of JSON/code to re-hydrate). 2. The browser parses all the HTML and added JSON/code. 3. The browser then re-hydrates the page via JavaScript loading all of the JSON/code and computing everything (rendering it again).

Joeri 3y ago
Not if you use react server components, then markup is streamed in chunks as it gets rendered on the server and patched into the dom on the client. The JS for those components is never sent to the client.
willsmith72 3y ago
With progressive enhancement, the page is "rendered" for all intents and purposes before any js enters the scene
notatoad 3y ago
>The browser then re-hydrates the page via JavaScript loading all of the JSON/code and computing everything (rendering it again). isn't this exactly what's going on under the hood with web components? if you send an html page including <user-avatar><img></user-avatar>, the browser is going to draw the <img> tag and treat the <user-avatar> tag as a no-op because it doesn't know what to do with that. then your javascript kicks in and transforms the <user-avatar> tag into whatever the javascript defines it as, at which point it will get re-rendered.
- mortallywounded 3y ago
  Yeah-- but a single component is a much smaller degree of JS than an entire React application.
  - troupo 3y ago
    Depends on how many "small components" you need. Reddit's new redesign downloads over 100 js files: https://x.com/dmitriid/status/1708772121260732494 https://x.com/dmitriid/status/1708772121260732494 to render a menu.
    - mortallywounded 3y ago
      Of course there's a tradeoff--- if everything is a component then it may as well be an SPA (or at least bundle those files...). I don't think the core idea was to ever use "hundreds" of components. HTML should be able to do a majority of the work, and you sprinkle a component here or there as needed.

Joeri 3y ago

Not if you use react server components, then markup is streamed in chunks as it gets rendered on the server and patched into the dom on the client. The JS for those components is never sent to the client.

willsmith72 3y ago

With progressive enhancement, the page is "rendered" for all intents and purposes before any js enters the scene

notatoad 3y ago

>The browser then re-hydrates the page via JavaScript loading all of the JSON/code and computing everything (rendering it again). isn't this exactly what's going on under the hood with web components? if you send an html page including <user-avatar><img></user-avatar>, the browser is going to draw the <img> tag and treat the <user-avatar> tag as a no-op because it doesn't know what to do with that. then your javascript kicks in and transforms the <user-avatar> tag into whatever the javascript defines it as, at which point it will get re-rendered.

mortallywounded 3y ago
Yeah-- but a single component is a much smaller degree of JS than an entire React application.
- troupo 3y ago
  Depends on how many "small components" you need. Reddit's new redesign downloads over 100 js files: https://x.com/dmitriid/status/1708772121260732494 https://x.com/dmitriid/status/1708772121260732494 to render a menu.
  - mortallywounded 3y ago
    Of course there's a tradeoff--- if everything is a component then it may as well be an SPA (or at least bundle those files...). I don't think the core idea was to ever use "hundreds" of components. HTML should be able to do a majority of the work, and you sprinkle a component here or there as needed.