如何在Next.js中实现服务端渲染及客户端路由与数据获取？

Next.js的服务端渲染（SSR）可通过两种路由架构实现，具体方式如下：

Pages Router 实现方式 #

在pages目录的页面文件中，导出getServerSideProps异步函数。该函数会在每次请求时在服务器端执行，获取数据后传递给页面组件：

// pages/posts/[id].js
export default function Post({ post }) {
  return <div>{post.title}</div>
}

export async function getServerSideProps(context) {
  // 从context获取路由参数、请求头等上下文信息
  const { id } = context.params
  // 服务器端调用API获取数据
  const res = await fetch(`https://api.example.com/posts/${id}`)
  const post = await res.json()

  // 将数据传递给页面组件
  return {
    props: { post }
  }
}

用户每次访问该页面，服务器都会运行getServerSideProps获取最新数据，再渲染完整HTML返回给客户端。

App Router 实现方式 #

App Router中默认组件为Server Components，可直接在组件内部编写异步代码实现服务端渲染：

// app/posts/[id]/page.js
async function PostPage({ params }) {
  // 代码在服务器端执行，直接异步获取数据
  const res = await fetch(`https://api.example.com/posts/${params.id}`, { cache: 'no-store' })
  const post = await res.json()

  return <div>{post.title}</div>
}

export default PostPage

若需基于请求头、Cookie做逻辑判断，可结合headers()、cookies()等函数获取请求上下文。

需结合Next.js的客户端路由组件与客户端数据获取方案，分两种路由架构说明：

核心依赖特性/组件 #

• next/link：实现无刷新客户端路由跳转
• 客户端数据获取：useEffect（原生方案）、SWR/React Query（推荐的缓存方案）；App Router中需配合'use client'指令

Pages Router 步骤 #

1. 配置客户端路由跳转
   用next/link包裹跳转链接，避免页面刷新：

// pages/index.js
import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <Link href="/profile">跳转到个人中心</Link>
    </div>
  )
}

2. 目标页面加载时获取数据
   在目标页面（如pages/profile.js）中，用useEffect在客户端组件挂载后调用API，或用SWR简化数据管理：

// pages/profile.js
import { useEffect, useState } from 'react'
// 推荐方案：import useSWR from 'swr'

export default function Profile() {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  // 原生方案：useEffect
  useEffect(() => {
    async function fetchUser() {
      const res = await fetch('/api/user')
      const data = await res.json()
      setUser(data)
      setLoading(false)
    }
    fetchUser()
  }, [])

  // 推荐方案：SWR（自带缓存、重新验证等能力）
  // const fetcher = url => fetch(url).then(res => res.json())
  // const { data: user, isLoading } = useSWR('/api/user', fetcher)

  if (loading) return <div>加载中...</div>
  return <div>用户名：{user.name}</div>
}

App Router 步骤 #

1. 配置客户端路由跳转
   用法与Pages Router一致，使用next/link：

// app/page.js
import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <Link href="/profile">跳转到个人中心</Link>
    </div>
  )
}

2. 目标页面转为Client Component并获取数据
   App Router默认是Server Component，需添加'use client'指令转为客户端组件，再使用useEffect或SWR获取数据：

// app/profile/page.js
'use client'

import { useEffect, useState } from 'react'
// import useSWR from 'swr'

export default function ProfilePage() {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    async function fetchUser() {
      const res = await fetch('/api/user')
      const data = await res.json()
      setUser(data)
      setLoading(false)
    }
    fetchUser()
  }, [])

  if (loading) return <div>加载中...</div>
  return <div>用户名：{user.name}</div>
}

内容的提问来源于stack exchange，提问作者New Web Order