Next.js 14 Link Tag Doesn't Prefetch Data - Network Tab Shows Empty {}

I'm currently working with Next.js 14 and encountered an issue where the Link tag does not seem to prefetch data. Specifically, in the network tab of the developer tools, the preview shows {} instead of the expected JSON response. I'm using getServerSideProps and Page routes

I am expecting that the Link tag will prefetch the data and display the JSON data in the network tab. However, with Next.js 14, it doesn't seem to work as expected. The network tab shows an empty preview {} instead of the JSON data.

Has anyone else encountered this issue? Is there a new configuration or a different approach required in Next.js 14 to ensure that the Link tag prefetches JSON data correctly when using getServerSideProps?

Any insights or solutions would be greatly appreciated.

Additional Information:

Next.js version: 14 Node.js version: v18.17.0

Remove x-middleware-prefetch from the Next JS header.

Add this to middleware.jsx file.

    export async function middleware(NextRequest) {
    const requestHeaders = new Headers(NextRequest.headers);
    requestHeaders.delete('x-middleware-prefetch');
    const response = NextResponse.next({
        request: {
            headers: requestHeaders,
        },
    });
    return response;}