fix: try to reduce cold-load latency for missions/earn (#2856)

Author: mmioana

.storybook/main.ts

@@ -31,6 +31,11 @@ const config: StorybookConfig = {
       }),
     ];
 
+    config.resolve = {
+      ...config.resolve,
+      dedupe: [...(config.resolve?.dedupe ?? []), 'debug'],
+    };
+
     return config;
   },
 };

next.config.mjs

@@ -11,10 +11,6 @@ const nextConfig = {
   experimental: {
     serverSourceMaps: false,
     optimizePackageImports: [],
-    staleTimes: {
-      dynamic: 30,
-      static: 180,
-    },
   },
   webpack: (config) => {
     config.resolve.extensionAlias = {

src/app/[lng]/earn/[slug]/page.tsx

@@ -3,30 +3,42 @@ import {
   pageOpenGraph,
   pageTwitter,
 } from '@/app/lib/metadata';
+import { getOpportunitiesFiltered } from '@/app/lib/getOpportunitiesFiltered';
 import { EarnPage, EarnPageSkeleton } from '@/app/ui/earn';
 import { AppPaths, getSiteUrl } from '@/const/urls';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next/types';
 import { Suspense } from 'react';
+import envConfig from '@/config/env-config';
 
 type Params = Promise<{ slug: string }>;
 
 export const dynamicParams = true;
 export const revalidate = 300;
 
-export async function generateStaticParams(): Promise<Params[]> {
-  console.log('21. Earn page generateStaticParams');
-
-  // TODO: LF-14853: list available opportunities
-  return [];
+export async function generateStaticParams(): Promise<{ slug: string }[]> {
+  if (envConfig.NEXT_PUBLIC_ENVIRONMENT !== 'production') {
+    return [];
+  }
+  const res = await getOpportunitiesFiltered({});
+  const rows = res.data?.data ?? [];
+  const slugs = [
+    ...new Set(
+      rows
+        .map(({ slug }) => slug)
+        .filter(
+          (slug): slug is string => typeof slug === 'string' && slug.length > 0,
+        ),
+    ),
+  ];
+  return slugs.map((slug) => ({ slug }));
 }
 
 export async function generateMetadata({
   params,
 }: {
   params: Params;
 }): Promise<Metadata> {
-  console.log('20. Earn page metadata');
   const { slug } = await params;
 
   const openGraph: Metadata['openGraph'] = {
@@ -49,24 +61,15 @@ export async function generateMetadata({
 }
 
 export default async function Page({ params }: { params: Params }) {
-  console.log('22. Earn page');
   const { slug } = await params;
 
-  console.log('24. Earn page slug', slug);
-
   if (!slug) {
-    console.log('23. Earn page not found');
     return notFound();
   }
 
-  try {
-    return (
-      <Suspense fallback={<EarnPageSkeleton />}>
-        <EarnPage slug={slug} />
-      </Suspense>
-    );
-  } catch (error) {
-    console.error('26. Failed to fetch earn page', error);
-    throw error;
-  }
+  return (
+    <Suspense fallback={<EarnPageSkeleton />}>
+      <EarnPage slug={slug} />
+    </Suspense>
+  );
 }

src/app/[lng]/earn/loading.tsx

@@ -11,6 +11,7 @@ import { AppPaths, getSiteUrl } from 'src/const/urls';
 import { MissionPageSkeleton } from 'src/app/ui/mission/MissionPageSkeleton';
 import { MissionPage } from 'src/app/ui/mission/MissionPage';
 import { UPCOMING_DAYS_AHEAD } from 'src/const/quests';
+import envConfig from '@/config/env-config';
 
 type Params = Promise<{ slug: string }>;
 
@@ -23,6 +24,10 @@ const getPageTitle = (title: string) => {
 const formatSlugToTitle = (slug: string) => slug.replaceAll('-', ' ');
 
 export async function generateStaticParams() {
+  if (envConfig.NEXT_PUBLIC_ENVIRONMENT !== 'production') {
+    return [];
+  }
+
   const pageSize = 25;
 
   const { data: firstPage } = await getQuestsWithNoCampaignAttached(
@@ -115,7 +120,7 @@ export async function generateMetadata({
 }
 
 export const dynamicParams = true;
-export const revalidate = 300;
+export const revalidate = 3600;
 
 export default async function Page({ params }: { params: Params }) {
   const { slug } = await params;

src/app/[lng]/missions/[slug]/page.tsx

@@ -1,79 +1,39 @@
 import { questSlugSchema } from '@/utils/validation-schemas';
 import type { Metadata } from 'next';
 import { redirect, RedirectType } from 'next/navigation';
-import { getQuestsWithNoCampaignAttached } from 'src/app/lib/getQuestsWithNoCampaignAttached';
-import { siteName } from 'src/app/lib/metadata';
-import { AppPaths, getSiteUrl, JUMPER_QUESTS_PATH } from 'src/const/urls';
+import { AppPaths, getSiteUrl } from 'src/const/urls';
 import { sliceStrToXChar } from 'src/utils/splitStringToXChar';
-import { getStrapiBaseUrl } from 'src/utils/strapi/strapiHelper';
-import { getQuestBySlug } from '../../../lib/getQuestBySlug';
 
 type Params = Promise<{ slug: string }>;
 
+/**
+ * Legacy `/quests/:slug` URLs redirect to `/missions/:slug`.
+ * Keep metadata cheap (no Strapi): canonical points at missions so crawlers
+ * and previews prefer the real URL; avoid indexing the redirect hop.
+ */
 export async function generateMetadata({
   params,
 }: {
   params: Params;
 }): Promise<Metadata> {
   const { slug } = await params;
-
-  try {
-    // Validate slug
-    const slugResult = questSlugSchema.safeParse(slug);
-    if (!slugResult.success) {
-      throw new Error('Invalid quest slug');
-    }
-
-    const quest = await getQuestBySlug(slugResult.data);
-    if (!quest || !quest.data) {
-      throw new Error();
-    }
-
-    const questData = quest.data;
-    const baseUrl = getStrapiBaseUrl();
-
-    const openGraph: Metadata['openGraph'] = {
-      title: `Jumper Quest | ${sliceStrToXChar(questData.Title, 45)}`,
-      description: `${sliceStrToXChar(questData.Information || 'Quest description', 60)}`,
-      siteName: siteName,
-      url: `${getSiteUrl()}${JUMPER_QUESTS_PATH}/${slug}`,
-      images: [
-        {
-          url: `${baseUrl}${questData.Image?.url}`,
-          width: 900,
-          height: 450,
-          alt: 'banner image',
-        },
-      ],
-      type: 'article',
-    };
-
-    return {
-      title: `Jumper Quest | ${sliceStrToXChar(questData.Title, 45)}`,
-      description: questData.Subtitle,
-      alternates: {
-        canonical: `${getSiteUrl()}${JUMPER_QUESTS_PATH}/${slug}`,
-      },
-      twitter: openGraph,
-      openGraph,
-    };
-  } catch (err) {
-    return {
-      title: `Jumper Quest | ${sliceStrToXChar(slug.replaceAll('-', ' '), 45)}`,
-      description: `This is the description for the quest "${slug.replaceAll('-', ' ')}".`,
-    };
-  }
+  const slugResult = questSlugSchema.safeParse(slug);
+  const pathSlug = slugResult.success ? slugResult.data : slug;
+  const missionUrl = `${getSiteUrl()}${AppPaths.Missions}/${pathSlug}`;
+  const titleFromSlug = sliceStrToXChar(pathSlug.replaceAll('-', ' '), 45);
+
+  return {
+    title: `Jumper Mission | ${titleFromSlug}`,
+    alternates: {
+      canonical: missionUrl,
+    },
+    robots: {
+      index: false,
+      follow: true,
+    },
+  };
 }
 
-export async function generateStaticParams() {
-  const { data } = await getQuestsWithNoCampaignAttached();
-
-  return data.data.map((quest) => ({ slug: quest.Slug }));
-}
-
-export const dynamicParams = true;
-export const revalidate = 300;
-
 export default async function Page({ params }: { params: Params }) {
   const { slug } = await params;
 

src/app/[lng]/missions/loading.tsx

@@ -20,8 +20,6 @@ interface EarnPageProps {
 }
 
 export const EarnPage: FC<EarnPageProps> = async ({ slug }) => {
-  console.log('27. EarnPage');
-
   // TODO: LF-14853: Opportunity Details
   const [opportunity, relatedMarkets] = await Promise.all([
     getOpportunityBySlug(slug).catch((error) => {
@@ -32,8 +30,6 @@ export const EarnPage: FC<EarnPageProps> = async ({ slug }) => {
     }),
   ]);
 
-  console.log('28. EarnPage opportunity', opportunity);
-
   if (opportunity.error || !opportunity.data) {
     return notFound();
   }
@@ -46,8 +42,6 @@ export const EarnPage: FC<EarnPageProps> = async ({ slug }) => {
   const relatedMarketsData =
     relatedMarkets.data?.filter(Boolean).slice(0, 3) ?? [];
 
-  console.log('29. EarnPage relatedMarkets', relatedMarketsData);
-
   const { tags, protocol } = opportunity.data;
 
   return (

src/app/[lng]/quests/[slug]/page.tsx

@@ -63,8 +63,6 @@ export const useGatekeeperStatus = (flag: string): GatekeeperData => {
 
   const hasAccess = Boolean(data?.[flag]);
 
-  console.log('8. useGatekeeperStatus done', hasAccess);
-
   return {
     status: hasAccess ? GatekeeperStatus.SUCCESS : GatekeeperStatus.NOT_ALLOWED,
   };

src/app/ui/earn/EarnPage.tsx

@@ -12,7 +12,6 @@ import { useAccount } from '@lifi/wallet-management';
 import { Badge } from 'src/components/Badge/Badge';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { AppPaths } from 'src/const/urls';
-import { useGoBack } from 'src/hooks/routing/useGoBack';
 import {
   MissionDetailsColumnContainer,
   MissionDetailsCardContainer,
@@ -26,6 +25,7 @@ import { BadgeSize, BadgeVariant } from 'src/components/Badge/Badge.styles';
 import { BaseAlertVariant } from 'src/components/Alerts/BaseAlert/BaseAlert.styles';
 import { SectionCardContainer } from 'src/components/Cards/SectionCard/SectionCard.style';
 import { useResetCurrentActiveTask } from 'src/hooks/tasksVerification/useResetCurrentActiveTask';
+import { useGoBack } from '@/hooks/routing/useGoBack';
 
 interface MissionDetailsProps {
   mission: Quest;