Not clear on the use of getStaticProps and getStaticPaths with dynamic routes

[samuelgoldenbaum]

I am finding the docs a little ambiguous. Given a list franchises, we would like to render out the relevant franchise detail pages at build time to avoid hitting the CMS/API at run time as these don't change frequently.

However, it seems that even if the relevant pages are generated at build time, they still require the calls in getStaticProps to be executed at runtime. This defeats the purpose of generating static pages.

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 = data.map(post => ({
        params: {id: post.id},
    }));

    // We'll pre-render only these paths at build time.
    return {paths, fallback: false}
}

export default withLayout(Franchise);

Perhaps, I am doing something wrong, but I am looking for some docs/demo on how to generate static pages at build time using data from API that do not require any further calls at runtime to populate props.

[Timer]

These are only ran at build time. Can you please explain why you think they're being ran at runtime?

[Manubi]

if you build the app with yarn build you will se in the terminal/console the following output:

Every page is marked with one of the three labels which indicates what they are using.