Nextjs - 使用 getServerSideProps 获取单个帖子数据

Question

我正在使用 Nextjs + Strapi 构建一个新闻网站，因为新闻网站是高度动态的，需要每分钟推送更新，所以我无法使用，getStaticProps因为即使使用增量静态再生，这种在构建上获取数据的方法也没有任何意义，此外该网站必须具有高级搜索和用户帐户，用户可以在其中个性化他们想要阅读的新闻类别。

我能够用来getServerProps在布局中获取主菜单数据（新闻类别），我创建了动态路由，但是当涉及到获取属于它的新闻文章（单一类别）时，我找不到任何明确的文档。

我尝试在./pages/api文件夹中创建一个外部方法，以使用as变量getCategoryData.js从外部 api（Strapi 后端）获取单个类别数据，我能够正确获取数据，但我尝试了多种方法将类别数据分配给页面主体方法内部，它没有成功并且返回未定义。axioscategory.slugconst 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 },
    }
}

一个在./pages/api/getCategoryData.js

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因为在那里处理这些请求更容易。

Answer 1

slug您可以从上下文访问参数getServerSideProps，并直接从那里进行外部 API 调用。无需从客户端发出请求。

export async function getServerSideProps({ params }) {
    // Call external API from here directly
    const response = await fetch(`http://localhost:1337/categories?slug=${params.slug}`)
    const data = await res.json()

    return {
        props: { menuItems: data }
    }
}