Islands and deployment
Keep islands independent
Use small hydration roots so one low-priority widget does not delay unrelated interaction.
8 minute lesson
Each client island is its own hydration root. A menu can use client:load while an off-screen chart uses client:visible; the chart does not delay the menu.
That independence is strongest when the components do not share live state. Pass each island the small, serializable initial data it needs:
<CartButton client:load initialCount={cart.count} />
<Reviews client:visible productId={product.id} />Functions, database clients, and server secrets cannot cross this boundary. Props are serialized into data the browser can receive, so treat them as public.
When islands must coordinate, choose deliberately. A browser custom event works for occasional messages. A shared external store fits state used by several islands in the same framework. If the interface changes as one tightly coupled unit, make it one larger island instead of building a fragile messaging system between tiny ones.
Use the Network and Performance panels to verify the architecture. The below-the-fold island should not load before its directive requires it, and interacting with one island should not wait for unrelated code.
Lesson completed