Next.js中如何导入基于API的组件 导入后数据无法加载如何解决

问题核心原因 #

• getInitialProps是Next.js页面级组件专属方法，仅放置在pages目录下作为独立路由的组件，才会被Next.js自动触发执行。你直接将Api组件作为子组件导入到首页使用时，Next.js不会自动调用该方法，这就是直接访问/Api路由正常、首页引入不生效的根本原因。
• 你使用的next/dynamic动态导入逻辑，默认也不会触发组件的getInitialProps执行。

解决方案 #

方案1：将数据请求移到首页的数据获取逻辑中，通过props传递给子组件

1. 调整Api.jsx为纯展示组件，移除专属页面的getInitialProps逻辑：

// Api.jsx
function Api({ stars }) {
  return <div>Next stars: {stars}</div>
}
export default Api

2. 调整首页index.js，在页面级getInitialProps中完成数据请求：

import dynamic from 'next/dynamic'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import 'semantic-ui-css/semantic.min.css'
// 不需要动态导入可以直接普通引入，要保留动态导入可以加ssr: false配置
import ApiComponent from './comps/Api';

export default function Home({ stars }) {
  return (
    <div className={styles.container}>
      <p>Welcome</p>
      <ApiComponent stars={stars}/>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

Home.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

方案2：组件内保留请求逻辑，改用客户端请求方式

如果希望组件在任意位置引入都可以独立获取数据，将请求逻辑放到useEffect中执行即可：

// Api.jsx
import { useEffect, useState } from 'react'

function Api() {
  const [stars, setStars] = useState(null)

  useEffect(() => {
    const fetchStars = async () => {
      const res = await fetch('https://api.github.com/repos/vercel/next.js')
      const json = await res.json()
      setStars(json.stargazers_count)
    }
    fetchStars()
  }, [])

  return stars ? <div>Next stars: {stars}</div> : <div>数据加载中</div>
}

export default Api

如果保留next/dynamic动态导入，需要补充ssr: false配置：

const ApiComponent = dynamic(() => import('./comps/Api'), { ssr: false })

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