Optimize calls to exteral Api from getServerSideProps - next.js

Question

Assume I have the following page in my next.js react application:
// Filename: [mypath].jsx
export default function MyPage(props) {
return (
<>
<Link href="/siteX">
<a>Go to siteX</a>
</Link>
<Link href="/siteY">
<a>Go to siteY</a>
</Link>
<div>{props.data.text}</div>
</>
);
}
export async function getServerSideProps(context) {
const mypath = context.params.mypath;
const res = await fetch(`https://external-api/${mypath}`)
const data = await res.json();
return { props: { data } };
}
When I access http://localhost:3000/siteX/ on server side the string siteX from the url is used for a call to an external (!) api on a different system, e.g. https://external-api/siteX. This works fine so far, but I see the following performance issue:
In the browser, when I click on a <Link>, two requests are happening: One to my own server to update getServerSideProps with the new path and a second one from my server to https://external-api/... to fetch the new data.
Do you see a way to optimize this? What I want is:
when clicking on <Link> there is only one request directly to https://external-api/... happening and data is updated directly (e.g. as a state of MyPage).
As it is now, when accessing http://localhost:3000/siteX/ the server should fetch the data and prerender the site
I could of course treat data as a state of <MyPage> and simply call a function to update it with a request when <Link> is clicked. But I also want a correct routing, history and so on.
Can you help me with that? Thank you!

Answer 1

After some more resesarch I came across a solution. The next.js <Link> component has a property shallow that I can set to prevent the execution of getServersideProps. That way I can query the new data manually when a link is clicked. Still the initial data query is done by getServersideProps on the server and my intial SSR is working as before.
// Filename: [mypath].jsx
export default function MyPage(props) {
const [data, setData] = useState(props.data);
function updateData(path) {
const res = await fetch(`https://external-api/${path}`)
const data = await res.json();
setData(data);
}
return (
<>
<!-- Manually query and set data -->
<div onClick={() => updateData("siteX")}>
<!-- Trigger routing, but don't execute getServerSideProps (because of shallow={true}) -->
<Link href="/siteX" shallow={true}>
<a>Go to siteX</a>
</Link>
</div>
<div onClick={() => updateData("siteY")}>
<Link href="/siteY" shallow={true}>
<a>Go to siteY</a>
</Link>
</div>
<div>{props.data.text}</div>
</>
);
}
// If page is requested directly via url (and not because a <Link> element has been clicked) do SSR as before
export async function getServerSideProps(context) {
const mypath = context.params.mypath;
const res = await fetch(`https://external-api/${mypath}`)
const data = await res.json();
return { props: { data } };
}