Next.js fetch数据未在模板渲染且接口重复调用两次问题排查

两个异常的原因分别是：

• 页面无渲染内容：Array.map的回调使用花括号包裹逻辑时，没有显式return要渲染的JSX节点，你写的{blogs.blog_title;}只是孤立的执行语句，没有返回值，最终遍历生成的数组全是undefined，页面自然不会展示任何内容。
• 接口重复调用两次：Next.js在开发环境默认开启React严格模式，会重复执行一次数据请求、组件生命周期相关逻辑，用来检测代码里的不规范写法，这个行为仅在开发环境生效，生产构建后不会出现重复请求，不属于代码bug。

直接替换成下面的写法即可正常渲染：

export default function Content({ blog }) {
  return (
    <>
      {blog.map((singleBlog) => (
        // 记得给列表项加唯一key，用数据自带的id即可，不要用遍历下标
        <div key={singleBlog.id}>{singleBlog.blog_title}</div>
      ))}      
    </>
  );
}


export async function getServerSideProps() {
  // 从外部API拉取数据
  const url = "http://127.0.0.1:8000/blog-api";
  const headers = {
    "Content-Type": "application/json",
    Authorization: "<secret>",
  };

  const res = await fetch(url, { headers });
  const data = await res.json();
  console.log(data);
  // 通过props把数据传给页面
  return {
    props: {
      blog: data,
    },
  };
}

如果确实想在开发环境关闭重复请求，可以去项目根目录的next.config.js中把reactStrictMode配置项设为false，但不推荐这么做，严格模式可以提前帮你排查很多隐蔽的代码问题，避免线上出bug。

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