getInitialProps doesn't render on client side

Question

I'm trying to fetch data from my API server to use in my page, but I need SSR for SEO purposes.

So what I want here is:

Server Side Rendering: When a search engine visits a page.

Client Side Rendering: When user navigates different pages.

It should be noted that I use next/link for all of my links like so:

<Link href="/products/1/slug-goes-here">
    <a>Product A</a>
</Link

I have tried following methods (NOT AT THE SAME TIME) but either way, they just request the API server only on server side and never on client side.

Note: It takes way too long to respond, at least 15 seconds.

MyPage.getInitialProps = async (context) => {
    const data = (await getData({ id: context.query.id })).data;
    
    return { data };
}

// OR

export const getServerSideProps = async (context) => {
    const data = (await getData({ id: context.query.id })).data;
    
    return { props: data };
}

Answer 1

I just updated next from 12.0.4 to 13.1.2 and the first thing that happened was Internal Server Error caused by using <a> inside next/link.

So I removed <a> from every <Link> in my App and now everything works as expected.

It should be noted that in version 13.1.2 there is no need to use <a> inside <Link> to make the link visible to search engines.