7 ms·

> But the unique power of web components (in the browser) is that they can render before JavaScript. React components cannot do this — full stop. Unless you...

> But the unique power of web components (in the browser) is that they can render before JavaScript. React components cannot do this — full stop. Unless you... server-side render them. Then your definition of "render" needs to change

justsomehnguy 3y ago
At least you can server render web comppnents.
- robertoandred 3y ago
  You've been able to server render React for like a decade.
  - justsomehnguy 3y ago
    Define 'server render'?
    - troupo 3y ago
      Output them on the server. Something you can't do with Web Components
- jakelazaroff 3y ago
  You actually can't yet do that reliably. Declarative Shadow DOM is not yet supported by Firefox. https://caniuse.com/declarative-shadow-dom https://caniuse.com/declarative-shadow-dom
- Andrex 3y ago
  You cannot, last I checked. JavaScript is required for Web Components and lack of SSR support is the only reason I moved away from them.
mortallywounded 3y ago
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.
deleted 3y ago
[deleted]

justsomehnguy 3y ago

At least you can server render web comppnents.

robertoandred 3y ago
You've been able to server render React for like a decade.
- justsomehnguy 3y ago
  Define 'server render'?
  - troupo 3y ago
    Output them on the server. Something you can't do with Web Components
jakelazaroff 3y ago
You actually can't yet do that reliably. Declarative Shadow DOM is not yet supported by Firefox. https://caniuse.com/declarative-shadow-dom https://caniuse.com/declarative-shadow-dom
Andrex 3y ago
You cannot, last I checked. JavaScript is required for Web Components and lack of SSR support is the only reason I moved away from them.

mortallywounded 3y ago

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.

deleted 3y ago

[deleted]