feat: enable cache components

.gitignore

@@ -21,3 +21,4 @@ coverage/
 .history
 .unlighthouse
 .bigcommerce
+.worktrees

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

@@ -1,3 +1,4 @@
+import { cacheLife } from 'next/cache';
 import { cache } from 'react';
 
 import { client } from '~/client';
@@ -24,10 +25,14 @@ const ChangePasswordQuery = graphql(`
   }
 `);
 
-export const getChangePasswordQuery = cache(async () => {
+async function getCachedChangePasswordQuery(locale: string) {
+  'use cache';
+
+  cacheLife({ revalidate });
+
   const response = await client.fetch({
     document: ChangePasswordQuery,
-    fetchOptions: { next: { revalidate } },
+    locale,
   });
 
   const passwordComplexitySettings =
@@ -36,4 +41,8 @@ export const getChangePasswordQuery = cache(async () => {
   return {
     passwordComplexitySettings,
   };
+}
+
+export const getChangePasswordQuery = cache(async (locale: string) => {
+  return getCachedChangePasswordQuery(locale);
 });

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

@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { Metadata } from 'next';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { Suspense } from 'react';
 
 import { ResetPasswordSection } from '@/vibes/soul/sections/reset-password-section';
 import { getChangePasswordQuery } from '~/app/[locale]/(default)/(auth)/change-password/page-data';
@@ -26,19 +27,20 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
-export default async function ChangePassword({ params, searchParams }: Props) {
-  const { locale } = await params;
-
-  setRequestLocale(locale);
+interface ContentProps {
+  searchParams: Promise<{ c?: string; t?: string }>;
+  locale: string;
+}
 
+async function ChangePasswordContent({ searchParams, locale }: ContentProps) {
   const { c: customerEntityId, t: token } = await searchParams;
-  const t = await getTranslations('Auth.ChangePassword');
+  const t = await getTranslations({ locale, namespace: 'Auth.ChangePassword' });
 
   if (!customerEntityId || !token) {
     return redirect({ href: '/login', locale });
   }
 
-  const { passwordComplexitySettings } = await getChangePasswordQuery();
+  const { passwordComplexitySettings } = await getChangePasswordQuery(locale);
 
   return (
     <ResetPasswordSection
@@ -50,3 +52,15 @@ export default async function ChangePassword({ params, searchParams }: Props) {
     />
   );
 }
+
+export default async function ChangePassword({ params, searchParams }: Props) {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return (
+    <Suspense>
+      <ChangePasswordContent locale={locale} searchParams={searchParams} />
+    </Suspense>
+  );
+}

core/app/[locale]/(default)/(auth)/layout.tsx

@@ -1,4 +1,5 @@
-import { PropsWithChildren } from 'react';
+import { setRequestLocale } from 'next-intl/server';
+import { PropsWithChildren, Suspense } from 'react';
 
 import { isLoggedIn } from '~/auth';
 import { redirect } from '~/i18n/routing';
@@ -7,13 +8,24 @@ interface Props extends PropsWithChildren {
   params: Promise<{ locale: string }>;
 }
 
-export default async function Layout({ children, params }: Props) {
+async function AuthCheck({ locale, children }: { locale: string; children: React.ReactNode }) {
   const loggedIn = await isLoggedIn();
-  const { locale } = await params;
 
   if (loggedIn) {
     redirect({ href: '/account/orders', locale });
   }
 
   return children;
 }
+
+export default async function Layout({ children, params }: Props) {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return (
+    <Suspense>
+      <AuthCheck locale={locale}>{children}</AuthCheck>
+    </Suspense>
+  );
+}

core/app/[locale]/(default)/(auth)/login/page.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 import { Metadata } from 'next';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { Suspense } from 'react';
 
 import { ButtonLink } from '@/vibes/soul/primitives/button-link';
 import { SignInSection } from '@/vibes/soul/sections/sign-in-section';
@@ -27,13 +28,16 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
-export default async function Login({ params, searchParams }: Props) {
-  const { locale } = await params;
+async function LoginContent({
+  searchParams,
+  locale,
+}: {
+  searchParams: Props['searchParams'];
+  locale: string;
+}) {
   const { redirectTo = '/account/orders', error } = await searchParams;
 
-  setRequestLocale(locale);
-
-  const t = await getTranslations('Auth.Login');
+  const t = await getTranslations({ locale, namespace: 'Auth.Login' });
 
   const vanityUrl = buildConfig.get('urls').vanityUrl;
   const redirectUrl = new URL(redirectTo, vanityUrl);
@@ -75,3 +79,15 @@ export default async function Login({ params, searchParams }: Props) {
     </>
   );
 }
+
+export default async function Login({ params, searchParams }: Props) {
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return (
+    <Suspense>
+      <LoginContent locale={locale} searchParams={searchParams} />
+    </Suspense>
+  );
+}

core/app/[locale]/(default)/(auth)/login/token/[token]/route.ts

@@ -35,5 +35,3 @@ export async function GET(_: Request, { params }: { params: Promise<{ token: str
     redirect(`/login?error=InvalidToken`);
   }
 }
-
-export const dynamic = 'force-dynamic';

core/app/[locale]/(default)/(auth)/register/page-data.ts

@@ -1,8 +1,9 @@
+import { cacheLife } from 'next/cache';
 import { cache } from 'react';
 
-import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
+import { revalidate } from '~/client/revalidate-target';
 import { FormFieldsFragment } from '~/data-transformers/form-field-transformer/fragment';
 
 const RegisterCustomerQuery = graphql(
@@ -61,8 +62,10 @@ interface Props {
   };
 }
 
-export const getRegisterCustomerQuery = cache(async ({ address, customer }: Props) => {
-  const customerAccessToken = await getSessionCustomerAccessToken();
+async function getCachedRegisterCustomerQuery(locale: string, { address, customer }: Props) {
+  'use cache';
+
+  cacheLife({ revalidate });
 
   const response = await client.fetch({
     document: RegisterCustomerQuery,
@@ -72,8 +75,7 @@ export const getRegisterCustomerQuery = cache(async ({ address, customer }: Prop
       customerFilters: customer?.filters,
       customerSortBy: customer?.sortBy,
     },
-    fetchOptions: { cache: 'no-store' },
-    customerAccessToken,
+    locale,
   });
 
   const addressFields = response.data.site.settings?.formFields.shippingAddress;
@@ -92,4 +94,8 @@ export const getRegisterCustomerQuery = cache(async ({ address, customer }: Prop
     countries,
     passwordComplexitySettings,
   };
+}
+
+export const getRegisterCustomerQuery = cache(async (locale: string, props: Props) => {
+  return getCachedRegisterCustomerQuery(locale, props);
 });

core/app/[locale]/(default)/(auth)/register/page.tsx

@@ -51,7 +51,7 @@ export default async function Register({ params }: Props) {
 
   const t = await getTranslations('Auth.Register');
 
-  const registerCustomerData = await getRegisterCustomerQuery({
+  const registerCustomerData = await getRegisterCustomerQuery(locale, {
     address: { sortBy: 'SORT_ORDER' },
     customer: { sortBy: 'SORT_ORDER' },
   });

core/app/[locale]/(default)/(faceted)/brand/[slug]/page-data.ts

@@ -1,3 +1,4 @@
+import { cacheLife } from 'next/cache';
 import { cache } from 'react';
 
 import { client } from '~/client';
@@ -38,13 +39,49 @@ const BrandPageQuery = graphql(`
   }
 `);
 
-export const getBrandPageData = cache(async (entityId: number, customerAccessToken?: string) => {
+// Don't cache metadata
+export const getBrandPageMetadata = cache(
+  async (locale: string, entityId: number, customerAccessToken?: string) => {
+    const response = await client.fetch({
+      document: BrandPageQuery,
+      variables: { entityId },
+      customerAccessToken,
+      locale,
+      fetchOptions: { cache: 'no-store' },
+    });
+
+    return response.data.site;
+  },
+);
+
+async function getCachedBrandPageData(locale: string, entityId: number) {
+  'use cache';
+
+  cacheLife({ revalidate });
+
   const response = await client.fetch({
     document: BrandPageQuery,
     variables: { entityId },
-    customerAccessToken,
-    fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate } },
+    locale,
   });
 
   return response.data.site;
-});
+}
+
+export const getBrandPageData = cache(
+  async (locale: string, entityId: number, customerAccessToken?: string) => {
+    if (customerAccessToken) {
+      const response = await client.fetch({
+        document: BrandPageQuery,
+        variables: { entityId },
+        customerAccessToken,
+        locale,
+        fetchOptions: { cache: 'no-store' },
+      });
+
+      return response.data.site;
+    }
+
+    return getCachedBrandPageData(locale, entityId);
+  },
+);

core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getFormatter, getTranslations, setRequestLocale } from 'next-intl/server';
 import { createLoader, SearchParams } from 'nuqs/server';
-import { cache } from 'react';
+import { cache, Suspense } from 'react';
 
 import { Streamable } from '@/vibes/soul/lib/streamable';
 import { createCompareLoader } from '@/vibes/soul/primitives/compare-drawer/loader';
@@ -19,7 +19,7 @@ import { MAX_COMPARE_LIMIT } from '../../../compare/page-data';
 import { getCompareProducts as getCompareProductsData } from '../../fetch-compare-products';
 import { fetchFacetedSearch } from '../../fetch-faceted-search';
 
-import { getBrandPageData } from './page-data';
+import { getBrandPageData, getBrandPageMetadata } from './page-data';
 
 const getCachedBrand = cache((brandId: string) => {
   return {
@@ -30,9 +30,14 @@ const getCachedBrand = cache((brandId: string) => {
 const compareLoader = createCompareLoader();
 
 const createBrandSearchParamsLoader = cache(
-  async (brandId: string, customerAccessToken?: string) => {
+  async (locale: string, brandId: string, customerAccessToken?: string) => {
     const cachedBrand = getCachedBrand(brandId);
-    const brandSearch = await fetchFacetedSearch(cachedBrand, undefined, customerAccessToken);
+    const brandSearch = await fetchFacetedSearch(
+      locale,
+      cachedBrand,
+      undefined,
+      customerAccessToken,
+    );
     const brandFacets = brandSearch.facets.items.filter(
       (facet) => facet.__typename !== 'BrandSearchFilter',
     );
@@ -73,7 +78,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 
   const brandId = Number(slug);
 
-  const { brand } = await getBrandPageData(brandId, customerAccessToken);
+  const { brand } = await getBrandPageMetadata(locale, brandId, customerAccessToken);
 
   if (!brand) {
     return notFound();
@@ -89,7 +94,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
   };
 }
 
-export default async function Brand(props: Props) {
+async function BrandContent(props: Props) {
   const { locale, slug } = await props.params;
   const customerAccessToken = await getSessionCustomerAccessToken();
 
@@ -99,7 +104,7 @@ export default async function Brand(props: Props) {
 
   const brandId = Number(slug);
 
-  const { brand, settings } = await getBrandPageData(brandId, customerAccessToken);
+  const { brand, settings } = await getBrandPageData(locale, brandId, customerAccessToken);
 
   if (!brand) {
     return notFound();
@@ -114,10 +119,11 @@ export default async function Brand(props: Props) {
     const searchParams = await props.searchParams;
     const currencyCode = await getPreferredCurrencyCode();
 
-    const loadSearchParams = await createBrandSearchParamsLoader(slug, customerAccessToken);
+    const loadSearchParams = await createBrandSearchParamsLoader(locale, slug, customerAccessToken);
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
 
     const search = await fetchFacetedSearch(
+      locale,
       {
         ...searchParams,
         ...parsedSearchParams,
@@ -162,10 +168,15 @@ export default async function Brand(props: Props) {
 
   const streamableFilters = Streamable.from(async () => {
     const searchParams = await props.searchParams;
-    const loadSearchParams = await createBrandSearchParamsLoader(slug, customerAccessToken);
+    const loadSearchParams = await createBrandSearchParamsLoader(locale, slug, customerAccessToken);
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
     const cachedBrand = getCachedBrand(slug);
-    const categorySearch = await fetchFacetedSearch(cachedBrand, undefined, customerAccessToken);
+    const categorySearch = await fetchFacetedSearch(
+      locale,
+      cachedBrand,
+      undefined,
+      customerAccessToken,
+    );
     const refinedSearch = await streamableFacetedSearch;
 
     const allFacets = categorySearch.facets.items.filter(
@@ -195,7 +206,7 @@ export default async function Brand(props: Props) {
 
     const compareIds = { entityIds: compare ? compare.map((id: string) => Number(id)) : [] };
 
-    const products = await getCompareProductsData(compareIds, customerAccessToken);
+    const products = await getCompareProductsData(locale, compareIds, customerAccessToken);
 
     return products.map((product) => ({
       id: product.entityId.toString(),
@@ -244,3 +255,11 @@ export default async function Brand(props: Props) {
     />
   );
 }
+
+export default function Brand(props: Props) {
+  return (
+    <Suspense>
+      <BrandContent {...props} />
+    </Suspense>
+  );
+}