Comparte temporalmente la misma solicitud en el navegador.

El caché del navegador se utiliza con createCsrCache del Core, y solo se agrega callApiSsrCache de /next cuando se necesita caché de datos del servidor de Next.js.

El wrapper de caché también es parte de commonService.

El código de callApiClientCache/callApiServerCache de esta página explica solo la parte de caché del adaptador HTTP común del proyecto. Como el servicio generado puede configurarse para importar esta función, es más claro ver la ubicación y el rol de cada wrapper al observar primero la estructura de rxjsHttpService.ts/commonService.ts.

Código completo de commonService/rxjsHttpService

Revisa la configuración completa de un solo archivo desde createHttpClient hasta el wrapper de caché de sesión auth, CSR/SSR.

Caché CSR (caché del cliente)

createCsrCache<CacheName>()proporciona callApiCsrCache(callApiFn, serviceArgs, cacheOptions) y removeCsrCache(cacheName).

import {
  createCsrCache,
  type ServiceArguments,
} from "@byeolnaerim/typed-rx-http";
import type { paths as Paths } from "./@types/ApiTypes";

type CacheNames = "adminList" | "profile";

const csrCache = createCsrCache<CacheNames>();

export const callApiClientCache = <R>(
  args: ServiceArguments<Paths, any, any, R>,
  cache: {
    cacheName: CacheNames;
    cacheTime: number;
    cacheSize?: number;
  },
) => csrCache.callApiCsrCache(
  client.callApi,
  args as any,
  cache as any,
);

csrCache.removeCsrCache("adminList");
csrCache.removeCsrCache("any-prefix");

En el entorno del servidor, no se crea un mapa de caché CSR y se llama directamente a callApi. En el navegador, se comparte el resultado Observable de la misma clave de caché con shareReplay.

Adaptador de Next.js: callApiSsrCache

Es un helper SSR que utiliza next/cache(unstable_cache) de Next.js. Si es GET y cacheTime > 0, se utiliza force-cache + revalidate, y otras solicitudes se ejecutan con no-store.

Se pueden inyectar Cookies/Authorization por solicitud con headersProvider.
Se ejecuta onServer401 si existe en 401.

import type { paths as Paths } from "./@types/ApiTypes";
import { firstValueFrom } from "rxjs";
import {
  callApiSsrCache,
  redirectToUnauthorizedOnServer401,
} from "@byeolnaerim/typed-rx-http/next";

const apiUrl = process.env.NEXT_PUBLIC_API_URL!;

const headersProvider = async () => {
  const { cookies } = await import("next/headers");
  const cookieStore = await cookies();

  const cookieHeader = cookieStore
    .getAll()
    .map((c) => `${c.name}=${c.value}`)
    .join("; ");

  const accessToken = cookieStore.get("accessToken")?.value;

  return {
    ...(cookieHeader ? { Cookie: cookieHeader } : {}),
    ...(accessToken
      ? { Authorization: `Bearer ${accessToken}` }
      : {}),
  };
};

const obs$ = callApiSsrCache<Paths, { ok: true }, "adminList">({
  baseUrl: apiUrl,
  serviceArguments: { url: "/api/secure", method: "get" },
  cacheForService: { cacheName: "adminList", cacheTime: 10_000 },
  headersProvider,
  onServer401: redirectToUnauthorizedOnServer401,
});

const res = await firstValueFrom(obs$);

No cachear datos específicos del usuario

Respuesta de autenticación

No coloque respuestas que varían según la autorización, como perfil, permisos e información de pago, en el cache compartido. Estas solicitudes son generales. callApio usarcacheTime: 0es más seguro tratarlo como no-store.

Cuando se agrupan navegador/servidor en un solo wrapper de proyecto

En el servicio común, el navegador puede dividirse en createCsrCache y el servidor en callApiSsrCache. Este es un patrón de configuración de proyecto y no es una estructura obligatoria del Core.

commonService.ts

const csrCache = createCsrCache<"memberList" | "profile">();

export const callApiClientCache = (
  serviceArguments,
  cacheForService,
) => csrCache.callApiCsrCache(
  callApi,
  serviceArguments,
  cacheForService,
);

export const removeCsrCache = csrCache.removeCsrCache;

commonService.ts

export const callApiServerCache = (serviceArguments, cacheForService) => {
  if (typeof window !== "undefined") {
    return callApiClientCache(serviceArguments, cacheForService);
  }

  return from(
    import("@byeolnaerim/typed-rx-http/next"),
  ).pipe(
    mergeMap(({ callApiSsrCache }) =>
      callApiSsrCache({
        baseUrl: process.env.NEXT_PUBLIC_API_URL || "",
        serviceArguments,
        cacheForService,
        headersProvider,
      }),
    ),
  );
};

Cuando se utiliza un wrapper de caché en el servicio de generación automática, este wrapper se conecta solo a los endpoints que necesitan funcionalidad de caché, y el resto utiliza callApi normalmente.