Feedthejim/cache components

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__next-devtools__init",
+      "mcp__next-devtools__enable_cache_components",
+      "Bash(pnpm run build:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.gitignore

@@ -38,4 +38,5 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
+.env*.local

next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  cacheComponents: true,
   experimental: {
-    ppr: true,
     inlineCss: true,
   },
   reactCompiler: true,
@@ -10,6 +10,7 @@ const nextConfig = {
   },
   images: {
     minimumCacheTTL: 31536000,
+    qualities: [65, 75, 80],
     remotePatterns: [
       {
         protocol: "https",

package.json

@@ -18,7 +18,7 @@
     "@effect/platform": "^0.68.6",
     "@effect/platform-node": "^0.63.6",
     "@neondatabase/serverless": "^1.0.2",
-    "@next/env": "^14.2.15",
+    "@next/env": "16.1.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
@@ -43,10 +43,10 @@
     "jose": "^5.9.4",
     "linkedom": "^0.18.5",
     "lucide-react": "^0.453.0",
-    "next": "15.6.0-canary.60",
+    "next": "16.1.0",
     "openai": "^4.68.0",
-    "react": "19.0.0-rc-cd22717c-20241013",
-    "react-dom": "19.0.0-rc-cd22717c-20241013",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-scan": "^0.0.35",
     "slugify": "^1.6.6",
     "sonner": "^1.5.0",
@@ -56,11 +56,11 @@
   },
   "devDependencies": {
     "@types/node": "^20.16.12",
-    "@types/react": "npm:types-react@19.0.0-rc.1",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "drizzle-kit": "^0.26.2",
     "eslint": "^8.57.1",
-    "eslint-config-next": "15.0.0-rc.1",
+    "eslint-config-next": "16.1.0",
     "postcss": "^8.4.47",
     "postcss-hover-media-feature": "^1.0.2",
     "prettier-plugin-tailwindcss": "^0.6.8",
@@ -69,8 +69,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@types/react": "npm:types-react@19.0.0-rc.1",
-      "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
+      "@types/react": "19.2.7",
+      "@types/react-dom": "19.2.3",
       "react": "19.0.0-rc-cd22717c-20241013",
       "react-dom": "19.0.0-rc-cd22717c-20241013"
     }

src/app/(category-sidebar)/[collection]/page.tsx

@@ -2,20 +2,19 @@ import { Link } from "@/components/ui/link";
 import { db } from "@/db";
 import { collections } from "@/db/schema";
 import { getCollectionDetails } from "@/lib/queries";
+import { cacheLife } from "next/cache";
 
 import Image from "next/image";
 
 export async function generateStaticParams() {
   return await db.select({ collection: collections.slug }).from(collections);
 }
 
-export default async function Home(props: {
-  params: Promise<{
-    collection: string;
-  }>;
-}) {
-  const collectionName = decodeURIComponent((await props.params).collection);
+async function CachedCollectionPage({ collection }: { collection: string }) {
+  "use cache";
+  cacheLife({ revalidate: 60 * 60 * 24 }); // 1 day
 
+  const collectionName = decodeURIComponent(collection);
   const collections = await getCollectionDetails(collectionName);
   let imageCount = 0;
 
@@ -51,3 +50,13 @@ export default async function Home(props: {
     </div>
   );
 }
+
+export default async function Home(props: {
+  params: Promise<{
+    collection: string;
+  }>;
+}) {
+  const { collection } = await props.params;
+
+  return <CachedCollectionPage collection={collection} />;
+}

src/app/(category-sidebar)/page.tsx

@@ -1,9 +1,13 @@
 import { Link } from "@/components/ui/link";
 import { getCollections, getProductCount } from "@/lib/queries";
+import { cacheLife } from "next/cache";
 
 import Image from "next/image";
 
-export default async function Home() {
+async function CachedHomePage() {
+  "use cache";
+  cacheLife({ revalidate: 60 * 60 * 24 }); // 1 day
+
   const [collections, productCount] = await Promise.all([
     getCollections(),
     getProductCount(),
@@ -45,3 +49,7 @@ export default async function Home() {
     </div>
   );
 }
+
+export default async function Home() {
+  return <CachedHomePage />;
+}

src/app/(category-sidebar)/products/[category]/[subcategory]/[product]/page.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import { notFound } from "next/navigation";
 import { AddToCartForm } from "@/components/add-to-cart-form";
 import { Metadata } from "next";
+import { cacheLife } from "next/cache";
 
 import { getProductDetails, getProductsForSubcategory } from "@/lib/queries";
 // import { db } from "@/db";
@@ -28,6 +29,16 @@ import { getProductDetails, getProductsForSubcategory } from "@/lib/queries";
 //   }));
 // }
 
+export async function generateStaticParams() {
+  return [
+    {
+      product: "__placeholder__",
+      subcategory: "__placeholder__",
+      category: "__placeholder__",
+    },
+  ];
+}
+
 export async function generateMetadata(props: {
   params: Promise<{ product: string; category: string; subcategory: string }>;
 }): Promise<Metadata> {
@@ -45,14 +56,18 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function Page(props: {
-  params: Promise<{
-    product: string;
-    subcategory: string;
-    category: string;
-  }>;
+async function CachedProductPage({
+  product,
+  subcategory,
+  category,
+}: {
+  product: string;
+  subcategory: string;
+  category: string;
 }) {
-  const { product, subcategory, category } = await props.params;
+  "use cache";
+  cacheLife({ revalidate: 60 * 60 * 24 }); // 1 day
+
   const urlDecodedProduct = decodeURIComponent(product);
   const urlDecodedSubcategory = decodeURIComponent(subcategory);
   const [productData, relatedUnshifted] = await Promise.all([
@@ -102,18 +117,40 @@ export default async function Page(props: {
           </h2>
         )}
         <div className="flex flex-row flex-wrap gap-2">
-          {related?.map((product) => (
+          {related?.map((p) => (
             <ProductLink
-              key={product.name}
+              key={p.name}
               loading="lazy"
               category_slug={category}
               subcategory_slug={subcategory}
-              product={product}
-              imageUrl={product.image_url}
+              product={p}
+              imageUrl={p.image_url}
             />
           ))}
         </div>
       </div>
     </div>
   );
 }
+
+export default async function Page(props: {
+  params: Promise<{
+    product: string;
+    subcategory: string;
+    category: string;
+  }>;
+}) {
+  const { product, subcategory, category } = await props.params;
+
+  if (product === "__placeholder__") {
+    return notFound();
+  }
+
+  return (
+    <CachedProductPage
+      product={product}
+      subcategory={subcategory}
+      category={category}
+    />
+  );
+}

src/app/(category-sidebar)/products/[category]/[subcategory]/page.tsx

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import { ProductLink } from "@/components/ui/product-card";
 import type { Metadata } from "next";
+import { cacheLife } from "next/cache";
 import {
   getProductsForSubcategory,
   getSubcategory,
@@ -24,10 +25,24 @@ import {
 //   }));
 // }
 
+export async function generateStaticParams() {
+  return [
+    {
+      subcategory: "__placeholder__",
+      category: "__placeholder__",
+    },
+  ];
+}
+
 export async function generateMetadata(props: {
   params: Promise<{ category: string; subcategory: string }>;
 }): Promise<Metadata> {
   const { subcategory: subcategoryParam } = await props.params;
+
+  if (subcategoryParam === "__placeholder__") {
+    return notFound();
+  }
+
   const urlDecodedCategory = decodeURIComponent(subcategoryParam);
 
   const [subcategory, rows] = await Promise.all([
@@ -48,14 +63,16 @@ export async function generateMetadata(props: {
   };
 }
 
-export default async function Page(props: {
-  params: Promise<{
-    subcategory: string;
-    category: string;
-  }>;
+async function CachedSubcategoryPage({
+  subcategory,
+  category,
+}: {
+  subcategory: string;
+  category: string;
 }) {
-  const { subcategory, category } = await props.params;
-  // const urlDecodedCategory = decodeURIComponent(category);
+  "use cache";
+  cacheLife({ revalidate: 60 * 60 * 24 }); // 1 day
+
   const urlDecodedSubcategory = decodeURIComponent(subcategory);
   const [products, countRes] = await Promise.all([
     getProductsForSubcategory(urlDecodedSubcategory),
@@ -91,3 +108,20 @@ export default async function Page(props: {
     </div>
   );
 }
+
+export default async function Page(props: {
+  params: Promise<{
+    subcategory: string;
+    category: string;
+  }>;
+}) {
+  const { subcategory, category } = await props.params;
+
+  if (subcategory === "__placeholder__") {
+    return notFound();
+  }
+
+  return (
+    <CachedSubcategoryPage subcategory={subcategory} category={category} />
+  );
+}

src/app/api/prefetch-images/[...rest]/route.ts

@@ -1,7 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { parseHTML } from "linkedom";
-
-export const dynamic = "force-static";
+import { cacheLife } from "next/cache";
 
 function getHostname() {
   if (process.env.NODE_ENV === "development") {
@@ -10,7 +9,32 @@ function getHostname() {
   if (process.env.VERCEL_ENV === "production") {
     return process.env.VERCEL_PROJECT_PRODUCTION_URL;
   }
-  return process.env.VERCEL_BRANCH_URL;
+  if (process.env.VERCEL_BRANCH_URL) {
+    return process.env.VERCEL_BRANCH_URL;
+  }
+  return "localhost:3000";
+}
+
+async function fetchAndProcessImages(url: string) {
+  "use cache";
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    return { error: true, status: response.status, images: null };
+  }
+  const body = await response.text();
+  const { document } = parseHTML(body);
+  const images = Array.from(document.querySelectorAll("main img"))
+    .map((img) => ({
+      srcset: img.getAttribute("srcset") || img.getAttribute("srcSet"), // Linkedom is case-sensitive
+      sizes: img.getAttribute("sizes"),
+      src: img.getAttribute("src"),
+      alt: img.getAttribute("alt"),
+      loading: img.getAttribute("loading"),
+    }))
+    .filter((img) => img.src);
+
+  return { error: false, status: 200, images };
 }
 
 export async function GET(
@@ -27,23 +51,15 @@ export async function GET(
     return new Response("Missing url parameter", { status: 400 });
   }
   const url = `${schema}://${host}/${href}`;
-  const response = await fetch(url);
-  if (!response.ok) {
-    return new Response("Failed to fetch", { status: response.status });
+
+  const result = await fetchAndProcessImages(url);
+
+  if (result.error) {
+    return new Response("Failed to fetch", { status: result.status });
   }
-  const body = await response.text();
-  const { document } = parseHTML(body);
-  const images = Array.from(document.querySelectorAll("main img"))
-    .map((img) => ({
-      srcset: img.getAttribute("srcset") || img.getAttribute("srcSet"), // Linkedom is case-sensitive
-      sizes: img.getAttribute("sizes"),
-      src: img.getAttribute("src"),
-      alt: img.getAttribute("alt"),
-      loading: img.getAttribute("loading"),
-    }))
-    .filter((img) => img.src);
+
   return NextResponse.json(
-    { images },
+    { images: result.images },
     {
       headers: {
         "Cache-Control": "public, max-age=3600",