createAsync frente a createResource: sin tupla, se lee llamando, Suspense por defecto

createAsync no es un createResource con otro nombre: es una relectura del mismo problema desde una filosofía distinta. Donde el recurso te entrega un panel de control —el dato, la carga, el error, botones de mutate y refetch— la derivación async te entrega un valor que se lee y ya. Donde el recurso te pide declarar la fuente por separado, la derivación la rastrea sola. Y donde el recurso expone la carga y el error como propiedades que consultas, la derivación las emite hacia fronteras que declaras una vez. Entender estas diferencias no es memorizar dos APIs: es ver qué modelo mental encarna cada una y cuándo cada uno es el correcto.

La tupla que desaparece

createResource devuelve una tupla: un accessor de datos enriquecido con loading, error y latest, más un objeto con mutate y refetch. Es un objeto-panel: todo lo que puedes saber y hacer con la petición cuelga de él.

import { createResource } from "solid-js";

const [usuario, { mutate, refetch }] = createResource(
  () => props.id,          // fuente explicita
  (id) => getUsuario(id)   // fetcher que recibe la fuente
);

usuario();          // el valor, o undefined mientras carga
usuario.loading;    // boolean de carga
usuario.error;      // el error si la promesa rechazo
usuario.latest;     // ultimo valor durante una recarga

createAsync colapsa todo eso en un accessor con una sola propiedad extra, latest. No hay loading, no hay error, no hay mutate ni refetch colgando del valor: la carga se declara con Suspense, el error con ErrorBoundary, y la revalidación la gobierna el query que lees.

import { createAsync } from "@solidjs/router";

const usuario = createAsync(() => getUsuario(props.id));

usuario();          // el valor; SUSPENDE si aun no esta
usuario.latest;     // ultimo valor sin suspender
// loading  -> lo maneja <Suspense>
// error    -> lo maneja <ErrorBoundary>
// refetch  -> revalidate(getUsuario.key) del router

La reducción no es cosmética. Con la tupla, cada componente que consume el recurso carga con la responsabilidad de comprobar loading y error y de pintar undefined con guardias. Con el accessor desnudo, esa responsabilidad sube a una frontera y desaparece del punto de uso: lees un valor que, dentro del Suspense, siempre está.

De propiedades de estado a fronteras declarativas

El cambio más profundo es dónde vive el estado de la petición. En createResource vive en el valor: preguntas usuario.loading allí donde lo necesites, y el spinner es una rama del render de ese componente. En createAsync vive en el árbol: la carga es una frontera Suspense que envuelve a uno o muchos consumidores, y el error una frontera ErrorBoundary. Un mismo Suspense coordina la carga de varias derivaciones a la vez; un mismo ErrorBoundary recoge el fallo de todas.

// createResource: el estado se comprueba en cada punto de uso
<Show when={!usuario.loading} fallback={<Spinner />}>
  <Show when={!usuario.error} fallback={<Error err={usuario.error} />}>
    <h1>{usuario()!.nombre}</h1>
  </Show>
</Show>

// createAsync: el estado son fronteras que envuelven, no ramas que comprueban
<ErrorBoundary fallback={(err) => <Error err={err} />}>
  <Suspense fallback={<Spinner />}>
    <h1>{usuario().nombre}</h1>
  </Suspense>
</ErrorBoundary>

Compara las dos columnas: la primera dispersa la lógica de estado por cada lectura; la segunda la concentra en dos fronteras y deja el cuerpo limpio. Esta es la misma inversión que Solid hizo con la reactividad —del control imperativo a la declaración— aplicada ahora a lo asíncrono.

Los tres canales de estado quedan así repartidos:

• Carga que antes leías en usuario.loading ahora la declara un Suspense que envuelve a los consumidores.
• Error que antes leías en usuario.error ahora lo recoge un ErrorBoundary en la frontera.
• Valor obsoleto que antes vivía en usuario.latest sigue en latest, la única propiedad que sobrevive en el accessor.

Cuándo cada uno sigue siendo el correcto

createAsync es el nuevo idioma por defecto para leer estado del servidor, pero createResource no se jubila. Elige el recurso cuando necesites sus controles imperativos: mutate para una actualización optimista inmediata antes de que la red confirme, o refetch para forzar una recarga puntual sin pasar por el sistema de query. El recurso te da los mandos en la mano; la derivación te da un modelo declarativo donde la revalidación la orquesta el router.

Y cuando quieras lo mejor de dos mundos —lectura como signal y grano fino sobre colecciones—, Solid Router ofrece createAsyncStore, que envuelve el mismo modelo pero reconcilia cada respuesta contra un store interno. Es la industrialización del patrón que ya montaste a mano en el nivel de estado: recurso para el ciclo, store para el grano fino, reconcile para coser cada instantánea preservando identidad. Con createAsyncStore una lista revalidada no remonta las filas que no cambiaron.

import { createAsyncStore } from "@solidjs/router";

// se lee como createAsync, pero por dentro reconcilia: grano fino en colecciones
const todos = createAsyncStore(() => getTodos(), { reconcile: { key: "id" } });
// <For each={todos()}> no remonta filas intactas al revalidar

Y donde createResource te ofrecía refetch, createAsync delega la recarga en el sistema de query: llamas a revalidate con la clave de la consulta —o dejas que una action la invalide sola tras una mutación— y todas las derivaciones que la leen se recalculan a la vez. La imperatividad de recargar no desaparece, se centraliza en la caché en lugar de colgar de cada valor, y eso es justo lo que permite que una escritura invalide de golpe cuantas vistas dependan del dato.

import { revalidate } from "@solidjs/router";

// fuerza la recarga de una query; toda createAsync que la lea se actualiza
await revalidate(getUsuario.keyFor(props.id));
// o revalidate(getUsuario.key) para invalidar todas sus variantes

flowchart TD
A[necesito leer estado del servidor] --> B{necesito mutate o refetch imperativos}
B -->|si| R[createResource con su tupla de control]
B -->|no| C{la respuesta es una coleccion con identidad}
C -->|si| S[createAsyncStore reconcilia grano fino]
C -->|no| D[createAsync accessor desnudo]
style D fill:#a6e3a1,color:#11111b
style S fill:#89b4fa,color:#11111b
style R fill:#f9e2af,color:#11111b