Fixed SSR and SEO of Product Details

src/app/[country]/[locale]/(storefront)/products/[slug]/ProductDetails.tsx

@@ -2,15 +2,15 @@
 
 import type { Media, Product, Variant } from "@spree/sdk";
 import { CircleCheckBig, CircleX, Loader2, ShoppingBag } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { MediaGallery } from "@/components/products/MediaGallery";
 import { ProductMetafields } from "@/components/products/ProductMetafields";
 import { VariantPicker } from "@/components/products/VariantPicker";
 import { Button } from "@/components/ui/button";
 import { QuantityPicker } from "@/components/ui/quantity-picker";
 import { useCart } from "@/contexts/CartContext";
 import { useStore } from "@/contexts/StoreContext";
-import { trackAddToCart } from "@/lib/analytics/gtm";
+import { trackAddToCart, trackViewItem } from "@/lib/analytics/gtm";
 
 interface ProductDetailsProps {
   product: Product;
@@ -44,6 +44,11 @@ export function ProductDetails({ product, basePath }: ProductDetailsProps) {
   const [quantity, setQuantity] = useState(1);
   const [loading, setLoading] = useState(false);
 
+  // Track product view (analytics - client-only side effect)
+  useEffect(() => {
+    trackViewItem(product, currency);
+  }, [product, currency]);
+
   // Get media for the gallery - variant media takes priority
   const galleryImages = useMemo((): Media[] => {
     // If selected variant has media, show those

src/app/[country]/[locale]/(storefront)/products/[slug]/page.tsx

@@ -1,9 +1,10 @@
 import type { Metadata } from "next";
+import { notFound } from "next/navigation";
 import { JsonLd } from "@/components/seo/JsonLd";
-import { getCachedProduct } from "@/lib/data/cached";
+import { getCachedProduct, PRODUCT_PAGE_EXPAND } from "@/lib/data/cached";
 import { generateProductMetadata } from "@/lib/metadata/product";
 import { buildCanonicalUrl, buildProductJsonLd, getStoreUrl } from "@/lib/seo";
-import { ProductDetailsWrapper } from "./ProductDetailsWrapper";
+import { ProductDetails } from "./ProductDetails";
 
 interface ProductPageProps {
   params: Promise<{
@@ -26,26 +27,25 @@ export default async function ProductPage({ params }: ProductPageProps) {
 
   let product;
   try {
-    product = await getCachedProduct(slug, ["media"], locale);
+    product = await getCachedProduct(slug, PRODUCT_PAGE_EXPAND, locale);
   } catch {
-    product = null;
+    notFound();
   }
 
   const storeUrl = getStoreUrl();
-  const canonicalUrl =
-    product && storeUrl
-      ? buildCanonicalUrl(
-          storeUrl,
-          `/${country}/${locale}/products/${product.slug}`,
-        )
-      : undefined;
+  const canonicalUrl = storeUrl
+    ? buildCanonicalUrl(
+        storeUrl,
+        `/${country}/${locale}/products/${product.slug}`,
+      )
+    : undefined;
 
   return (
     <>
-      {product && canonicalUrl && (
+      {canonicalUrl && (
         <JsonLd data={buildProductJsonLd(product, canonicalUrl)} />
       )}
-      <ProductDetailsWrapper slug={slug} basePath={basePath} />
+      <ProductDetails product={product} basePath={basePath} />
     </>
   );
 }

src/lib/data/cached.ts

@@ -1,6 +1,14 @@
 import { getCategory, getProduct } from "@spree/next";
 import { cache } from "react";
 
+/** Expand list used on the product detail page (shared by page + metadata). */
+export const PRODUCT_PAGE_EXPAND = [
+  "variants",
+  "media",
+  "option_types",
+  "metafields",
+];
+
 export const getCachedProduct = cache(
   (slugOrId: string, expand: string[], locale: string) =>
     getProduct(slugOrId, { expand }, { locale }),

src/lib/metadata/product.ts

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { getCachedProduct } from "@/lib/data/cached";
+import { getCachedProduct, PRODUCT_PAGE_EXPAND } from "@/lib/data/cached";
 import { buildCanonicalUrl, getStoreUrl, stripHtml } from "@/lib/seo";
 
 interface ProductMetadataParams {
@@ -15,7 +15,7 @@ export async function generateProductMetadata({
 }: ProductMetadataParams): Promise<Metadata> {
   let product;
   try {
-    product = await getCachedProduct(slug, ["media"], locale);
+    product = await getCachedProduct(slug, PRODUCT_PAGE_EXPAND, locale);
   } catch {
     return { title: "Product Not Found" };
   }