Javascript Nextjs-使用getServerSideProps获取单个post数据

我正在使用Nextjs+Strapi构建一个新闻网站，因为新闻网站是高度动态的，需要每分钟推送更新，我不能使用

getStaticProps

，因为这种方法在构建时获取数据，即使使用增量静态再生也没有任何意义，此外，该网站必须有高级搜索和用户帐户，他们可以个性化的新闻类别，他们想阅读

我能够使用

getServerProps

获取版面中的主菜单数据（新闻类别），我创建了动态路由，但是当涉及到获取（单一类别）新闻文章时，我找不到任何明确的文档。

我尝试在

/pages/api

文件夹

getCategoryData.js

中创建一个外部方法，使用

axios

和

category.slug

作为变量从外部api（Strapi后端）获取单个类别数据，我能够正确地获取数据，但我尝试了许多方法将类别数据分配给页面正文方法中的

const category

，但没有成功，返回的是未定义的

这正是我在单一类别页面中所做的：

/pages/category/[slug]/index.js

import { useRouter } from 'next/router'
import DefaultLayout from "../../../components/layouts/default";
import { getCategory } from "../../api/getCategoryData";

const CategoryArticles = ({ menuItems }) => {
    const router = useRouter()
    const { slug } = router.query

    const category  = getCategoryData(slug); 
    console.log(category) // here returns undefined !!!

    return (
        <DefaultLayout menuItems={ menuItems }>
            <div>  { category.name } </div>
        </DefaultLayout>
    );
}
export default CategoryArticles

// Note: I tried to call getCategoryData(slug) here but could not export the slug variable outside of
// page body method, also tried to use getInitialProps method for that, it did not work since I am
// using getServerSideProps. 

export async function getServerSideProps() {
    const res = await fetch('http://localhost:1337/categories')
    const data = await res.json()

    return {
        props: { menuItems: data },
    }
}

import axios from "axios";

export const getCategoryData = async (slug) => {
    const response = await axios.get(`http://localhost:1337/categories?slug=${slug}`);

    console.log(response.data[0]) // here when I logged response data it returened a json object

    if (!response.data.length) {
        return {
            statusCode: 404,
        };
    }

    return {
        statusCode: 200,
        category: response.data[0],
    };

};

有什么建议吗？我花了4天时间在互联网上搜索，但我完全搞糊涂了大多数教程解释了如何获得静态道具，而没有任何关于服务器端道具的细节，

---

或者我应该迁移到使用

Vue Nuxtjs

，因为它更容易处理这些请求。

您可以从

getServerSideProps

上下文访问

slug

参数

导出异步函数getServerSideProps（{params}）{
//从这里直接调用外部API
const response=等待axios.get(`http://localhost:1337/categories?slug=${params.slug}`）；
const data=await res.json（）
返回{
道具：{menuItems:data}，
}
}

您不能通过调用这样的方法来调用api，当您试图在客户端对api进行控制台操作时，api正在您的服务器上运行。唯一可以做到这一点的方法是使用

getServerSideProps

或其他选项，如nextApiRequests

相反，直接在

getServerSideProps

中使用抓取，它会工作得非常好

我建议你读一下这个

---

为了更好地理解它。

@Faruk，我找出了我的问题所在，我不知道如何将page

params

传递到

getServerSideProps

方法中，所以我将其更改为以下内容：```导出异步函数getServerSideProps（{params}）{const res u category=Wait fetch（

http://localhost:1337/categories/?      鼻涕虫=${encodeURI（slug）}

）const CategoryData=wait res_category.json（）const category=CategoryData[0]返回{props:{category}，}}}```它工作得很好，谢谢大家