Compartilhe a mesma solicitação no navegador por um tempo.

O cache do navegador é usado com createCsrCache do Core, e o callApiSsrCache de /next é adicionado apenas quando o cache de dados do servidor Next.js é necessário.

O cache wrapper também é parte do commonService.

O código callApiClientCache/callApiServerCache desta página explica apenas a parte de cache do adaptador HTTP compartilhado do projeto. O serviço gerado pode ser configurado para importar essa função, então é mais claro ver a posição e o papel de cada wrapper ao primeiro olhar a estrutura completa de rxjsHttpService.ts/commonService.ts.

Código completo do commonService/rxjsHttpService.

Verifique a configuração completa de um arquivo desde createHttpClient até o wrapper de cache de sessão auth, CSR/SSR.

Cache CSR (cache do cliente)

createCsrCache<CacheName>()fornece callApiCsrCache(callApiFn, serviceArgs, cacheOptions) e 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");

No ambiente do servidor, não cria um mapa de cache CSR e chama o callApi original. No navegador, compartilha o resultado Observable da mesma chave de cache com shareReplay.

Adaptador Next.js: callApiSsrCache

É um helper SSR que usa next/cache (unstable_cache) do Next.js. Se for GET e cacheTime > 0, usa force-cache + revalidate, e outras requisições são executadas com no-store.

Você pode injetar Cookie/Authorization por requisição com headersProvider.
Se houver onServer401 em 401, será executado.

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$);

Não cache dados específicos do usuário

Resposta de autenticação

Não coloque respostas que variam de acordo com a autorização, como perfil, permissões e informações de pagamento, no cache compartilhado. Essas solicitações são gerais. callApioucacheTime: 0é mais seguro tratá-las como no-store.

Quando você agrupa navegador/servidor em um único wrapper de projeto

No serviço compartilhado, o navegador pode ser agrupado para usar createCsrCache e o servidor para usar callApiSsrCache. Isso é um padrão de configuração de projeto e não é uma estrutura obrigatória do 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,
      }),
    ),
  );
};

Quando usar o wrapper de cache no serviço gerado automaticamente, conecte esse wrapper apenas aos endpoints que precisam da funcionalidade de cache, e use o callApi normal para os demais.