Cache components manual

[oBusk]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
npm-diff	Ready	Preview, Comment	Jan 9, 2026 0:30am

[Copilot]

Pull request overview

This PR migrates the codebase from Next.js's unstable_cache API to the new "use cache" directive with cacheLife() for component and function-level caching. It enables the cacheComponents configuration option and adds Suspense boundaries where needed to support this new caching strategy.

Key changes:

• Replaces unstable_cache with "use cache" directive across API functions and React Server Components
• Implements granular cache duration strategies using cacheLife() with different durations ("max", "hours", "days") based on data staleness requirements
• Adds comprehensive error handling and status-specific caching logic for external API calls (Bundlephobia, Packagephobia)

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/lib/npmDiff/npmDiff.ts	Converted from unstable_cache wrapper to "use cache" directive with max cache duration
src/lib/destination/canonicalSpec.ts	Migrated to "use cache" with hours-based caching (replacing 30-minute revalidation)
src/lib/api/packagephobia/packagephobia.ts	Added "use cache" with status-specific cache durations and improved error handling
src/lib/api/npm/getVersionData.ts	Removed dual caching (React cache + unstable_cache), replaced with single "use cache" directive
src/lib/api/bundlephobia/bundlephobia.ts	Added "use cache" with status-specific cache durations and comprehensive error handling
src/app/page.tsx	Added "use cache" with max duration to the index page component
src/app/api/-/versions/route.ts	Removed edge runtime configuration
src/app/about/api/page.tsx	Added "use cache" with max duration, removed Node.js runtime specification
src/app/_layout/Header/NavLink.tsx	Added NavLinkFallback component for Suspense fallback UI
src/app/_layout/Header/Header.tsx	Wrapped navigation links in Suspense with fallback component
src/app/[...parts]/page.tsx	Wrapped page component in Suspense boundary
src/app/[...parts]/_page/PackagephobiaDiff.tsx	Added "use cache" with hours-based caching
src/app/[...parts]/_page/NpmDiff/NpmDiff.tsx	Added "use cache" with max duration
src/app/[...parts]/_page/BundlephobiaDiff.tsx	Added "use cache" with hours-based caching
next.config.ts	Enabled cacheComponents: true configuration
jest.setup.js	Added mock for cacheLife function

[Copilot]

Add a comment explaining why cache: 'no-store' is used here, similar to the comments in bundlephobia.ts that say 'Opt out of fetch-level caching, we have caching in function'.

Suggested change

	// Ensure no fetch-level caching, we have caching in function
	// Opt out of fetch-level caching, we have caching in function

[Copilot]

Add a JSDoc comment explaining that this component is used as a Suspense fallback for NavLink, which reads from client state (usePathname) that may not be available during SSR.

Suggested change

	/**
	* Lightweight fallback version of {@link NavLink} used as a Suspense fallback.
	*
	* Unlike {@link NavLink}, this component does not read client navigation state
	* via `usePathname`, so it is safe to render during SSR when that client state
	* may not yet be available. It preserves the same visual styling without
	* applying active-link highlighting.
	*/