SSG+CSR #CodePiece

CodePiece.js

// pages/posts/[id].js
export default function Page(props) {
    const router = useRouter()
    const [post, setPost] = useState(props.post)
    if (!post) {
        return <Locading />
    }
    useEffect(async () => {
        if (!post) {
            const resp = fetch(`https://example.com/api/post/${router.params.id}`)
            setPost(resp.data)
        }
    })
    return <>
        <PostBody data={post} />
    </>
}
export async function getStaticPaths() {
    const resp = await fetch(`https://example.com/api/posts`)
    const paths = resp.data.map(post => ({
        params: {
            id: post.id,
        }
    }))
    return {
        paths,
        fallback: true,
    }
}
export async function getStaticProps(ctx) {
    const resp = await fetch(`https://example.com/api/post/${ctx.params.id}`)
    const post = resp.data
    return {
        props: {
            post,
        }
    }
}