Nextjs Link slow to fetch page and dynamic page when i deploy on aws amplify

[oblique minnow]

I am using Next.js 14.2.3 to build a website, the other pages on the website are static generated at build time and static rendered, on the other hand, i have a page or route that is dynamically rendered. On local dev, when i click on the link go to the page, "http://localhost:3000/test", it renders quickly but when this is deployed on aws amplify, and i go to the page "https://test.d2oa4hihp69p02.amplifyapp.com/test/" the page takes about 10 seconds to open and sometimes i get the error. "This page isn’t working test.d2oa4hihp69p02.amplifyapp.com took too long to respond. HTTP ERROR 504". I also have similar problems when i click on a link to view a single dynamic page within the test page https://test.d2oa4hihp69p02.amplifyapp.com/test/webstreams-medical-training-goes-global

I read and followed this part of nextjs documentation https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes. am i doing it wrongly? because it works perfectly in my local dev.

[onyx light]

Hi @oblique minnow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It seems like you're experiencing performance issues with your Next.js application when deployed on AWS Amplify, specifically with dynamic routes. This is a known issue that has been reported by other users as well.

Here are some steps and considerations based on the information available:

1. Check AWS Amplify Hosting:

   • There are known issues with AWS Amplify hosting and Next.js performance. For example, in this issue (https://github.com/vercel/next.js/issues/57986), a member mentioned that they have no control over AWS Amplify hosting optimizations. It might be worth considering alternative hosting solutions if the problem persists.

2. Next.js Version:

   • Ensure you are using a stable version of Next.js. In this issue (https://github.com/vercel/next.js/issues/57986), it was noted that using an old canary version could cause performance issues. Make sure you are using the latest stable release.

3. Dynamic Routes:

   • You mentioned following the documentation for dynamic routes. Ensure that your dynamic routes are correctly set up and optimized. Refer to the Dynamic Routes documentation (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#next-steps) for best practices.

4. Prefetching and Caching:

   • There might be inconsistencies in how the Link component handles prefetching and caching. This was discussed in this issue (https://github.com/vercel/next.js/issues/50592). Ensure that your links are correctly set up to prefetch data if necessary.

5. Error 504 (Gateway Timeout):

   • The 504 error indicates that the server did not receive a timely response from an upstream server. This could be due to server-side rendering taking too long. Consider optimizing your server-side code or increasing the timeout settings if possible.

6. Reproduction and Debugging:
   • Create a minimal reproduction of the issue to debug it more effectively. You can use tools like CodeSandbox to isolate the problem. For example, a member created a sandbox to demonstrate instant navigation in this issue (https://github.com/vercel/next.js/issues/57986).

If these steps do not resolve your issue, you might want to consider opening a new issue on the Next.js GitHub repository with detailed information about your setup and the problems you're encountering.

For further reading and troubleshooting, you can refer to the following documentation and issues:

• Dynamic Routes Documentation (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#next-steps)
• Issue on Router.push performance (https://github.com/vercel/next.js/issues/57986)
• Issue on Link component cache behavior (https://github.com/vercel/next.js/issues/50592)

If you need more specific guidance, please provide additional details about your setup and any relevant code snippets.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@oblique minnow kapa.ai is still learning and improving, please let us know how it did by reacting below

[oblique minnow]

Here is my server component below

async function Test({ searchParams, params: { lang } }) {
  const query = searchParams?.query || "";
  const sort = searchParams?.sort || "ASC";
  const industry = searchParams?.industry || "";


  let casestudies = await getAllCStudies(
    industry,
    BATCH_SIZE,
    null,
    null,
    null,
    sort,
    "DATE",
    query,
    lang
  );

  let categories = await getCaseStudyCategories("en");

  return (
    <div>
    
      
      {casestudies.nodes.map((item) => {
        return (
          <div style={{ fontSize: "2rem", padding: "1rem", cursor: "pointer" }}>
            <Link href={/test/${item.slug}}>
              {item.title} <br />
            </Link>
          </div>
        );
      })}

     
    </div>
  );
}

export default Test;