Paso 4

Datos con load()

load es un objeto literal, no una función — Nexa Core nunca ejecuta JavaScript del desarrollador, solo lo analiza. Declara una URL, y el resultado queda disponible como data dentro de la página.

Declarar load

export const load = { url: "/products/:slug" };

:slug se sustituye por el parámetro real de la ruta antes de pedir la URL contra NEXA_API_URL.

Usar los datos

export default function ProductPage() {
    return (
        <article>
            <h1>{data.name}</h1>
            <p>{data.price}</p>
        </article>
    );
}

data.* está disponible en el cuerpo JSX, en seo y en schema — resuelto en tiempo de build o al vuelo, según el comando.

Pre-renderizar rutas dinámicas

export const paths = { url: "/products" };
// nexa build pide /products, espera [{"slug":"iphone-17"}, ...]
// y genera dist/products/iphone-17/index.html real

Si la página también declara paths (misma forma que load), nexa build pide esa lista y genera un index.html real por cada combinación — HTML estático de verdad, sin servidor Nexa corriendo en producción.

Iterar listas con <For>

export const load = { url: "/products" };

export default function Catalog() {
    return (
        <ul>
            <For each={data.items}>
                {(item) => (
                    <li><a href={`/products/${item.slug}`}>{item.name}</a></li>
                )}
            </For>
        </ul>
    );
}

Un catálogo, un listado de artículos, un directorio — <For> es un patrón sintáctico más, reconocido igual que t() u onClick, nunca un .map() arbitrario: each solo acepta data.x/params.x, y el callback devuelve un único elemento JSX por ítem. Antes de esto, la única forma de mostrar una lista era dentro de una isla, perdiendo el HTML real que es la razón de ser de Nexa — con <For>, cada <li> es contenido indexable desde el primer byte.