Next.js与Strapi集成后前端无法显示服务端返回数据如何解决？

你这个猜测是错误的，Next.js的getStaticProps会在页面组件渲染前完成所有异步逻辑，拿到返回的props后才会渲染组件，不存在提前渲染的问题。你遇到的问题大概率是以下几个原因：

• Strapi v4默认返回嵌套结构
  从Strapi v4开始，接口返回的所有实体数据都会嵌套在data字段下，你直接把res.data传给tasks的话，拿到的结构是{data: [任务数组], meta: {分页信息}}，外层是对象不是数组，自然无法调用map方法遍历。
• 多余的await操作
  axios请求返回的res.data已经是经过解析的JS对象，不需要额外加await，虽然这个问题不会导致功能异常，但属于冗余代码。
• 日志位置不对
  getStaticProps是服务端执行的函数，你写的console.log(data)会打印在启动Next.js的终端里，不会出现在浏览器控制台，先去服务端终端确认返回的数据结构是否符合你的预期。

你可以参考下面的修正代码调整：

import axios from 'axios';

const Tasks = ({ tasks }) => {
  return (
    <ul>
      {tasks && tasks.map(task => (
        <li key={task.id}>{task.attributes.name}</li>
      ))}
    </ul>
  );
};

export async function getStaticProps() {
  const res = await axios.get('http://localhost:1337/tasks');
  // 取出Strapi返回的嵌套数组
  const data = res.data.data;

  if (!data || data.length === 0) {
    return {
      notFound: true,
    }
  }

  return {
    props: { tasks: data },
  };
};

export default Tasks;

如果调整后还是无法展示，去Strapi后台的「设置-用户与权限插件-角色-Public」，确认tasks资源的find权限已经开启，否则服务端请求会拿到403错误，返回非预期数据。

内容的提问来源于stack exchange，提问作者JoelEng