Hydrate

hydrate determines when a Client component is loaded and activated in the browser.

<@Menu hydrate="visible" />

If omitted, GOX uses load as default value.

See the documentation for Client to know the overall functioning of these components.

Accepted values

load

load activate the component as soon as GOX processes it in the browser.

<@Header hydrate="load" />

It is the default strategy. Therefore, these two statements have the same behavior:

<@Header />
<@Header hydrate="load" />

The activation begins when the Client element connects to the document and the GOX runtime processes it. It does not wait for the event load from the browser.

This strategy is appropriate for components that must be immediately available, such as interactive headers, main forms, navigation menus and essential controls.

idle

idle postpone the activation until the browser has time available.

<@Recommendations hydrate="idle" />

It allows the browser to first meet the most important tasks of the page before loading and activating the component.

This strategy is appropriate for secondary components that must be automatically activated but do not need to be available immediately.

If the browser does not support task planning during inactivity periods, GOX uses a deferred activation as an alternative.

visible

visible activate the component when it enters the visible area of the page.

<@Comments hydrate="visible" />

GOX looks at the component until it becomes visible. When that happens, it starts the activation and stops observing it.

This strategy is appropriate for components located outside the initial area of the screen, such as comments, galleries, lower sections or extensive content.

If the browser does not allow to detect when the component enters the visible area, GOX activates it immediately.

hover

hover activate the component when the pointer enters its area.

<@UserMenu hydrate="hover">
    <button>Menú de George</button>
</@UserMenu>

GOX awaits the first event pointerenter received by the component.

This strategy is appropriate for menus, cards, previews and other elements whose interaction usually begins when the user places the pointer on them.

It should not be used as the only way to activate essential components, especially when they must also work on devices that do not use pointer.

interaction

interaction activates the component when it detects the first user interaction.

<@ContactForm hydrate="interaction">
    <button>Contactar</button>
</@ContactForm>

The activation can start when the user:

• Press a pointer button inside the component.
• Touch the component on a touch screen.
• Press a key while an element of the component has the focus.
• Move the focus to an element located within the component.

This strategy is appropriate for components that only need JavaScript when the user tries to use them.

Dynamic values

hydrate you can also receive the result of an expression of Go:

func ShowMenu() gox.Action {
    mode := "visible"

    return <@Menu hydrate={{mode}} />
}

The expression must produce a string with one of the accepted values:

load
idle
visible
hover
interaction

The values written directly are validated during the compilation:

<@Menu hydrate="later" />

This statement makes a mistake because later It's not a valid strategy.

Dynamic values are known during the run. If the expression produces an unknown strategy, the component cannot be activated and GOX will show an error in the browser.

hydrate needs a value and cannot be used as a boolean prop:

<@Menu hydrate />

See the documentation for Statements to know the full syntax of the components Client.

SSRT during waiting

When a strategy postpones activation, the SSRT content generated by GOX remains visible:

<@Profile hydrate="visible">
    <article>
        <h2>George</h2>
        <p>Cargando perfil interactivo...</p>
    </article>
</@Profile>

The browser shows this static content while the component expects the selected strategy to be met.

When the time of activation comes, GOX loads and activates the Client component.

Independent activation

Each Client component manages its own strategy:

<@Header hydrate="load" />
<@Recommendations hydrate="idle" />
<@Comments hydrate="visible" />

In this example, Header is activated immediately, Recommendations wait until the browser has time available and Comments wait until you enter the visible area.

This allows you to choose the strategy of each component according to its importance and location within the page.

Best practices

• Limit hydrate when you want to use the default behavior load.
• Use load for components to be available immediately.
• Use idle for secondary components to be automatically activated.
• Use visible for components located outside the initial area of the screen.
• Use hover when the use of a pointer is a natural part of the interaction.
• Use interaction when the component only needs to be activated when trying to use it.
• It includes a useful SSRT when the activation can be postponed.
• It prefers static values when the strategy is known in advance.
• Try the deferred strategies with keyboard, pointer and touch screens.

To learn more about Transition, check your documentation.

See also

• Client
• Statements
• Transition