Next.js渲染概述 #

构建时 → SSG
请求时 → SSR
定时更新 → ISR
浏览器 → CSR

请求 → 服务器渲染HTML → 返回完整HTML → 浏览器显示

请求 → 返回空HTML → 加载JS → 浏览器渲染

export default function Page() {
    return (
        <div>
            <ServerComponent />
            <ClientComponent />
        </div>
    )
}

async function ServerComponent() {
    const data = await fetch('https://api.example.com/data')
    const result = await data.json()
    
    return <div>{result.title}</div>
}

import ClientCounter from './ClientCounter'

export default async function Page() {
    const data = await getData()
    
    return (
        <div>
            <h1>{data.title}</h1>
            <ClientCounter initialValue={data.count} />
        </div>
    )
}

export const dynamic = 'force-dynamic'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'

export const revalidate = 3600

export default async function Page() {
    const data = await fetch('https://api.example.com/data')
    
    return <div>{data}</div>
}

export const dynamic = 'force-static'

export default async function Page() {
    const data = await fetch('https://api.example.com/data', {
        cache: 'force-cache',
    })
    
    return <div>{data}</div>
}

export async function generateStaticParams() {
    const posts = await getPosts()
    
    return posts.map(post => ({
        slug: post.slug,
    }))
}

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
    const { slug } = await params
    const post = await getPost(slug)
    
    return <article>{post.content}</article>
}

import { cookies, headers, searchParams } from 'next/headers'

export default async function Page() {
    const cookieStore = await cookies()
    const headersList = await headers()
    
    return <div>{cookieStore.get('token')}</div>
}

export const dynamic = 'force-dynamic'

export default async function Page() {
    const data = await fetch('https://api.example.com/data', {
        cache: 'no-store',
    })
    
    return <div>{data}</div>
}

import { Suspense } from 'react'

export default function Page() {
    return (
        <div>
            <h1>页面标题</h1>
            <Suspense fallback={<Loading />}>
                <SlowComponent />
            </Suspense>
        </div>
    )
}

export default function Loading() {
    return (
        <div className="animate-pulse">
            <div className="h-8 bg-gray-200 rounded w-1/2 mb-4"></div>
            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
        </div>
    )
}

app/
├── loading.tsx
└── page.tsx

export default async function Page() {
    const data = await getData()
    
    return <div>{data}</div>
}

'use client'

import { useState } from 'react'

export default function Counter() {
    const [count, setCount] = useState(0)
    
    return <button onClick={() => setCount(count + 1)}>{count}</button>
}

export default async function Page() {
    const data = await getData()
    
    return (
        <div>
            <StaticHeader data={data.header} />
            <Suspense fallback={<Skeleton />}>
                <DynamicContent />
            </Suspense>
        </div>
    )
}