Next.js 学习笔记——数据获取

在Next.js中，我们可以通过几种不同的方式来获取数据。

1. 使用getStaticProps方法（静态站点生成）

这个方法在构建时运行，并且在每个页面的服务器端进行数据获取。这意味着它不会在客户端运行，因此它不会增加到客户端的bundle大小。

export async function getStaticProps() {
  const res = await fetch('https://.../data')
  const data = await res.json()
 
  // 返回数据到页面
  return { props: { data } }
}
 
export default function Home({ data }) {
  // 使用数据
  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  )
}

2. 使用getServerSideProps方法（服务器端渲染）

这个方法在每次请求时运行，并且在服务器端进行数据获取。

export async function getServerSideProps() {
  const res = await fetch('https://.../data')
  const data = await res.json()
 
  // 返回数据到页面
  return { props: { data } }
}
 
export default function Home({ data }) {
  // 使用数据
  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  )
}

3. 使用getInitialProps（已废弃）

这个方法在页面初始化时运行，并且在服务器端进行数据获取。

Home.getInitialProps = async () => {
  const res = await fetch('https://.../data')
  const data = await res.json()
 
  // 返回数据到页面
  return { data }
}
 
export default function Home({ data }) {
  // 使用数据
  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  )
}

4. 使用Apollo Client（GraphQL）

如果你的数据源是GraphQL，你可以使用Apollo Client来获取数据。

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'
 
const client = new ApolloClient({
  uri: 'https://.../graphql',
  cache: new InMemoryCache()
})
 
export default function Home() {
  const [data, setData] = useState(null)
 
  useEffect(() => {
    const fetchData = async () => {
      const result = await client.query({
        query: gql`
          query GetItems {
            items {
              id
              title
            }
          }
        `
      })
      setData(result.data.items)
    }
    fetchData()
  }, [])
 
  if (!data) {
    return