Gatsby 用动态页面覆盖静态页面（createPages）？

Question

我们有一个用户平台项目。每个用户都有一个配置文件详细信息页面（/{id}}，我们在构建期间使用 createPages() 创建。当登录的用户对其配置文件进行更改时，它们将保留在数据库中，但更改对他不可见直到再次触发构建。用户可能会认为他的更改丢失并且可能会感到沮丧。我们理想的解决方案是显示动态登录的用户的个人资料。

是否可以在同一 url 上用动态页面覆盖静态创建的页面？我们希望保持 URL 不变（/{id}），因为用户会与其他用户分享他的链接。

// Generation of static pages
exports.createPages = async function ({ actions, graphql }) {
  const { data } = await graphql(`
    query {
      apollo {
        allProfiles {
          email
          id
        }
      }
    }
  `)
  data.apollo.allProfiles.forEach((profile) => {
    const email = profile.email
    const id = profile.id
    actions.createPage({
      path: id,
      component: require.resolve(`./src/templates/profile-detail.js`),
      context: { email: email },
    })
  })
}

Answer 1

我认为人们对盖茨比的工作方式存在误解。您的页面在内容方面是静态的，但在 JavaScript 和 React 的逻辑方面是动态的。

您的页面当前是静态的，因为您在构建时填充了组件/页面，但是，您需要向端点发出 API 请求（例如通过 axios）以获取数据库中的更改并填充您的在你的 JavaScript 逻辑中反应状态和显示/隐藏组件，而不是在服务器本身中。

您的/{id} 将保持完全相同，因为它是在createPage 期间创建的，但您将根据用户的操作添加逻辑。