Skip to main content

nextbase-cache-components

Use for NextBase Cache Components, Partial Prefetching, use cache, React request memoization, Suspense placement, route prerendering, or separating shared cached data from personalized Supabase data.

Source facts

Repository
imbhargav5/nextbase-nextjs-supabase-starter
Last source activity
September 1, 2026 at 00:20
Detected SKILL.md language
English
Stars
827
Forks
215

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
name
nextbase-cache-components
description
Use for NextBase Cache Components, Partial Prefetching, use cache, React request memoization, Suspense placement, route prerendering, or separating shared cached data from personalized Supabase data.
# NextBase Cache Components Load `next-cache-components-optimizer` for current Next.js mechanics and `vercel-react-best-practices` for React performance guidance. This project enables `cacheComponents` and `partialPrefetching` in `apps/web/next.config.ts`. ## Classify Data First - Shared, public, deterministic data may be persisted with `'use cache'` when it does not read cookies, headers, session state, or user-specific inputs. - Personalized or authorization-sensitive data must stay dynamic and must not enter a shared cache scope. - React `cache()` in `src/rsc-data` deduplicates work during one server render. It is not a persistent cross-request cache. Never create an anonymous Supabase client merely to make personalized data cacheable. A different client does not change the data's privacy classification. ## Composition Pattern 1. Keep the route shell and shared headings cacheable when safe. 2. Move cookie, claim, search-param, and personalized reads into a dynamic child. 3. Put a focused `<Suspense>` boundary directly around that dynamic child. 4. Use a stable fallback with the same broad geometry as the resolved UI. 5. Start independent reads before awaiting them and avoid serial waterfalls. Keep `'use cache'` at the narrowest scope with an explicit, reviewable data contract. Do not hide runtime APIs behind helpers called from a cached scope. ## Invalidation After a successful mutation, invalidate the exact path or tag that owns the stale shared data. Personalized dynamic reads normally refresh through navigation or re-render and should not be placed in a shared tag to force reuse. ## Verification Run the Next.js build to catch prerender/runtime boundary errors. Exercise a cold navigation, a prefetched navigation, an anonymous request, and two distinct authenticated users to prove no personalized data crosses requests.
View on GitHub