Next.js 基于getServerSideProps实现单分类关联新闻数据拉取的问题

完全不需要迁移到Nuxt，你遇到的所有问题都是实现路径的偏差，和Next.js的服务端渲染能力无关 #

先定位你当前实现的三个核心问题 #

• 错误把API路由模块当普通工具函数导入
  你放在./pages/api/getCategoryData.js的文件，本质是Next.js对外暴露的HTTP API接口，运行在独立的服务端路由上下文，根本不能在页面组件、getServerSideProps里直接import调用——这就是你之前调用永远返回undefined的根本原因。
• 客户端拉取的逻辑错位
  你已经明确了站点是分钟级高频动态更新，选择getServerSideProps做服务端渲染是完全正确的技术选型，完全没必要在组件内用useRouter拿slug再客户端发请求拉取数据，这种模式既会拖慢首屏加载，还会出现数据加载白屏闪烁。
• 对getServerSideProps的上下文能力认知错误
  getServerSideProps运行在服务端，接收的context参数里可以直接拿到动态路由的参数，根本不需要从组件作用域导出slug，也完全不需要用已经废弃的getInitialProps。

可直接复用的落地实现方案 #

1. 抽离公共Strapi请求工具
   在项目根目录新建lib/strapi.js，把你之前写在API路由里的axios请求逻辑移到这个纯工具模块里，不管是页面渲染、API接口都可以直接导入调用，完全不需要绕一层自己写的中转接口：

   import axios from 'axios'
   const STRAPI_BASE = process.env.STRAPI_API_BASE
   // 拉取主导航全部分类的方法
   export async function fetchNavCategories() {
     const res = await axios.get(`${STRAPI_BASE}/api/categories?populate=*`)
     return res.data
   }
   // 按slug拉取单分类及关联文章的方法
   export async function fetchCategoryBySlug(slug) {
     const res = await axios.get(`${STRAPI_BASE}/api/categories`, {
       params: {
         filters: { slug: { $eq: slug } },
         populate: {
           articles: {
             sort: ['publishedAt:desc'],
             pagination: { limit: 20 }
           }
         }
       }
     })
     return res.data.data[0] || null
   }
   

2. 改造单分类动态页的getServerSideProps
   把你当前只拉导航分类的逻辑，改造成并行拉取导航数据和当前分类关联数据的模式：

   // 从公共工具模块导入方法，不要从pages/api目录导
   import { fetchNavCategories, fetchCategoryBySlug } from '../../lib/strapi'
   
   export async function getServerSideProps(context) {
     // 直接从路由上下文拿动态slug参数，不需要从组件里往外导
     const { slug } = context.params
     // 并行发起两个请求，减少整体等待时间
     const [navCategories, currentCategory] = await Promise.all([
       fetchNavCategories(),
       fetchCategoryBySlug(slug)
     ])
     // 无匹配分类时直接返回404
     if (!currentCategory) {
       return { notFound: true }
     }
     // 把所有数据作为props传给页面组件
     return {
       props: {
         navCategories,
         currentCategory
       }
     }
   }
   
   // 页面组件直接从props取数据渲染即可，不需要客户端额外拉取
   export default function CategoryPage({ navCategories, currentCategory }) {
     // 渲染分类名称、关联文章列表
   }
   

3. 删除冗余的中转API文件
   你之前写在pages/api/getCategoryData.js的中转逻辑完全没必要存在——在Next.js服务端再转一层请求到Strapi，只会徒增请求链路的耗时，没有任何收益。

后续扩展的适配提示 #

• 高级搜索、用户账号个性化分类的功能，完全可以在getServerSideProps里把用户的鉴权token从请求头透传到Strapi接口，直接拿到对应用户的个性化数据，不需要额外的中间层。
• 对于分钟级更新的新闻内容，getServerSideProps的渲染模式完全可以满足需求，搭配Strapi端的接口缓存规则就能把性能优化到可接受的范围，不需要硬套静态生成的方案。
• 不要在getServerSideProps里发起对自身Next.js API路由的HTTP请求，这种自调用模式不仅性能差，还经常出现请求上下文丢失、跨域超时的问题，直接在服务端请求Strapi原生接口即可。

内容的提问来源于stack exchange，提问作者Bilal Mahmud