Next.js将页面代码抽离为组件后getServerSideProps不运行怎么办？

核心原因是你违反了Next.js Pages Router的getServerSideProps使用规则，同时存在组件参数接收的语法错误，按以下步骤修复即可：

• 第一，getServerSideProps是Next.js仅对/pages目录下页面级文件提供的特殊API，只有页面文件导出的该方法才会被Next.js自动调用，普通自定义组件中导出的getServerSideProps不会被识别执行，这是该方法日志不打印的根本原因。
• 第二，你的React组件参数写法错误：函数组件只会接收一个props对象作为入参，你写的(listName, bans)会导致所有属性都被挂载到第一个listName参数上，bans参数永远为undefined。

修复方案1（保留服务端渲染获取数据） #

把getServerSideProps放回引用BansList的页面文件中，拿到数据后通过props传递给组件：

页面文件代码（存放于/pages目录下） #

import BansList from '../components/BansList'

export const getServerSideProps = async () => {
  console.log("in getServerSideProps")
  const bans = await fetch('http://localhost:3000/api/get_bans').then(res => res.json())
  return {
    props: { bans }
  }
}

const Page = ({ bans }) => {
  // 按实际需求传listName参数即可
  return <BansList listName="封禁列表" bans={bans} />
}

export default Page

抽离的BansList组件代码 #

// 注意入参要用对象解构写法
const BansList = ({ listName, bans }) => {
  console.log(bans) // 可正常拿到数据
  return <h1>test</h1>
}

export default BansList

修复方案2（改为客户端组件内获取数据） #

如果你希望把数据获取逻辑封装在组件内部，可以改用客户端useEffect发起请求，无需使用getServerSideProps：

import { useEffect, useState } from 'react'

const BansList = ({ listName }) => {
  const [bans, setBans] = useState([])

  useEffect(() => {
    const fetchBans = async () => {
      const res = await fetch('/api/get_bans')
      const data = await res.json()
      setBans(data)
    }
    fetchBans()
  }, [])

  console.log(bans) // 可正常拿到数据
  return <h1>test</h1>
}

export default BansList

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