静态渲染vs动态渲染：网站渲染方法

// app/page.tsx - 默认静态渲染

export default async function Page() {
  const data = await fetch("https://api.example.com/data");
  const json = await data.json();

return <div>{/* 渲染内容 */}</div>;
}

// 强制静态渲染
export const dynamic = 'force-static';

// 使用重新验证（ISR）
export const revalidate = 3600; // 每3600秒重新生成

// pages/posts/[id].js

export default function Post({ post }) {
  return <article>{post.title}</article>;
}

// 获取静态路径
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();

const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));

return { paths, fallback: false };
}

// 获取静态属性
export async function getStaticProps({ params }) {
const res = await fetch(\`https://api.example.com/posts/\${params.id}\`);
const post = await res.json();

return {
props: { post },
revalidate: 3600, // ISR: 每3600秒重新生成
};
}

// app/dashboard/page.tsx - 动态渲染

export const dynamic = "force-dynamic"; // 强制动态渲染

export default async function Dashboard() {
  // 使用cookies、headers等请求时信息
  const { cookies } = await import("next/headers");
  const session = await getSession(cookies());

// 获取用户特定数据
const userData = await fetchUserData(session.userId);

return <div>{/* 个性化内容 */}</div>;
}

// 或者使用动态函数自动启用动态渲染
export default async function Page() {
const { cookies } = await import('next/headers');
// 使用cookies()会自动启用动态渲染
}

// pages/dashboard.js

export default function Dashboard({ userData }) {
  return <div>{userData.name}</div>;
}

// 每次请求时都会执行
export async function getServerSideProps(context) {
// 访问请求时信息
const { req, res, query } = context;
const session = await getSession(req);

// 获取用户特定数据
const userData = await fetchUserData(session.userId);

return {
props: {
userData,
},
};
}

// React CSR示例

import { useState, useEffect } from "react";
import { addUtmToExternalLink, getExternalLinkRel } from "@/lib/utils";

function App() {
const [data, setData] = useState(null);

useEffect(() => {
// 客户端获取数据
fetch('/api/data')
.then(res => res.json())
.then(data => setData(data));
}, []);

if (!data) return <div>Loading...</div>;

return <div>{data.content}</div>;
}

// Next.js SSR示例（Pages Router）

export async function getServerSideProps(context) {
  // 每次请求时执行
  const data = await fetch("https://api.example.com/data");
  const json = await data.json();

return {
props: {
data: json,
},
};
}

export default function Page({ data }) {
  return <div>{data.content}</div>;
}

// Next.js SSG示例

export async function getStaticProps() {
  // 构建时执行
  const data = await fetch("https://api.example.com/data");
  const json = await data.json();

return {
props: {
data: json,
},
};
}

export default function Page({ data }) {
  return <div>{data.content}</div>;
}

// Next.js ISR示例

export async function getStaticProps() {
  const data = await fetch("https://api.example.com/data");
  const json = await data.json();

return {
props: {
data: json,
},
// 每60秒重新验证一次
revalidate: 60,
};
}

// 或者使用On-Demand Revalidation
// 通过API路由手动触发重新生成
// pages/api/revalidate.js
export default async function handler(req, res) {
await res.revalidate('/path-to-revalidate');
return res.json({ revalidated: true });
}