nextjs - 💡(How to fix) Fix Navigation takes a few seconds up to a minute in production builds [1 comments, 2 participants]

TL;DR

The issue can be resolved by optimizing the re-rendering of the page after navigating to a new URL with a updated query parameter, potentially by using a more efficient data fetching approach or optimizing the component tree.

Guidance

• Verify that the getStaticProps or getServerSideProps methods are not being used in a way that could cause the page to not re-render after navigating to a new URL with an updated query parameter.
• Check if the useEffect hook is being used to fetch data when the component mounts, and if so, consider adding a dependency to the effect so that it re-runs when the query parameter changes.
• Consider using useRouter from next/router to access the router object and manually trigger a re-render when the query parameter changes.
• Investigate if there are any unnecessary re-renders or slow component trees that could be causing the delay in updating the UI.

Example

import { useRouter } from 'next/router';
import { useEffect } from 'react';

function Page() {
  const router = useRouter();
  const { start } = router.query;

  useEffect(() => {
    // Fetch data when the component mounts or when the query parameter changes
    fetchData(start);
  }, [start]);

  return (
    // ...
  );
}

Notes

The issue seems to be related to the way Next.js handles client-side navigation and data fetching. The fact that it works sometimes and not others suggests that there might be a timing issue or a race condition involved.

Recommendation

Apply a workaround by optimizing the data fetching and re-rendering of the page, such as using useRouter to manually trigger a re-render when the query parameter changes. This approach can help mitigate the issue until a more permanent fix can be found.