getServerSideProps() 未使用组件运行

Question

我正在使用 Next.js 制作一个小型网络应用程序，但我不确定为什么，但是当我使用该组件时 getServerSideProps() 没有运行。我之前在 /pages 的页面上有以下代码，但我将其移至用作组件。

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

  return {
    props: { bans: bans }
  }

}

const BansList = (listName, bans) => {
  
  bans = bans.bans
  console.log(bans) // undefined
  
  return (
    <h1>test</h1>
  )

}

我已经精简了代码以轻松显示问题所在。当我将其用作组件时，getServerSideProps 未运行，因此bans 始终未定义。

Answer 1

getServserSideProps 仅适用于页面级别，而不适用于组件级别。您必须在 pages/ 下使用页面组件

更多信息在这里：https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering