I’m working on a Next.js project and have implemented a SideNav component that dynamically generates navigation items based on the modules returned from an API. Each nav item has an href that is encoded using a custom function, and when a nav item is clicked, router.push(href) is called to navigate to the corresponding page.

However, I’ve noticed that when I click on any nav item, the URL in the browser takes some time to change. During this period, a network fetch call is initiated, which seems to delay the URL change. Only after this fetch call resolves does the request get sent to the backend, causing a noticeable delay in navigation.

Here’s how I’m generating the NavItem objects and their hrefs

const encodePathComponent = (component: string): string => {
  return encodeURIComponent(component.toLowerCase().replace(/[s/.]/g, '_'));
};

const generateNavItems = (modules: any[]): NavItem[] => {
  return modules.map((module) => {
    const { parent_module_name, children } = module;
    const IconComponent = moduleIconMap[parent_module_name as IconKey] || null;

    const subNav = children.length > 0
      ? children.map((child: any) => {
          const childHref = `/${encodePathComponent(parent_module_name)}/${encodePathComponent(child.child_module_name)}`;
          return {
            href: childHref,
            label: child.child_module_name,
            subNav: child.sub_children?.map((subChild: any) => {
              const subChildHref = `/${encodePathComponent(parent_module_name)}/${encodePathComponent(child.child_module_name)}/${encodePathComponent(subChild.sub_child_module_name)}`;
              return {
                href: subChildHref,
                label: subChild.sub_child_module_name,
              };
            }),
          };
        })
      : [];

    const href = children.length === 0 ? `/${encodePathComponent(parent_module_name)}` : undefined;

    return {
      label: parent_module_name,
      icon: IconComponent ? <IconComponent className="w-4 h-4" /> : null,
      href,
      subNav,
    };
  });
};

And this is how I’m handling the navigation:

const handleNavigation = useCallback(
  (label: string, href?: string) => {
    if (href) {
      router.push(href);
      setTitle(label);
    }
  },
  [router]
);

The Problem:

The issue arises at the router.push(href) line. The navigation is noticeably slow, with the URL change and the request to the backend both taking longer than expected. This delay is affecting the user experience, and I’m looking for ways to optimize this process.

Additional Details:Network Tab Image.
The delay occurs between the initiation of router.push(href) and the actual URL change in the browser.
This delay is compounded by the time it takes for the backend request to complete.
Has anyone experienced a similar issue or have any suggestions for improving the performance of router.push in this context? Any insights or recommendations would be greatly appreciated!

I tried these:

1. Prefetching: I attempted to use router.prefetch(href) to prefetch the URLs when a user hovers over the navigation items. However, this didn’t significantly improve the navigation speed or reduce the delay in sending requests to the backend.

2. Use of useMemo and useCallback: I optimized the SideNav component using useMemo and useCallback to minimize unnecessary re-renders and improve performance, but the delay persisted.

3. Analyzing Network Requests: I checked the Network tab in the browser’s developer tools and noticed that the xhr requests to the backend are delayed, which seems to be contributing to the slow navigation.

I expected the URL to change immediately after calling router.push(href), with minimal delay before the backend request is sent.
I also expected that using router.prefetch(href) would reduce the delay, making the navigation smoother and more responsive.