Merge pull request #2208 from iFixit/memoize-app-router-find-product

Memoize app router find product

frontend/app/(defaultLayout)/@storeSelect/products/app-router/[handle]/page.tsx

@@ -1,36 +1,32 @@
-import { DEFAULT_STORE_CODE, IFIXIT_ORIGIN } from '@config/env';
+import { DEFAULT_STORE_CODE } from '@config/env';
 import { getStoreList } from '@models/store';
-import Product from '@pages/api/nextjs/cache/product';
 import { ProductPageProps } from 'app/(defaultLayout)/products/app-router/[handle]/page';
-import { devSandboxOrigin, shouldSkipCache } from 'app/_helpers/app-helpers';
+import { findProduct } from 'app/_data/product';
+import { shouldSkipCache } from 'app/_helpers/app-helpers';
 import { StoreSelect } from '../../../store-select';
+import { invariant } from '@ifixit/helpers';
 
 export default async function ProductPageStoreSelect({
    params,
    searchParams,
 }: ProductPageProps) {
-   const [stores, product] = await Promise.all([getStoreList(), getProduct()]);
+   const [stores, product] = await Promise.all([
+      getStoreList(),
+      findProduct({
+         handle: params.handle,
+         noCache: shouldSkipCache(searchParams),
+      }),
+   ]);
 
    return <StoreSelect stores={product ? storesWithProductUrls() : stores} />;
 
-   async function getProduct() {
-      const result = await Product.get(
-         {
-            handle: params.handle,
-            storeCode: DEFAULT_STORE_CODE,
-            ifixitOrigin: devSandboxOrigin() ?? IFIXIT_ORIGIN,
-         },
-         { forceMiss: shouldSkipCache(searchParams) }
-      );
-      return result?.__typename === 'Product' ? result : null;
-   }
-
    function storesWithProductUrls() {
+      invariant(product);
       return stores.map((store) => {
          if (productEnabledFor(store.code)) {
             return {
                ...store,
-               url: new URL(`/products/${product!.handle}`, store.url).href,
+               url: new URL(`/products/${product.handle}`, store.url).href,
             };
          }
 

frontend/app/(defaultLayout)/products/app-router/[handle]/json-ld-scripts.tsx

@@ -5,7 +5,7 @@ import {
    shouldShowProductRating,
 } from '@ifixit/helpers';
 import type { Product } from '@models/product';
-import { imagesFor } from 'app/_helpers/product-helpers';
+import { defaultVariantIdFor, imagesFor } from 'app/_helpers/product-helpers';
 import { jsonLdScriptProps } from 'react-schemaorg';
 import type {
    BreadcrumbList as BreadcrumbListLDSchema,
@@ -98,7 +98,11 @@ export function ProductJsonLDScript({
    }
 
    function variantUrl() {
-      return `${IFIXIT_ORIGIN}/products/${product.handle}?variant=${selectedVariantId}`;
+      let result = `${IFIXIT_ORIGIN}/products/${product.handle}`;
+      if (selectedVariantId !== defaultVariantIdFor(product)) {
+         result += `?variant=${selectedVariantId}`;
+      }
+      return result;
    }
 
    function oneYearFromNow() {

frontend/app/(defaultLayout)/products/app-router/[handle]/page.tsx

@@ -1,11 +1,10 @@
-import { DEFAULT_STORE_CODE, IFIXIT_ORIGIN } from '@config/env';
+import { IFIXIT_ORIGIN } from '@config/env';
 import { flags } from '@config/flags';
 import { invariant } from '@ifixit/helpers';
-import Product, {
-   type Product as ProductType,
-} from '@pages/api/nextjs/cache/product';
-import { devSandboxOrigin, shouldSkipCache } from 'app/_helpers/app-helpers';
-import { defaultVariantId, imagesFor } from 'app/_helpers/product-helpers';
+import { type Product } from '@pages/api/nextjs/cache/product';
+import { findProduct, findProductRedirect } from 'app/_data/product';
+import { shouldSkipCache } from 'app/_helpers/app-helpers';
+import { defaultVariantIdFor, imagesFor } from 'app/_helpers/product-helpers';
 import type { Metadata } from 'next';
 import { notFound, redirect } from 'next/navigation';
 import {
@@ -29,27 +28,28 @@ export default async function ProductPage({
 }: ProductPageProps) {
    if (!flags.APP_ROUTER_PRODUCT_PAGE_ENABLED) notFound();
 
-   const data = await Product.get(
-      {
-         handle: params.handle,
-         storeCode: DEFAULT_STORE_CODE,
-         ifixitOrigin: devSandboxOrigin() ?? IFIXIT_ORIGIN,
-      },
-      { forceMiss: shouldSkipCache(searchParams) }
-   );
+   const productRedirect = await findProductRedirect({
+      handle: params.handle,
+      noCache: shouldSkipCache(searchParams),
+   });
+
+   if (productRedirect != null) redirect(productRedirect.target);
 
-   if (data == null) notFound();
+   const product = await findProduct({
+      handle: params.handle,
+      noCache: shouldSkipCache(searchParams),
+   });
 
-   if (data.__typename === 'ProductRedirect') redirect(data.target);
+   if (product == null) notFound();
 
    return (
       <>
-         <ProductBreadcrumbsJsonLDScript product={data} />
+         <ProductBreadcrumbsJsonLDScript product={product} />
          <ProductJsonLDScript
-            product={data}
-            selectedVariantId={selectedVariantId(data, searchParams)}
+            product={product}
+            selectedVariantId={selectedVariantId(product, searchParams)}
          />
-         <div>Product: {data.title}</div>
+         <div>Product: {product.title}</div>
       </>
    );
 }
@@ -58,16 +58,12 @@ export async function generateMetadata({
    params,
    searchParams,
 }: ProductPageProps): Promise<Metadata> {
-   const product = await Product.get(
-      {
-         handle: params.handle,
-         storeCode: DEFAULT_STORE_CODE,
-         ifixitOrigin: devSandboxOrigin() ?? IFIXIT_ORIGIN,
-      },
-      { forceMiss: shouldSkipCache(searchParams) }
-   );
+   const product = await findProduct({
+      handle: params.handle,
+      noCache: shouldSkipCache(searchParams),
+   });
 
-   if (product == null || product.__typename !== 'Product') return {};
+   if (product == null) return {};
 
    return {
       title: product.metaTitle,
@@ -123,8 +119,8 @@ export async function generateMetadata({
 }
 
 function selectedVariantId(
-   product: ProductType,
+   product: Product,
    searchParams: ProductPageProps['searchParams']
 ) {
-   return searchParams.variant ?? defaultVariantId(product);
+   return searchParams.variant ?? defaultVariantIdFor(product);
 }

frontend/app/_data/product.ts

@@ -0,0 +1,39 @@
+import 'server-only';
+
+import { DEFAULT_STORE_CODE } from '@config/env';
+import Product from '@pages/api/nextjs/cache/product';
+import { ifixitOrigin } from 'app/_helpers/app-helpers';
+import { cache } from 'react';
+
+interface FindProductArgs {
+   handle: string;
+   noCache: boolean;
+}
+
+export async function findProduct({ handle, noCache }: FindProductArgs) {
+   const result = await findProductOrRedirect(handle, noCache);
+   if (result?.__typename === 'Product') return result;
+   return null;
+}
+
+export async function findProductRedirect({
+   handle,
+   noCache,
+}: FindProductArgs) {
+   const result = await findProductOrRedirect(handle, noCache);
+   if (result?.__typename === 'ProductRedirect') return result;
+   return null;
+}
+
+const findProductOrRedirect = cache(
+   async (handle: string, skipCache: boolean) => {
+      return await Product.get(
+         {
+            handle,
+            storeCode: DEFAULT_STORE_CODE,
+            ifixitOrigin: ifixitOrigin(),
+         },
+         { forceMiss: skipCache }
+      );
+   }
+);

frontend/app/_helpers/app-helpers.ts

@@ -1,4 +1,4 @@
-import { CACHE_DISABLED } from '@config/env';
+import { CACHE_DISABLED, IFIXIT_ORIGIN } from '@config/env';
 import { headers } from 'next/headers';
 
 export function shouldSkipCache(
@@ -7,7 +7,11 @@ export function shouldSkipCache(
    return searchParams.disableCacheGets != null || CACHE_DISABLED;
 }
 
-export function devSandboxOrigin(): string | null {
+export function ifixitOrigin(): string {
+   return devSandboxOrigin() ?? IFIXIT_ORIGIN;
+}
+
+function devSandboxOrigin(): string | null {
    const host =
       headers().get('x-ifixit-forwarded-host') ||
       headers().get('x-forwarded-host');

frontend/app/_helpers/product-helpers.ts

@@ -18,7 +18,7 @@ export function imagesFor(
    return relevantImages.length > 0 ? relevantImages : product.fallbackImages;
 }
 
-export function defaultVariantId(product: Product): string {
+export function defaultVariantIdFor(product: Product): string {
    const variant =
       product.variants.find(
          (variant) => variant.quantityAvailable && variant.quantityAvailable > 0