SSR（服务器端渲染）：
在每次向服务器发出请求时运行。
每次用户访问页面时，服务器都会获取数据，呈现 HTML，然后将其发送到客户端。
这确保了内容始终是新鲜的，但由于服务器端处理的开销，它可能会变慢。
SSR 时间线示例：
请求1：用户A访问→服务器获取数据，动态生成页面，并响应。
请求2：用户B访问→服务器再次取数据，动态生成页面，并响应。
export async function getServerSideProps(context) {
const res = await fetch(`https://api.example.com/data`)
const data = await res.json()
return {
props: { data }, // Will be passed to the page component as props
}
}
function Page({ data }) {
return <div>{data. Content}</div>
}
export default Page;
SSG（静态站点生成）：
在构建时运行（当您执行下一个构建时）。
HTML 和数据被预渲染并保存为静态文件。这些文件直接提供给用户，速度超级快。
可选：如果您使用 revalidate，Next.js 将在指定的时间间隔后在后台重建页面，确保更新的内容可用。
具有重新验证功能的 SSG 时间线示例：60：
构建时间：页面使用构建时可用的数据进行预渲染。
请求 1：（构建后）：用户 A 访问 → 提供静态 HTML。
后台重新生成（60 秒后）：Next.js 获取新数据并重新生成页面。
请求 2：（重新生成后）：用户 B 访问 → 提供更新的静态 HTML。
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts')
const posts = await res.json()
return {
props: {
posts
},
// Optional: Regenerate the page at most once every 60 seconds
revalidate: 60
}
}
function BlogPage({ posts }) {
return (
<div>
{posts. Map(post => (
<div key={post.id}>{post.title}</div>
))}
</div>
)
}
SSR： 获取新数据并根据每个请求生成页面。
SSG： 在构建时（或在计划的重新验证间隔期间）预渲染页面一次，并向所有用户提供相同的预构建页面，直到重新生成。
在以下情况下使用 SSR：
您需要实时、最新的内容（例如仪表板、用户特定数据）。
内容频繁变化，无法有效缓存。
在以下情况下使用 SSG：
内容不经常更改（例如博客文章、营销页面）。
速度和性能至关重要。
以上是何时在 Next.js 中使用 SSR 和 SSG的详细内容。更多信息请关注PHP中文网其他相关文章！
