使用 Next.js 为社交媒体应用程序生成动态路由的正确方法是什么？

Question

我正在使用 Next.js + Sanity 构建一个社交媒体应用程序。

在社交媒体应用中，数据会随着用户添加评论、点赞等而不断变化，因此使用 getServerSideProps 进行 SSR 是有意义的，因为显示的数据应该在每次请求时更新？

但是我如何处理动态路由，比方说，用户的个人资料页面、post 等？文档解释说，对于动态路由，我应该使用 getStaticPaths 和 getStaticProps 但这并不能保证用户个人资料或 post 的数据会被更新，因为它是静态生成的。

解决这个问题的正确方法是什么？

Answer 1

使用 getServerSideProps 可让您访问 the context parameter of that function，其中包含包含您的动态路由的 params 属性。因此，例如，如果您希望在 /user/{handle} 处拥有用户的个人资料，您可以创建以下目录结构：

pages/
  user/
    [handle].js

然后在你的 [handle].js 文件中（是的，文件名有方括号），你会做这样的事情：

export default function UserHandlePage({ handle }) {
  return (<p>Handle: ${handle}</p>)
}

export async function getServerSideProps(context) {
  const userHandle = context.params.handle
  return {
    props: {
      handle: userHandle
    }
  }
}

您无需列出路径 - 任何对 /user/... 的访问都将运行通过该函数。另请查看 Next Dynamic Routes 文档以了解如何处理 catch-all 路由和其他参数。

Answer 2

您可以通过在 pages 文件夹内的文件中添加括号来处理动态路由。

例如，您有 url localhost:3000/ivanatias（ivanatias 是您的个人资料名称）

页面目录

pages/
 [userProfileId].js

您可以阅读更多关于 Dynamic Routing

现在 context.params.userProfileId 将获取您的 url 上的参数，即 ivanatias

现在您可以在 getServerSideProps 中对数据库执行提取查询并使用 userProfileId

获取数据

export async function getServerSideProps(context) {
  const userProfileId = context.params.userProfileId
  const fakeFetch = await fetch(`someurl.com/profile/${userProfileId}`);
  const data = await fakeFetch.json();
  return {
    props: {
      data: data
    }
  }
}

现在您可以使用组件上的数据了

例如

export default function profile({ data }) {
  return (<h2>{data.name}</h2>)
}

现在关于您是否要使用 getStaticProps 或 getServerSideProps 的问题。如果您认为数据不会经常更改，则由您决定，那么您可以使用 ISG(Incremental Static Regeneration )

使用 Next.js 为社交媒体应用程序生成动态路由的正确方法是什么？

What's the proper way to generate dynamic routes for a social media app using Next.js?

javascript

reactjs

next.js

dynamic-routing