What is Client directive?
An attribute like client:load that turns a component into an island and says when its JavaScript should load.
There are five: client:load (right away), client:idle (when the browser is quiet), client:visible (when scrolled into view), client:media (when a screen-size rule matches) and client:only (browser only, no server rendering). Without one, a component is plain HTML.