2026-01-20 日报 Day306

今日吐槽

被需求压的喘不过气，趁着给车充电的时间，自己也来充充电。

NEXT.JS

App Router and Pages Router

Pages Router 是 Next.js 的传统路由系统，而 App Router 是 Next.js 13 引入的新路由系统。App Router 提供了更灵活的路由配置和更好的性能。

The Pages Router uses an intuitive file-system router to map each file to a route.

What‘s means?

pages/
├─ index.tsx → /
├─ about.tsx → /about
├─ blog/[id].tsx → /blog/123
└─ api/
└─ user.ts → /api/user

文件即路由

custom _app.js/ts
https://nextjs.org/docs/pages/building-your-application/routing/custom-app

App does not support Next.js Data Fetching methods like getStaticProps or getServerSideProps

Pages Router：getServerSideProps（SSR）
App Router：Server Component + fetch({ cache: ‘no-store’ })（SSR）

举个简单的例子：
👉 每次请求都从服务端获取当前时间（保证是 SSR）
⸻

一、Pages Router（getServerSideProps）

// 📁 pages/time.tsx
// pages/time.tsx

type Props = {
  time: string
}

// 每一次请求都会执行
export async function getServerSideProps() {
  const time = new Date().toISOString()

  return {
    props: {
      time,
    },
  }
}

export default function TimePage({ time }: Props) {
  return (
    <div>
      <h1>Server Time (Pages Router)</h1>
      <p>{time}</p>
    </div>
  )
}

行为说明
• 每次访问 /time
• 服务端重新执行 getServerSideProps
• 页面 HTML 每次都不同
• 客户端 Hydration 后展示

⸻

二、App Router（等价 SSR 写法）

📁 app/time/page.tsx

// app/time/page.tsx

export const dynamic = ‘force-dynamic’ // 明确声明动态渲染（可选但推荐）

export default async function TimePage() {
// 在 Server Component 中执行
const time = new Date().toISOString()

return (

Server Time (App Router)

{time}

)
}

行为说明
• 每次请求 /time
• Server Component 在服务端重新执行
• HTML 每次不同
• 不需要 props，不需要 GSSP

⸻

三、再来一个「真实接口 fetch」的 SSR 对比

Pages Router

// pages/user.tsx

export default function UserPage({ user }: any) {
return

{user.name}

}

export async function getServerSideProps() {
const res = await fetch(‘https://api.example.com/user ‘)
const user = await res.json()

return {
props: { user },
}
}

⸻

App Router（等价）

// app/user/page.tsx

export const dynamic = ‘force-dynamic’

export default async function UserPage() {
const res = await fetch(‘https://api.example.com/user ‘, {
cache: ‘no-store’, // 👈 核心：SSR
})
const user = await res.json()

return

{user.name}

}

⸻

四、核心差异一眼看懂

对比项 Pages Router App Router
数据入口 getServerSideProps 组件内部
执行位置 Server Server
是否每次请求 ✅ ✅
props 注入 必须 ❌
JS 体积 全量 Hydration Server Component，最小
代码结构 页面 + 数据函数 数据即组件

⸻

五、关键认知点（很重要）

1️⃣ App Router 的 SSR 不靠「函数名」

而靠 渲染模式

cache: ‘no-store’

或

export const dynamic = ‘force-dynamic’

⸻

2️⃣ 你可以混用 Client Component

// app/time/Clock.tsx
“use client”

export function Clock({ time }: { time: string }) {
return {time}
}

// app/time/page.tsx
import { Clock } from ‘./Clock’

export default async function Page() {
const time = new Date().toISOString()
return
}

👉 服务端算数据，客户端负责交互

Reference:
https://nextjs.org/docs/pages