fix(core): dedupe requests in webpages

.changeset/quiet-impalas-hear.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Dedupe requests in "webpages" by properly caching/memoizing the fetch function per page render.

core/app/[locale]/(default)/(auth)/change-password/page.tsx

@@ -7,6 +7,13 @@ import { redirect } from '~/i18n/routing';
 
 import { changePassword } from './_actions/change-password';
 
+interface Props {
+  searchParams: Promise<{
+    c?: string;
+    t?: string;
+  }>;
+}
+
 export async function generateMetadata(): Promise<Metadata> {
   const t = await getTranslations('ChangePassword');
 
@@ -15,13 +22,6 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-interface Props {
-  searchParams: Promise<{
-    c?: string;
-    t?: string;
-  }>;
-}
-
 export default async function ChangePassword({ searchParams }: Props) {
   const { c: customerEntityId, t: token } = await searchParams;
   const t = await getTranslations('ChangePassword');

core/app/[locale]/(default)/webpages/[id]/contact/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { cache } from 'react';
 
 import { Breadcrumb } from '@/vibes/soul/primitives/breadcrumbs';
 import { ButtonLink } from '@/vibes/soul/primitives/button-link';
@@ -41,7 +42,7 @@ const fieldMapping = {
 
 type ContactField = keyof typeof fieldMapping;
 
-async function getWebPage(id: string): Promise<ContactPage> {
+const getWebPage = cache(async (id: string): Promise<ContactPage> => {
   const data = await getWebpageData({ id: decodeURIComponent(id) });
   const reCaptchaSettings = data.site.settings?.reCaptcha ?? null;
   const webpage = data.node?.__typename === 'ContactPage' ? data.node : null;
@@ -62,7 +63,7 @@ async function getWebPage(id: string): Promise<ContactPage> {
     seo: webpage.seo,
     reCaptchaSettings,
   };
-}
+});
 
 async function getWebPageBreadcrumbs(id: string): Promise<Breadcrumb[]> {
   const webpage = await getWebPage(id);

core/app/[locale]/(default)/webpages/[id]/normal/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import { cache } from 'react';
 
 import { Breadcrumb } from '@/vibes/soul/primitives/breadcrumbs';
 import {
@@ -15,7 +16,7 @@ interface Props {
   params: Promise<{ id: string }>;
 }
 
-async function getWebPage(id: string): Promise<WebPageData> {
+const getWebPage = cache(async (id: string): Promise<WebPageData> => {
   const data = await getWebpageData({ id: decodeURIComponent(id) });
   const webpage = data.node?.__typename === 'NormalPage' ? data.node : null;
 
@@ -31,7 +32,7 @@ async function getWebPage(id: string): Promise<WebPageData> {
     content: webpage.htmlBody,
     seo: webpage.seo,
   };
-}
+});
 
 async function getWebPageBreadcrumbs(id: string): Promise<Breadcrumb[]> {
   const webpage = await getWebPage(id);