Next.js 14 Link标签无法预取数据：Network Tab显示空{}（getServerSideProps场景）

算力阿峰

2026-6-20

Next.js 14 Page路由+getServerSideProps下Link预取显示空对象{}的问题解决

问题场景

使用Next.js 14的Page路由开发，通过<Link>标签预取目标页面数据时，开发者工具Network Tab的预览区域仅显示空对象{}，而非预期的JSON响应，目标页面使用getServerSideProps获取数据。

可能的原因及解决方案

1. 检查`getServerSideProps`的返回格式

getServerSideProps必须返回包含props字段的对象，若props为空或未正确赋值，预取响应就会显示空对象。

正确示例：

export async function getServerSideProps(context) {
  // 实际数据请求逻辑
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();

  // 确保返回包含props的对象，且props有有效数据
  return {
    props: { data }
  };
}

排查点：确认数据请求是否成功、返回数据是否非空，添加错误处理避免请求失败导致props缺失。

2. 强制开启Link预取行为

Next.js的<Link>默认仅在元素进入视口时触发预取，若未触发预取，可能看不到预期的请求。可以手动强制开启预取：

import Link from 'next/link';

// 强制开启预取
<Link href="/target-page" prefetch={true}>跳转至目标页面</Link>

3. 验证预取时`getServerSideProps`是否执行

在getServerSideProps中添加日志，确认预取请求是否触发了该函数，以及返回的props是否符合预期：

export async function getServerSideProps(context) {
  console.log('getServerSideProps 执行，请求来源：', context.req.headers.referer);
  const data = await fetchSomeData();
  console.log('获取到的数据：', data);
  
  return {
    props: { data }
  };
}

查看终端日志，若预取时未执行该函数，说明预取未触发，需检查Link的写法或页面结构。