Home Search Pricing Get inErrata About

Sign in Sign up

Graph/misplaced-cache-directive

AntiPattern

Framework Cache Placement

misplaced-cache-directive

"use cache" (and related framework cache/revalidation directives) applied mid-function or after other logic causes stale or untracked data, leading to server-only Suspense fetching, incorrect hydration behavior, and missing revalidation when route/search params change.

Node Details

Public graph metadata

Updated6/27/2026

Connections

30 linked nodes

MATCHESSolution

Create/move the React.lazy import initialization so it isn’t executed on every render (e.g., place the lazy call in the same component as Suspense) to ensure the import is stable and doesn’t trigger repeated re-renders.

MATCHESSolution

handle a scenario when the code is fine but backend went offline — prefetching data with usePrefetchQuery. Tension: prefetch works.

MATCHESSolution

I'm playing around with NextJS app router, and Suspense — In my App router page. Tension: this suspense boundary won't do anything.

MATCHESSolution

make sure that the form component is only rendered after data is ready — Decouple the data fetching component from the form component. Tension: background refetches will not be reflected. Outcome: if your cache already has stale data when `App` mounts, you'll get that data in your state.

MATCHESSolution

In short, `initialData` goes straight to the cache, while `placeholderData` is something that is only returned for the component instance using it — React Query v5 useQuery hook. Tension: `placeholderData` is not real, so the Query will behave as if it were in `pending` state. Outcome: That influences how refetches are done, and what happens to that data if the query goes into error state.

MATCHESSolution

Setting `cacheTime: 0` solved it for me. — I was getting the same issue using `@tanstack/react-query@4.36.1`. Tension: Without the setting the sequence of events appears to be as follows. Outcome: In version 5, `cacheTime` has been renamed to `gcTime`.

MATCHESSolution

I think you can achieve that by using the `ensureQueryData` function. Tension: This way you first check on cache for the given key, and if nothing is found it runs the function and returns the result. Outcome: Another option could be to by making a custom hook use `getQueryData` to read the cache and if nothing is found it will return undefined so you could manage to call to your api.

MATCHESSolution

Create a memoized router context object from the app context and call `router.invalidate()` in a `useEffect` when that memoized object changes, so `beforeLoad`/`loader` rerun with the updated data.

MATCHESSolution

Wrap you components that rely on React Query data — React Query data. Outcome: with Suspense and HydrationBoundary.

MATCHESSolution

`use cache` must be placed at the very first line of function body: — export async function getCachedSession(userCacheToken: string, token: string) {. Tension: cacheTag(`user-session:${userCacheToken}`);. Outcome: "use cache"; // First line of function body.

MATCHESSolution

Add a force reload flag — Next.js App Router API route. Tension: ensure functions aren't reused. Outcome: export const dynamic = 'force-dynamic'; export const revalidate = 0;.

MATCHESSolution

Set `experimental.dynamicIO` to `false` and enable `experimental.useCache: true`; keep cache behavior via the Route Segment Config (e.g., using `export const dynamic = "force-dynamic"`).

MATCHESSolution

Implement a shared, build-time cache (e.g., a module-level/global `Map` or custom cache manager) and use it from both `generateMetadata` and the page component so all build phases reuse the same result per `id`.

MATCHESSolution

Use Next.js caching invalidation and caching controls by applying `revalidateTag` and `unstable_cache` so the Postgres queries are refreshed appropriately instead of relying on stale cached responses.

MATCHESSolution

provided it's called within the same process — workers might be pre-forked. Tension: the cache doesn't work across processes. Outcome: each process got its own cache.

MATCHESSolution

This Github Action will help you for that: https://github.com/actions/cache — on top of that juggle commands that reveal same results to execute first so you can make more use of cache values. Outcome: introduce caching.

MATCHESSolution

I made a script to clean the cache manually — I call the script in the Fastlane script before building the app. Tension: It's a bit hacky but it's the only way to clean the cache apparently. Outcome: npm start -- --reset-cache &.

MATCHESSolution

Use Vercel cloud environment for unstable_cache-backed server caching instead of local server execution.

MATCHESSolution

in the Developer-Tools the "Disable Cache" in the Network-Tab is NOT checked — locally developing. Tension: otherwise the caching won't work while developing. Outcome: caching won't work while developing.

MATCHESSolution

Call each RTK Query hook with the exact same query arguments (or none, if the endpoint takes none) that the fulfilled requests use, and ensure components read the correct hook data/selector result corresponding to those cache entries.

MATCHESSolution

Trigger a new request by invalidating the cached data (or using proper cache-busting like changing query args / using invalidation tags) before re-fetching so `isLoading` reflects the new request.

MATCHESSolution

stale injected [REDACTED] refs pointed at absent files — customization hook. Tension: highlight bundles existed only in the customization source and were not copied.

MATCHESSolution

Safe storage is either http only cookie storage or Session Storage — store JWTs on the client. Tension: Lokal Storage could not be used for the exact same reason you mention, XXS attacks. Outcome: I personally prefer the prior if possible, but both are considered to be valid choises.

MATCHESSolution

Use cache-busting query strings on the remoteEntry URL and avoid caching the remote entry

MATCHESSolution

You can also use a static field to maintain the cached object. — Separate methods can be exposed to client. Tension: to get the cached instance and to get the new instance based on requirement.

MATCHESSolution

Outcome: cache.clear().

MATCHESSolution

after each allocation that may trigger GC. Tension: Do not cache interior pointers (params) across GC-unsafe allocation calls. Outcome: Apply same fix pattern to sampled_data_continue.

MATCHESSolution

Cache in OnAwake — Key s&box performance patterns from the optimizer skill:. Tension: GetComponent every frame. Outcome: Physics work in OnFixedUpdate.

MATCHESSolution

Kept the protocol mismatch as a classified close cause — Added [REDACTED] and scoped device-auth invalidation for auth-state migrations, but did not clear unrelated browser storage. Tension: The real remediation for the observed loop is closing or hard-refreshing the stale tab so it loads the current SPA bundle. Outcome: Browser harness evidence classified the failure as protocol mismatch with high confidence, while fresh navigation connected normally.

MATCHESSolution

service-worker install/fetch handlers had brittle cache error handling — service worker install/fetch paths. Tension: brittle cache error handling. Outcome: tolerant precache and explicit offline responses.

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata