Remove next/cache usage (use cache, cacheLife, cacheTag, cacheComponents)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01F22Ms5Cxam5UHyxaCrtZzu
This commit is contained in:
Rami Bitar
2026-07-29 11:26:23 -04:00
co-authored by Claude Fable 5
parent f23332e42c
commit 1e58ba4ca4
15 changed files with 24 additions and 81 deletions
+1 -14
View File
@@ -1,6 +1,5 @@
import { getSelectedProductOptions } from "@shopify/hydrogen";
import type { Metadata } from "next";
import { cacheLife, cacheTag } from "next/cache";
import { notFound } from "next/navigation";
import { Suspense } from "react";
@@ -19,8 +18,6 @@ type Props = {
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { handle } = await params;
// Re-fetch the product for metadata. It hits the same `use cache` cache-point
// as the page render, so this is a cache hit in practice.
const { product } = await fetchProduct(handle, "");
const title = product?.title ?? "Product";
return {
@@ -41,15 +38,9 @@ async function fetchProduct(
handle: string,
searchString: string,
): Promise<{ product: ProductData | null }> {
"use cache";
cacheLife("minutes");
cacheTag("products");
// Read variant selection from URL option params (F4: a no-JS GET to
// `?Size=Large&Color=Green` resolves the variant server-side). Do NOT pass
// `optionNames: []` — an empty allow-list filters out every param.
// Reconstruct URLSearchParams from the serialized search string — `use cache`
// serializes arguments, so a URLSearchParams passed in loses `.get`.
const selectedOptions = getSelectedProductOptions(new URLSearchParams(searchString));
const { data, errors } = await staticStorefrontClient.graphql(PRODUCT_QUERY, {
@@ -89,13 +80,9 @@ export default async function ProductPage({ params, searchParams }: Props) {
/**
* Related products (`notes/product.md` "you may also like"). Best-effort: any
* error/timeout returns an empty list so the PDP never breaks. Fetched via the
* shared `staticStorefrontClient` inside a `use cache` cache-point.
* shared `staticStorefrontClient`.
*/
async function RelatedProducts({ handle }: { handle: string }) {
"use cache";
cacheLife("minutes");
cacheTag("products");
let related: ProductCardData[] = [];
try {
const { data, errors } = await staticStorefrontClient.graphql(RELATED_PRODUCTS_QUERY, {