相关疑难解决方法(0)

我发现文档有点模棱两可。给定一个特许经营列表，我想在构建时呈现相关的特许经营详细信息页面，以避免在运行时访问 CMS/API，因为这些页面不会经常更改。

然而，似乎即使相关页面是在构建时使用 生成的getStaticPaths，它们仍然需要getStaticProps在运行时执行调用。这违背了生成静态页面的目的。

import {withLayout} from '../../components/layout';
import {getFranchises} from '../api/franchises';

const Franchise = (props) => {
    console.info(props);

    return (
        <>
            <h1>{props.name}</h1>
        </>
    );
};

export async function getStaticProps({params}) {
    let data = await getFranchises();

    let franchise = data.find(x => x.id === params.id);

    return {
        props: franchise
    }
}

export async function getStaticPaths() {
    let data = await getFranchises();

    // Get the paths we want to pre-render based on posts
    const paths = …

中进行的 API 调用getStaticProps似乎会导致错误 500。

这是我的组件的代码：

import React from "react";
import API from "services/api";

const ArtistListPage = (props) => {
    return (
        <>
            {props.artists.map((artist) => (
                <div key={artist.id}>{artist.first_name}</div>
            ))}
        </>
    );
};

export async function getStaticProps() {
    // Get external data from the file system, API, DB, etc.
    const res = await API.get("/get_artists");
    const artists = await res.data.json();
    return {
        props: { artists },
    };
}

export default ArtistListPage;

我想提一下，在 a 中进行相同的 API 调用useEffect，以及将硬编码对象传递到propsin 中 …