luwes / luwes/selectlist-polyfill
How to use SSR with the polyfill web component & wesc? (avoid hydration?)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 59
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
I'm not sure if this is a problem this library or wesc can solve, but web components seem to hydrate, as well as I'm not sure if my demo is being properly SSR'd or not.
https://github.com/thejackshelton/selectlist-polyfill-playground
I have a little demo here that I've been playing with, and I've come across the wesc project and am not sure how to SSR the web component for Qwik.
Qwik is a fullstack javascript framework similar in syntax to React, but it does **not have hydration**. Things are loaded on the server, and then "resumed" to the client via a service worker on a separate thread. This is called resumability, and is instantly interactive. Web components seem to have the assumption that hydration is need, and so even inside of a resumable framework, it seems that hydration happens.
This is from Misko, a member of Qwik core and the creator of Angular JS
> So `` is rendered on the server, but there is nothing in it. It's empty.
On the client the Web Component wakes up looking for and renders its content. which explains the temporary layout break.
> So to me this is not SSR'ed and it does hydration on the client. Does it work, sure, but it is not scalable. Imagine you built all of the app from WCs, then it will become just a client side app without SSR.
The current tradeoff we are looking at is resumability working for the actual `selectlist` element, but hydration for polyfill browsers (which is all of them currently haha).
Would love to hear some thoughts or insights you guys might have here. We are working on an open source headless UI library for Qwik, and it would be a game changer if we could utilize the benefits of the framework along with the polyfill here.
Further convo:
https://discord.com/channels/842438759945601056/942509201425575986/1156625322905702452
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked selectlist-polyfill-playground demo and the issue's SSR/resumability description for Qwik. Determine whether the polyfill can support the requested server-rendered behavior without client hydration; done would be a documented supported approach or a clearly stated limitation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100