next/link takes too long to load a new path

67 views Asked by At

I have built a NextJS dashboard which uses next/link to navigate through a dynamic no of pages and hence I have mapped a next/Link component for each page.

const navbarItems = [
  { link: '/', Icon: HomeOutlined, label: 'home' },
  { link: '/published', Icon: InventoryOutlined, label: 'published' },
  { link: '/drafts', Icon: PendingActionsOutlined, label: 'drafts' },
  { link: '/create-new-blog', Icon: AddCircleOutlineOutlined, label: 'create new blog' },
  { link: '/subscriptions', Icon: FeedOutlined, label: 'subscriptions' },
];

  let pathname = usePathname();
  const [active, setActive] = useState(() => {
    if (pathname.split('/')[1] === '') return 0;
    if (pathname.split('/')[1] === 'published') return 1;
    if (pathname.split('/')[1] === 'drafts') return 2;
    if (pathname.split('/')[1] === 'create-new-blog') return 3;
    if (pathname.split('/')[1] === 'subscriptions') return 4;
  });


return (
    <>
        {navbarItems.map((item, index) => {
          return <Link href={item.link} aria-label={item.label} key={item.label} onClick={() => setActive(index)}>
            <item.Icon className='mr-3' classes={{ root: "stroke-0" }} />
            <div className="capitalize" >{item.label}</div>
          </Link>
        })}
   </>
)

The output is something like this: https://imgur.com/a/kJGQQ5z

When I click on a sidebar link, say Published, it takes 3-5 seconds to render the content (even in 5G network). With some basic google searches, I found that this issue usually occurs in development and will be fixed in production. But the issue is still persisting even after pushing the code to production on vercel. All the code to be rendered by clicking either of the nav links is dynamic but I have used NextJs request caching so atleast it should be cached for the revalidation time.

As per the docs, NextJS pre-fetches all the data for all next/links that are shown on the viewport, so theoretically it shouldnt take the time it is taking.

What could be the possible reasons for this to happen? Should I not use next/link? How do I make it instantaneous (or minimize it to the time taken for data to be fetched from DB)

0

There are 0 answers