Question

我们目前正在开发一个 Nextjs 项目，其中包含许多动态页面。我们已经到了使用 getStaticProps 和 getStaticPaths 定义动态路径的阶段。到目前为止，我们设法在动态页面中定义了 404 页面，其结构与以下类似：

export async function getStaticProps(context) {
    const { id } = context.params
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
    const user = await response.json()
    
    return {
        props: { user },
        notFound: Object.keys(user).length === 0
    }
}

export function getStaticPaths() {
    return {
        paths: [],
        fallback: 'blocking'
    }
}

使用版本 10 的 notFound 值和 fallback: blocking 允许我们让页面返回 404 状态代码（出于某种原因，fallback: true 返回 200 状态代码）。

我们目前遇到的问题是向依赖于用户数据（如用户名或用户区域设置）的页面显示 404 页面。我们认为可以解决此问题的一种方法是将这些页面作为服务器端生成，而不是使用 getServerSideProps 生成静态站点：

export async function getServerSideProps(context) {
    const userId = getCookie('user_id')

    const response = await fetch(`___/checkUserAccess/${userId}`)
    const access = await response.json()
    
    return {
        props: { ... },
        notFound: !access.userAllowed
    }
}

我想我在这里回答我自己的问题，因为这些页面的服务器端显示基于用户数据的 404 页面似乎是合乎逻辑的。然而，令人担忧的是它可能对整个网站产生的影响。这些页面很容易变成数百页。

我们应该关心这个吗？或者也许有另一种方法来解决这个问题？

Nextjs：根据用户数据渲染页面或显示404页面

0 个答案: