NextJS应用渲染时调用API及getStaticProps菜单数据传递问题

问题1：渲染阶段根据关键词调用API的实现方案 #

你不能直接在组件渲染逻辑里写异步函数的原因是，React组件渲染必须同步返回JSX，异步返回的内容无法直接渲染。可行的实现思路是把每个动态关键词对应的菜单项抽成独立组件，每个组件内部自己管理请求逻辑、加载状态和渲染结果，多关键词场景只要新增对应组件即可，维护成本极低。

推荐用SWR（轻量请求缓存库）实现，也可以用原生useEffect：

示例实现 #

1. 先封装每个关键词对应的独立组件

// components/MenuItems/LatestPosts.js
import useSWR from 'swr'
// 也可以用你自己封装的请求方法
const fetcher = (url) => fetch(url).then(res => res.json())

export const LatestPosts = () => {
  const { data, error, isLoading } = useSWR('/你的最新文章API地址', fetcher)
  if (isLoading) return <span>加载中</span>
  if (error) return <span>加载失败</span>
  return (
    <ul className="latest-posts-menu">
      {data.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  )
}

// 其他关键词同理新增组件，比如components/MenuItems/MovieCatFivePosts.js

2. 调整原有页面逻辑，做类型和组件的映射

import Link from 'next/link'
import { getMenuFromAPI } from '../func/API.js'
import { LatestPosts, MovieCatFivePosts } from '../components/MenuItems'

// 动态类型和组件的映射表，新增关键词只要在这里加对应关系即可
const dynamicMenuMap = {
  latest_posts: LatestPosts,
  movie_cat_five_posts: MovieCatFivePosts
}

const MenuNav = ({ data }) => {
  // 原有菜单结构解析逻辑保留
  return data.map((m, i) => {
    if (m.type === 'link') {
      return (
        <Link href={m.link} key={i}>
          <a>{m.name}</a>
        </Link>
      )
    }
    // 匹配到动态类型直接渲染对应组件
    const DynamicComponent = dynamicMenuMap[m.type]
    if (DynamicComponent) {
      return <DynamicComponent key={i} />
    }
    return null
  })
}

export default function Home({ menus }) {
  return (
    <div>
      <MenuNav data={menus} />
    </div>
  )
}

export async function getStaticProps(context) {  
  const menus = await getMenuFromAPI();
  return { props: { menus } }
}

如果不想引入SWR，也可以用原生useEffect在组件内处理请求：

import { useState, useEffect } from 'react'
export const LatestPosts = () => {
  const [posts, setPosts] = useState([])
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const res = await fetch('/你的最新文章API地址')
        const data = await res.json()
        setPosts(data)
      } catch (err) {
        console.error('请求失败', err)
      } finally {
        setLoading(false)
      }
    }
    fetchPosts()
  }, [])
  // 渲染逻辑和上面一致
}

问题2：公共Header菜单数据的复用优化方案 #

你当前每个页面单独调用getMenuFromAPI再传递给Header的方案是可以正常运行的，但存在重复请求API的冗余问题，可根据你使用的Next.js版本选择优化方案：

如果你用Next.js 13+ App Router #

直接在根layout.js中请求菜单数据，Next.js的fetch自带自动去重能力，拿到数据后直接传给Header组件，所有子页面自动复用，无需每个页面单独处理。

如果你用Pages Router #

• 轻量优化方案：给getMenuFromAPI加内存缓存，构建阶段只会请求一次API，后续所有页面的getStaticProps调用直接返回缓存结果：

// func/API.js 改造
let cachedMenu = null
export const getMenuFromAPI = async () => {
  if (cachedMenu) return cachedMenu
  const res = await fetch('你的菜单API地址')
  cachedMenu = await res.json()
  return cachedMenu
}

• 无props传递方案：用SWR/React Query在Header组件内部直接请求菜单数据，第一次请求成功后会全局缓存，所有页面复用，完全不需要每个页面传递props：

// components/Header.js
import useSWR from 'swr'
import { getMenuFromAPI } from '../func/API'
import MenuNav from './MenuNav'

export default function Header() {
  const { data: menus, isLoading } = useSWR('global-menu', getMenuFromAPI)
  if (isLoading) return <div className="header-placeholder"></div>
  return (
    <header>
      <MenuNav data={menus} />
    </header>
  )
}

• 全静态站点方案：如果你的站点是纯SSG生成，可以在构建阶段（比如next.config.js配置阶段，或者用自定义脚本）把菜单数据写入到公共JSON文件，所有页面直接引入本地JSON，无需请求API。

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