SSRT

SSRT allows to define the initial content that the server gives to a Client component before its code is run in the browser.

The SSRT is written between the component tags:

<@Greeting name="George">
    <p>Hola, George.</p>
</@Greeting>

In this example, the server sends <p>Hola, George.</p> as part of the initial HTML. When the Client component is activated, replace that content with its final interface.

SSRT means Server-Side Rendered Temple.

Initial content

The SSRT may contain HTML, evaluated expressions on the server and GOX components.

func ShowGreeting(isLogin bool) gox.Component {
    name := "George"

    if isLogin {
        return <@Greeting name={{name}}>
            <section class="greeting">
                <h2>Hola, {{name}}</h2>
                <p>Bienvenido de nuevo...</p>
            </section>
        </@Greeting>
    }

    return <@Greeting name={{name}}>
        <section class="greeting">
            <h2>Hola, {{name}}</h2>
            <p>Debes iniciar sesión.</p>
        </section>
    </@Greeting>
}

In this example, the server uses isLogin to determine the initial status that the browser will receive.

The component Greeting receives the same value through the property name, while the SSRT immediately presents the content corresponding to the status of the session.

The browser receives this content without waiting to download or run JavaScript.

See the documentation for Components to learn how to create and reuse GOX components.

Relationship to the Client component

The SSRT and the Client component represent two different moments of the interface:

1. The server generates and sends the SSRT.
2. The browser presents the initial content.
3. GOX loads the Client component according to the hydration strategy.
4. The framework replaces the SSRT with the final interface.

The SSRT does not run the logic of the Client component. Its status, events and updates start to work when the framework rides the component into the browser.

GOX also does not automatically synchronize the structure of the SRRT with the internal structure of the component. Both must consistently represent the same initial state to avoid unnecessary visual changes.

Without SSRT

A Client component can be declared without initial content:

<@Greeting name="George" />

In this case, the element remains empty until the component is mounted in the browser.

When an island is set up without SSRT and without attribute adapt, GOX expands it vertically from zero height to the initial height of the component for 220 ms. Then it recovers its normal layout behavior. This expansion does not require transition; if an entry transition is configured, it can be carried out together with it.

The expansion is automatic and does not depend on the movement emulation of the browser or the prefers-reduced-motion. It is omitted if the browser does not have Web Animations. The CSS animations of a transition explicit continue to apply and can be adapted by their own media wants. It only encourages initial input, not subsequent size changes by images, data or interaction.

This form can be used when it is not necessary to present content before running JavaScript.

When JavaScript is not available

If JavaScript does not load or cannot be run, the SSRT remains visible.

For this reason, it can be used to preserve important information, navigation or non-interactive representation of the component.

Actions that depend on the Client framework, such as events, local status or dynamic updates, will not be available until JavaScript runs.

Best practices

• Use the SSRT to present a useful representation of the initial state.
• It allows the server to determine the initial content when it depends on sessions, permissions or data available during the request.
• Keep the SSRT visually consistent with the final interface.
• It sends to the Client component the properties necessary to rebuild the same initial state.
• It includes the main information that the user should see before running JavaScript.
• Avoid presenting controls as interactive when they are not yet able to respond.
• It involves the Client components within GOX components when you need to reuse them from other modules.
• Allows the SSRT when showing a temporary empty space is appropriate.
• Do not double on the server the interactive logic that belongs to the Client component.

See also

• Components

Resizing when replacing SSRT

When the SSRT and the mounted component have different dimensions and are omitted adapt, GOX encourages the width and height between the two for 220 ms. It works both by growing and by reducing and does not require transition. If it is declared, the fade is run at the same time; GOX waits for both animations to finish before the SSRT is removed. At the end, the temporal dimensions are removed to recover the normal layout. This covers the initial replacement, not subsequent changes by data, images or interaction.

The replacement retains a single instance of the component: it does not restart its state or repeat the assembly effects at the end of the animation. display: contents; SSRT and transient styles are removed. This also applies when used isolate.

See Adapt to choose the axes and anchorage of the dimensional adaptation, or to deactivate it without affecting the CSS effects.