Thiết kế website giá rẻ

Question

I am using Nextjs App router of version 14.0.3 to build a multilingual website using headless wordpress. The total pages with the multilingual pages are about 500 pages. This website takes about 45 minutes to build, however, after deploying , i expected that the pages will be served instantly i static build them, but it still takes about 4 or 5 secs to show each page. I have gone through next js docs on generateStaticParams but i am yet to solve the problem.

This is my root Layout, i am using generateStaticParams here

export async function generateStaticParams() {
  return [
    { lang: "en" },
    { lang: "fr" },
    { lang: "de" },
    { lang: "it" },
    { lang: "fr-ch" },
    { lang: "de-ch" },
  ];
}
export default async function RootLayout({ children, params: { lang } }) {
  let data = await getNavigation(lang);
  let footerData = await getFooter(lang);

  return (
    <html lang={lang}>
      <body className={museo.className}>
        <ThemeProvider theme={theme}>
          <WebVitals />
          <Navigation data={data?.pages?.nodes[0]} lang={lang} />

          <main>{children}</main>

          <Footer data={footerData?.pages?.nodes[0]} lang={lang} />
          <CookieConsent />
        </ThemeProvider>
      </body>
    </html>
  );
}


export async function generateMetadata({ params: { lang } }) {
  let receivedData = await getHomePage(lang);
  return {
    title: receivedData?.pages?.nodes[0]?.homepage?.homepageMetatitle,
    description:
      receivedData?.pages?.nodes[0]?.homepage?.homepageMetadescription,
  };
}

async function Home({ params: { lang } }) {
  let receivedData = await getHomePage(lang);
  let data = receivedData?.pages?.nodes[0];

  return (
  <Typography
                variant="h3"
                fontSize={{ mobile: "4.3rem", portraitTab: "3.6rem" }}
                className="text-deep-blue"
                style={{ fontWeight: "500" }}
              >
                {HTMLReactParser(data?.homepage?.homepageServicesmaintext)}
              </Typography>
  );
}

export default Home;

// Calling the endpoint here

export async function fetchAPI(query = "", { variables } = {}) {
  const res = await fetch(process.env.NEXT_PUBLIC_WORDPRESS_API_ENDPOINT, {
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  });

  if (!res.ok) {
    console.error(res);
    return {};
  }

  const { data } = await res.json();
  
  return data;
}

The homepage function here
export async function getHomePage(language) {
  const data = await fetchAPI(
    `query LoadHomePage ($language: String!) {
      pages(where: {title: "Homepage",language: $language}) {
        nodes {
          id
          title
         
          homepage {
            unitytext {
              text
            }
            homepageMetadescription
            homepageMetatitle
            homepageHerosubtext
            homepageHeromaintext
            
            homepageServicesmaintext
            homepageServicessubtext
            homepageServicedescription
            homepageGlobalunityheader
            homepageGlobalunitybody
            homepageWhatwedo
             homepageGallery {
              caption
              title
              altText
              mediaItemUrl
              description
            }
            homeCta {
              linktext
              homeCtaText
              heading
              homeCtaImage {
                altText
                mediaItemUrl
                
              }
            }
            globalUnityImage {
              altText
              mediaItemUrl
            }
            serviceDescriptionImage {
              altText
              mediaItemUrl
            }
            qualityPromise {
              linktext
              heading
              qptext
              qpimage {
                
                altText
                mediaItemUrl
                sizes(size: MEDIUM_LARGE)
                srcSet(size: MEDIUM_LARGE)
                
              }
            }
          }
        }
      }
    }`,
    { variables: { language } }
  );

  return data;
}

Thiết kế website giá rẻ

Danh mục

Caching multilingual Nextjs website deployed on AWS amplify