NextJS getServerSideProps 仅适用于一个帖子,让任何其他冻结

问题描述 投票:0回答:0

问题

我正在使用 NextJS Typescript 和 MongoDB 作为数据库构建一个博客。

我正在尝试使用 getServerSideProps 获取数据以填充 [slug].tsx 页面(带有 slug 查询的动态路由),但由于某种原因,该页面 确实填充了单个特定帖子的数据但不适用于任何其他帖子(该页面会减慢冻结速度,尽管

useEffect
确认道具已从服务器传递并设置在
post
author
状态中)。

我不会使用

getStatisProps
因为修改会定期进行。

帖子之间没有任何区别。

代码


export const getServerSideProps: GetServerSideProps = async ({params}: any) => {

    const clientPromise = await getClient()

    const post = await clientPromise
        .db("my-db")
        .collection("articles")
        .findOne({ 'titleSlug': params.slug }, {projection: { "_id": 0 }})

    if (post) {
        const author = await clientPromise
            .db("my-db")
            .collection("auteurs")
            .findOne({ 'slug': post.authorSlug }, {projection: { "_id": 0 }})

        await clientPromise.close()
        return { props: { post: post, author: author}}
    }

    await clientPromise.close()
    return { props: { error: true }}

}

function Post (props: InferGetServerSidePropsType<typeof getServerSideProps>)  {

    const [post, setPost] = React.useState<any>(null)
    const [author, setAuthor] = React.useState<any>(null)

    React.useEffect(() => {
        console.log(props)
        if (props.post) {
            setPost(props.post)
        }

        if (props.author ) {
            setAuthor(props.author)
        }
    }, [props])

    if (!props || !post || !author) { return null }

    return (
        <>
            <main className={"main"}>
                <Container maxWidth={"md"} sx={{ py: 4 }}>
                    <PostView post={post} author={author} />
                </Container>
            </main>
        </>
    )
}

export default Post

依赖关系

{
    "@types/node": "18.15.9",
    "@types/react": "18.0.29",
    "@types/react-dom": "18.0.11",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "mongodb": "^4.8.0",
    "next": "13.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.0.2"
}
reactjs typescript next.js freeze
© www.soinside.com 2019 - 2024. All rights reserved.