Next.js SSR能否结合动态路由实现社交媒体应用个人主页渲染？

你看到的动态路由示例多基于SSG是因为入门教程大多面向静态站点场景，Next.js原生支持SSR场景下的动态路由能力，完全适配你这种内容高频更新的社交媒体类应用需求，以下是两种主流路由模式的实现方案：

1. Pages Router 实现（经典路由模式） #

动态路由的文件命名规则和SSG场景一致，例如要实现/users/用户ID的个人主页路由，只需在pages目录下创建pages/users/[userId].js文件，使用getServerSideProps替代SSG场景的getStaticProps/getStaticPaths即可实现每次请求拉取最新数据：

// pages/users/[userId].js
export default function UserProfile({ userInfo, userPosts }) {
  // 渲染用户信息、发布的帖子、评论等内容
}

// 每次用户访问页面时都会在Next.js服务端执行该方法
export async function getServerSideProps(context) {
  // 从动态路由参数中获取当前访问的用户ID
  const { userId } = context.params;
  // 调用你的Express后端接口拉取最新数据
  const userRes = await fetch(`http://你的Express服务地址/api/users/${userId}`);
  const userInfo = await userRes.json();
  const postsRes = await fetch(`http://你的Express服务地址/api/users/${userId}/posts`);
  const userPosts = await postsRes.json();

  return {
    // 拉取到的数据会传递给页面组件用于渲染
    props: { userInfo, userPosts }
  }
}

2. App Router 实现（Next.js 13+ 推荐） #

如果你使用新版App Router，无需专门的服务端数据获取方法，默认的服务端组件就可以直接在组件内部拉取数据，动态路由文件命名为app/users/[userId]/page.js即可：

// app/users/[userId]/page.js
// 该组件为默认服务端组件，代码只会在Next.js服务端运行
async function UserProfile({ params }) {
  const { userId } = params;
  // 直接拉取后端最新数据，配置cache: 'no-store'关闭缓存实现SSR效果
  const userRes = await fetch(`http://你的Express服务地址/api/users/${userId}`, {
    cache: 'no-store'
  });
  const userInfo = await userRes.json();
  const postsRes = await fetch(`http://你的Express服务地址/api/users/${userId}/posts`, {
    cache: 'no-store'
  });
  const userPosts = await postsRes.json();

  return (
    <div>
      <h1>{userInfo.nickname}的个人主页</h1>
      {/* 渲染帖子、图片、评论等动态内容 */}
    </div>
  )
}

export default UserProfile;

可选优化方案 #

如果你的内容不需要毫秒级实时更新，还可以选择*增量静态再生（ISR）*方案，例如设置每5-30秒重新生成一次页面，兼顾静态页面的访问性能和数据新鲜度，适配绝大多数社交媒体场景的需求。

内容的提问来源于stack exchange，提问作者Djony