Using client:only on Astro component (no UI library) | Astro Lounge | Page 1

mellow dune Dec 6, 2023, 2:27 PM

#

It seems that Astro doesn't support rendering an Astro component with client:only directive, it needs the UI renderer hint to be an external library? I have a small easter egg component that just displays the time of day to the user and a greeting based on the time (Good morning/day/evening)... But there's no point in having this displayed for non-JS users as it will be the time at build (maybe 2 months ago) for the static version. I'd only want this to be included/loaded on the client if JS is available, but it also doesn't warrant a separate UI library, as Astro already allows me to achieve this :/

ripe breach Dec 6, 2023, 2:51 PM

#

Yeah this feature isn't implemented (AFAIK!) at the moment but it has been discussed. I can't remember if there was an issue on GH about it or was just on discord. I'll do some digging but yeah it has been discussed

mellow dune Dec 6, 2023, 3:17 PM

#

thanks! glad to know I'm not the only one running into this

#

would you happen to know if this is something a first-time contributor could tackle? doesn't seem too complex of a change on paper at first

ripe breach Dec 6, 2023, 3:21 PM

#

Tbh I'd love this too, this is something that would be useful for me! I have no idea how easy/hard it is to implement tho

tiny coral Dec 6, 2023, 3:23 PM

#

would would be the difference between a normal astro component and one with client:load?

mellow dune Dec 6, 2023, 3:33 PM

#

I'd expect the one with client:only * to not be included in the clients that don't have JavaScript enabled

tiny coral Dec 6, 2023, 3:35 PM

#

how would it work on browsers that do have it enabled

mellow dune Dec 6, 2023, 4:08 PM

#

You'd ~~just~~ include the Astro component's output dynamically client-side instead of doing it on the server

tiny coral Dec 6, 2023, 4:09 PM

#

hmm that would be new

#

astro's component output is a string, not dom elements

#

and it composes several different shapes of components including mdx, promises, html, svg, md, astro, and of course other framework components

#

would that mean we ship all of these to the browser as well

mellow dune Dec 6, 2023, 4:27 PM

#

but you don't ship those parts to the browser with SSR, right? so why consider them for client-side loading?

#

(I want to thank you for the discussion as well! just migrated my site to Astro 2 days ago so not familiar with under-the-hood things yet)

tiny coral Dec 6, 2023, 4:29 PM

#

sure no problem, the more people understand this the better

tiny coral Dec 6, 2023, 4:30 PM

#

mellow dune but you don't ship those parts to the browser with SSR, right? so why consider t...

you are right, we dont ship it to the browser with ssr, we ship the html string they generate instead

#

why consider them for client-side loading?
thats what i was hoping to understand from you lol

mellow dune Dec 6, 2023, 4:51 PM

#

i guess i was after a little bit too much DX comfort for a very niche use-case, I can just as well handle that in the Astro file with an empty div and configuring its text content with a script block. it'll just leave behind an empty element if unused 👌

tiny coral Dec 6, 2023, 4:59 PM

#

thanks that help me understand a bit

#

you want to be able to use astro the html templating language for client side rendering?

mellow dune Dec 6, 2023, 5:00 PM

#

yeah exactly. I would want to just keep a few pieces displayed only for JS-enabled users, but I don't want to pull in Svelte or Vue for my project just for that

#

client:only initially seemed perfect for that use case, but I do see how it's a little overly complicated for it

tiny coral Dec 6, 2023, 5:03 PM

#

this is certainly the first time this has come up

#

we are considering client:idle, client:visible for script tags

#

and there have been requests for reactivity

#

but fully client-side only is a new idea

#

im curious about the end effect, is it basically the opposite of <noscript>?

#

noscript contains html for js-disabled users

#

you want to render html only for js-enabled users

#

(without a full fledged ui framework)

mellow dune Dec 6, 2023, 5:16 PM

#

yup exactly. since that's the only way (i could think of) to present dynamic content to users, without having stale content served to the non-JS version (although that % might be miniscule)

#

really yak shaving here 😅

#

I think for 90% similar use-cases you can just have a static fallback that gets enhanced by dynamic data (general progressive enhancement) but i hadn't really thought of scenarios before where there is no static fallback to display (so an empty element that may or may not get populated)

#

anywho, I think we can put this thread to rest. thank you so much!

#Using client:only on Astro component (no UI library)