Hi I am currently building a course lesson navigational component for an LMS.

There I am fetching the lesson syllabus from a third-party application using rest api and map the lessons as below. What I am trying to do is when a user click on lesson I update the url lid query param according to the relavant lesson id. After that I will fetch the lesson data using an api in a separate component.

What I noticed here is, when I click on a Link it takes 3-4s to the current link to get updated with new lid query param. What could be the cause for this and how can I optimize this.

Anyway I didn't see any significant latency on fetching lesson data relevant to the lid once it get update.

import axios from "axios";
import { redirect } from "next/navigation";
import Link from "next/link";
import React from "react";

const ListLessons = async ({ link }: { link: string }) => {
  const result = await axios.get(link, {
    auth: {
      username: ,
      password: ,
    },
  });

  return (
    <div className="my-3">
      {result.data.map((lesson: any) => (
        <div className="my-2">
          <Link
            className="text-lg hover:text-blue-500"
            href={`?lid=${lesson.id}`}
          >
            {lesson.title.rendered}
          </Link>
        </div>
      ))}
    </div>
  );
};

export default ListLessons;