perf: improve index and [slug] page prefetching (#282)

contentful · Jun 10, 2024 · 130efbf · 130efbf
2 parents d6fad75 + 7cb8669
commit 130efbf
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx
@@ -33,19 +33,20 @@ export const getServerSideProps = async ({ locale, params, query }: CustomNextPa
     const queryClient = new QueryClient();
 
     // Default queries
-    await queryClient.prefetchQuery(
-      useCtfPageQuery.getKey({ slug, locale, preview }),
-      useCtfPageQuery.fetcher({ slug, locale, preview }),
-    );
-    await queryClient.prefetchQuery(
-      useCtfNavigationQuery.getKey({ locale, preview }),
-      useCtfNavigationQuery.fetcher({ locale, preview }),
-    );
-    await queryClient.prefetchQuery(
-      useCtfFooterQuery.getKey({ locale, preview }),
-      useCtfFooterQuery.fetcher({ locale, preview }),
-    );
-
+    const prefetchPromises = [
+      queryClient.prefetchQuery(
+        useCtfPageQuery.getKey({ slug, locale, preview }),
+        useCtfPageQuery.fetcher({ slug, locale, preview }),
+      ),
+      queryClient.prefetchQuery(
+        useCtfNavigationQuery.getKey({ locale, preview }),
+        useCtfNavigationQuery.fetcher({ locale, preview }),
+      ),
+      queryClient.prefetchQuery(
+        useCtfFooterQuery.getKey({ locale, preview }),
+        useCtfFooterQuery.fetcher({ locale, preview }),
+      ),
+    ];
     // Dynamic queries
     const pageData = await useCtfPageQuery.fetcher({ slug, locale, preview })();
     const page = pageData.pageCollection?.items[0];
@@ -55,6 +56,7 @@ export const getServerSideProps = async ({ locale, params, query }: CustomNextPa
     const content: ComponentReferenceFieldsFragment | undefined | null = page?.pageContent;
 
     await Promise.all([
+      ...prefetchPromises,
       ...prefetchPromiseArr({ inputArr: topSection, locale, queryClient }),
       ...prefetchPromiseArr({ inputArr: extraSection, locale, queryClient }),
       ...prefetchPromiseArr({ inputArr: [content], locale, queryClient }),

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -13,23 +13,26 @@ const LangPage: NextPage = () => {
 };
 
 export const getServerSideProps = async ({ locale, query }: NextPageContext) => {
+  const preview = Boolean(query.preview);
+
   try {
-    const preview = Boolean(query.preview);
     const queryClient = new QueryClient();
 
     // Default queries
-    await queryClient.prefetchQuery(
-      useCtfPageQuery.getKey({ slug: 'home', locale, preview }),
-      useCtfPageQuery.fetcher({ slug: 'home', locale, preview }),
-    );
-    await queryClient.prefetchQuery(
-      useCtfNavigationQuery.getKey({ locale, preview }),
-      useCtfNavigationQuery.fetcher({ locale, preview }),
-    );
-    await queryClient.prefetchQuery(
-      useCtfFooterQuery.getKey({ locale, preview }),
-      useCtfFooterQuery.fetcher({ locale, preview }),
-    );
+    const prefetchPromises = [
+      queryClient.prefetchQuery(
+        useCtfPageQuery.getKey({ slug: 'home', locale, preview }),
+        useCtfPageQuery.fetcher({ slug: 'home', locale, preview }),
+      ),
+      queryClient.prefetchQuery(
+        useCtfNavigationQuery.getKey({ locale, preview }),
+        useCtfNavigationQuery.fetcher({ locale, preview }),
+      ),
+      queryClient.prefetchQuery(
+        useCtfFooterQuery.getKey({ locale, preview }),
+        useCtfFooterQuery.fetcher({ locale, preview }),
+      ),
+    ];
 
     // Dynamic queries
     const pageData = await useCtfPageQuery.fetcher({ slug: 'home', locale, preview })();
@@ -40,6 +43,7 @@ export const getServerSideProps = async ({ locale, query }: NextPageContext) =>
     const extraSection = page?.extraSectionCollection?.items;
 
     await Promise.all([
+      ...prefetchPromises,
       ...prefetchPromiseArr({ inputArr: topSection, locale, queryClient }),
       ...prefetchPromiseArr({ inputArr: extraSection, locale, queryClient }),
       ...prefetchPromiseArr({ inputArr: [content], locale, queryClient }),