Add caching to category page

[damianlegawiec]

Summary by CodeRabbit

• Performance

  • Implemented remote caching for category data with optimized cache lifetime and tagging to improve page load performance.

• Refactor

  • Reorganized category page header UI into a dedicated component for improved maintainability.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
storefront	Ready	Preview, Comment	Apr 10, 2026 4:25pm

[coderabbitai]

Walkthrough

A new CategoryBanner component was created to encapsulate category page header UI (breadcrumbs, title, description, and subcategory links). The category page now delegates to this component instead of rendering inline. The getCategory function was refactored to use a cached helper with Next.js remote caching directives.

Changes

Cohort / File(s)	Summary
CategoryBanner Component src/app/[country]/[locale]/(storefront)/c/[...permalink]/CategoryBanner.tsx	New async React component that renders category banner with breadcrumbs, title, description, and subcategory links. Implements Next.js remote caching directives for optimized performance.
Category Page Refactoring src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx	Extracted banner/header UI logic from page component into the new CategoryBanner component. Reduces page.tsx complexity by delegating category title, breadcrumbs, and subcategory rendering responsibilities.
Category Data Fetching src/lib/data/categories.ts	Updated getCategory to route through a new cachedGetCategory helper with remote caching directives. Narrowed params type from CategoryListParams to { expand?: string[] }.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• Improve category page layout #105 — Modifies the same category page banner rendering in page.tsx and restructures how the CategoryBanner is implemented.
• Fixed 404 on Category pages #120 — Addresses the conditional hero backgroundImage logic based on category.image_url that is now encapsulated in CategoryBanner.
• Fixed: use remote cache to cache categories/market calls properly #112 — Introduces remote caching directives ("use cache: remote") for category data fetches similar to the cached helper pattern in this PR.

Poem

🐰 A banner hops into its own cozy component,
With breadcrumbs and subcategories all neat and heaven-sent,
Cache tags now whisper to the remote sky so blue,
Category pages refactored—organized through and through! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main objective of the pull request, which adds caching directives and optimizations across the category page components and data layer.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/cache-category-page

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (2)

src/app/[country]/[locale]/(storefront)/c/[...permalink]/CategoryBanner.tsx (1)

12-16: Add an explicit return type on CategoryBanner.

Line 12 should declare the return type instead of relying on inference.

♻️ Proposed refactor

 export async function CategoryBanner({
   category,
   basePath,
   locale,
-}: CategoryBannerProps) {
+}: CategoryBannerProps): Promise<JSX.Element> {

As per coding guidelines: "Use strict TypeScript type checking. Always define explicit return types for functions, use 'satisfies' for type checking object literals, and avoid 'any' (use 'unknown' instead)."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/`[country]/[locale]/(storefront)/c/[...permalink]/CategoryBanner.tsx
around lines 12 - 16, The CategoryBanner async component is missing an explicit
return type; update the function signature for CategoryBanner to declare its
return type (e.g., change to export async function CategoryBanner({ category,
basePath, locale, }: CategoryBannerProps): Promise<JSX.Element> { … }) so the
async React component returns a typed Promise<JSX.Element> and satisfies strict
TypeScript checks.

src/lib/data/categories.ts (1)

22-38: Add explicit return types to cachedGetCategory and getCategory.

Line 22 and Line 33 currently rely on inference; please make return types explicit per repo TS rules.

♻️ Proposed refactor

 import type { CategoryListParams, ProductListParams } from "@spree/sdk";
 import { cacheLife, cacheTag } from "next/cache";
 import { getClient, getLocaleOptions } from "@/lib/spree";
 
+type GetCategoryResponse = Awaited<
+  ReturnType<ReturnType<typeof getClient>["categories"]["get"]>
+>;
+
 async function cachedListCategories(
   params: CategoryListParams | undefined,
   options: { locale?: string; country?: string },
 ) {
@@
 async function cachedGetCategory(
   idOrPermalink: string,
   params: { expand?: string[] } | undefined,
   options: { locale?: string; country?: string },
-) {
+): Promise<GetCategoryResponse> {
   "use cache: remote";
   cacheLife("minutes");
   cacheTag("category");
   return getClient().categories.get(idOrPermalink, params, options);
 }
@@
 export async function getCategory(
   idOrPermalink: string,
   params?: { expand?: string[] },
-) {
+): Promise<GetCategoryResponse> {
   const options = await getLocaleOptions();
   return cachedGetCategory(idOrPermalink, params, options);
 }

As per coding guidelines: "Use strict TypeScript type checking. Always define explicit return types for functions, use 'satisfies' for type checking object literals, and avoid 'any' (use 'unknown' instead)."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/lib/data/categories.ts` around lines 22 - 38, Both cachedGetCategory and
getCategory lack explicit return types; add explicit Promise return types for
each (matching whatever type getClient().categories.get returns) instead of
relying on inference. Update cachedGetCategory to declare its return type as a
Promise of the category response type used by the client (import or reference
the client response type), and set getCategory to return the same explicit
Promise type; if you prefer a type-safe alias, derive it from the client method
(e.g., Awaited<ReturnType<typeof getClient().categories.get>>), and add any
needed imports—do not use any/unknown as the final return type.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/app/`[country]/[locale]/(storefront)/c/[...permalink]/CategoryBanner.tsx:
- Around line 12-16: The CategoryBanner async component is missing an explicit
return type; update the function signature for CategoryBanner to declare its
return type (e.g., change to export async function CategoryBanner({ category,
basePath, locale, }: CategoryBannerProps): Promise<JSX.Element> { … }) so the
async React component returns a typed Promise<JSX.Element> and satisfies strict
TypeScript checks.

In `@src/lib/data/categories.ts`:
- Around line 22-38: Both cachedGetCategory and getCategory lack explicit return
types; add explicit Promise return types for each (matching whatever type
getClient().categories.get returns) instead of relying on inference. Update
cachedGetCategory to declare its return type as a Promise of the category
response type used by the client (import or reference the client response type),
and set getCategory to return the same explicit Promise type; if you prefer a
type-safe alias, derive it from the client method (e.g.,
Awaited<ReturnType<typeof getClient().categories.get>>), and add any needed
imports—do not use any/unknown as the final return type.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 66e14cb6-fa75-4677-8373-ac97223af017

📥 Commits

Reviewing files that changed from the base of the PR and between c40d5e8 and f94cc4c.

📒 Files selected for processing (3)

• src/app/[country]/[locale]/(storefront)/c/[...permalink]/CategoryBanner.tsx
• src/app/[country]/[locale]/(storefront)/c/[...permalink]/page.tsx
• src/lib/data/categories.ts