@skatejs/ssr does something kinda quirky and wraps the Shadow DOM content in a shadowroot tag.
That's alright, because the client side router kicks in immediately, replaces the element in the same container and renders the appropriate shadow-root in DOM.
That's not what SSR means. SSR means that server-rendered HTML gets hydrated, without modification, to add interactivity. You're rendering a server-rendered page and then blowing it away and replacing it with a client-rendered page, undermining your performance gains.
P.S. I pulled down the feature/router branch and ran it with JS disabled. The page is blank. This isn't SSR… not even close.
Server side rendering means generating html on the server, that is all. What you are describing is how server-side rendering works in React, but how server-side rendering is handled in React does not define how server-side rendering is done everywhere.
The Lighthouse score on my personal site which uses a modified version of this SSR technique would disagree with your performance assessment. The site only takes a slight hit to performance because of the cheap server the site is hosted on, otherwise it would be 100%.
When you pulled down the branch, did you also run the node server? Something sounds amiss.
Pulled down the feature/router branch and noticed a bug with Parcel. I also updated the example so it should work out of the box now. Example is a year old, just needed a little maintenance. There seems to be some issues with styling, but that could be fixed.
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.
That's not what SSR means. SSR means that server-rendered HTML gets hydrated, without modification, to add interactivity. You're rendering a server-rendered page and then blowing it away and replacing it with a client-rendered page, undermining your performance gains.
P.S. I pulled down the feature/router branch and ran it with JS disabled. The page is blank. This isn't SSR… not even close.
web.dev/declarative-shadow-dom/ @steveblue
dev-to-uploads.s3.amazonaws.com/up...
Yes, Declarative Shadow DOM is still only available in Chrome AFAIK.
Although if I were to SSR WC today I would use Declarative Shadow DOM and tooling provided by Lit, polyfill the rest of the browsers.
Server side rendering means generating html on the server, that is all. What you are describing is how server-side rendering works in React, but how server-side rendering is handled in React does not define how server-side rendering is done everywhere.
The Lighthouse score on my personal site which uses a modified version of this SSR technique would disagree with your performance assessment. The site only takes a slight hit to performance because of the cheap server the site is hosted on, otherwise it would be 100%.
When you pulled down the branch, did you also run the node server? Something sounds amiss.
Pulled down the feature/router branch and noticed a bug with Parcel. I also updated the example so it should work out of the box now. Example is a year old, just needed a little maintenance. There seems to be some issues with styling, but that could be fixed.