CSR Cache & Next.js

Der Browser-Cache wird mit Core's createCsrCache verwendet, und /next's callApiSsrCache wird nur hinzugefügt, wenn der Next.js-Server einen Daten-Cache benötigt.

Der Cache-Wrapper ist ebenfalls Teil des commonService.

Der Code für callApiClientCache/callApiServerCache auf dieser Seite erklärt nur den Cache-Teil des gemeinsamen HTTP-Adapters des Projekts. Da der generierte Service so konfiguriert werden kann, dass er diese Funktion importiert, ist es klarer, die gesamte Struktur von rxjsHttpService.ts/commonService.ts zuerst zu betrachten, um die Position und Rolle jedes Wrappers zu verstehen.

Gesamter Code von commonService/rxjsHttpService

Überprüfen Sie die gesamte Konfiguration einer Datei von createHttpClient bis zu Session-Auth und CSR/SSR-Cache-Wrapper.

CSR-Cache (Client-Cache)

createCsrCache<CacheName>()stellt callApiCsrCache(callApiFn, serviceArgs, cacheOptions) und removeCsrCache(cacheName) zur Verfügung.

ts
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");

In der Serverumgebung wird kein CSR-Cache-Map erstellt, und der ursprüngliche callApi wird direkt aufgerufen. Im Browser wird das Observable-Ergebnis mit demselben Cache-Schlüssel mit shareReplay geteilt.

Next.js-Adapter: callApiSsrCache

Ein SSR-Helfer, der next/cache (unstable_cache) von Next.js verwendet. Wenn es sich um GET handelt und cacheTime > 0 ist, wird force-cache + revalidate verwendet, während andere Anfragen mit no-store ausgeführt werden.

  • Mit headersProvider können Cookie/Authorization pro Anfrage injiziert werden.
  • Wenn es bei 401 onServer401 gibt, wird es ausgeführt.
ts
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$);

Benutzerspezifische Daten nicht cachen

Wenn Browser/Server in einem einzigen Projekt-Wrapper zusammengefasst werden.

Im gemeinsamen Service kann der Browser mit createCsrCache und der Server mit callApiSsrCache aufgeteilt werden. Dies ist ein Projektstrukturmuster und keine zwingende Struktur des Core selbst.

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

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

export const removeCsrCache = csrCache.removeCsrCache;
commonService.ts
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,
      }),
    ),
  );
};

Wenn Sie den Cache-Wrapper im automatisch generierten Service verwenden, verbinden Sie diesen Wrapper nur mit Endpunkten, die Cache-Funktionen benötigen, und verwenden Sie für die anderen einfach den normalen callApi.

© 2026 Byeolnaerim. Alle Rechte vorbehalten.EinführungDatenschutzrichtlinie