✨ 体验AI Tattoo Generator - ChaTattoo 🚀

SEO教程

静态渲染 vs 动态渲染：网站渲染方式完整指南

深入了解静态渲染和动态渲染的区别，学习CSR、SSR、SSG、ISR等渲染方式的特点和实现方法。掌握如何根据项目需求选择合适的渲染策略，提升网站性能和SEO效果。

Kostja
2024年12月3日
更新于 2024年12月3日
25 分钟阅读

引言

网站渲染方式是现代Web开发中的核心概念，直接影响网站的性能、SEO效果和用户体验。选择合适的渲染方式不仅能够提升网站加载速度，还能改善搜索引擎排名，降低服务器成本。

本文将深入探讨静态渲染（Static Rendering）和动态渲染（Dynamic Rendering）的区别，以及客户端渲染（CSR）、服务器端渲染（SSR）、静态站点生成（SSG）、增量静态再生（ISR）等其他渲染方式的特点和实现方法。

核心概念：渲染方式的选择取决于你的网站是否需要实时数据、个性化内容，以及你对性能和SEO的要求。理解各种渲染方式的特点，能够帮助你做出最佳的技术决策。

静态渲染（Static Rendering）

静态渲染（Static Rendering）是指数据获取（fetching）、渲染（rendering）和重新验证（revalidating）发生在服务器上。当用户访问网站时，提供的是缓存结果（cached result）。这意味着页面在构建时（build time）或重新验证时就已经生成，用户访问时直接返回预渲染的HTML。

静态渲染的核心特点是预渲染：页面内容在用户请求之前就已经生成并缓存，这使得网站能够快速响应请求，同时减少服务器负载。

静态渲染的优势

静态渲染带来多方面的优势，使其成为许多网站的首选方案：

  • SEO优势：预渲染内容更容易被搜索引擎爬虫索引，因为内容在页面加载时已经可被爬取。搜索引擎可以直接读取完整的HTML内容，无需等待JavaScript执行。
  • 加载更快：预渲染内容部署到Vercel等平台时可以被缓存和全球分发（CDN）。这样全球各地的用户都可以更快地访问网站，减少延迟。
  • 服务器压力更小：内容缓存后，服务器不需要为每个用户请求动态生成内容，可以显著降低计算成本和服务器负载。
  • 更好的用户体验：页面加载速度快，首屏内容立即可见，提升用户满意度。
  • 更高的可用性：即使后端服务暂时不可用，缓存的静态页面仍然可以正常访问。

静态渲染的技术实现

在不同的框架中，静态渲染的实现方式有所不同：

Next.js App Router

在Next.js App Router中，默认情况下所有路由都是静态渲染的。你可以通过以下方式控制：

// 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秒重新生成

Next.js Pages Router

在Pages Router中，使用`getStaticProps`和`getStaticPaths`实现静态渲染：

// 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秒重新生成
  };
}

适用场景

静态渲染适合以下场景：

  • 静态博客文章：内容相对固定，不需要频繁更新
  • 营销落地页：展示固定内容，追求快速加载和SEO
  • 文档网站：内容稳定，需要良好的搜索体验
  • 产品展示页面：产品信息相对固定，适合预渲染
  • 没有用户交互的页面：纯展示型页面

动态渲染（Dynamic Rendering）

动态渲染（Dynamic Rendering）是指内容在服务器上为每个用户在请求时（即用户访问页面时）进行渲染。与静态渲染不同，动态渲染的页面内容是在用户请求时才生成的，而不是预先构建的。

动态渲染的核心特点是按需生成：每次用户请求时，服务器都会执行数据获取和渲染过程，生成个性化的HTML内容返回给用户。

动态渲染的优势

动态渲染虽然需要更多的服务器资源，但在某些场景下具有不可替代的优势：

  • 实时数据：动态渲染使应用程序能够显示实时（Real-Time Data）或频繁更新的数据。这适合数据经常变化的应用程序，比如股票交易界面、实时新闻、社交媒体动态等。
  • 用户特定内容：更容易提供个性化内容，例如Dashboard或用户资料，并根据用户交互更新数据。每个用户看到的内容可能完全不同。
  • 请求时间信息：动态渲染允许访问仅在请求时才能知道的信息，例如cookie、URL搜索参数、用户地理位置等。这些信息无法在构建时预知。
  • 数据一致性：每次请求都获取最新数据，确保用户看到的内容是最新的。
  • 灵活的权限控制：可以根据用户权限动态决定显示哪些内容。

动态渲染的技术实现

在不同框架中实现动态渲染的方法：

Next.js App Router

在App Router中，可以通过以下方式启用动态渲染：

// 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()会自动启用动态渲染
}

Next.js Pages Router

在Pages Router中，使用`getServerSideProps`实现动态渲染：

// 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,
    },
  };
}

适用场景

动态渲染适合以下场景：

  • 用户Dashboard：需要显示用户特定的数据和信息
  • 实时数据展示：股票价格、体育比分、实时新闻等
  • 电商购物车：需要根据用户状态动态显示内容
  • 用户个人资料：个性化内容展示
  • 需要权限控制的内容：根据用户权限显示不同内容

性能考虑：动态渲染的缺点是每次请求都需要服务器处理，响应速度可能较慢。如果你的应用是动态的，但某些数据请求较慢，整个页面都会被阻塞。这就是为什么需要合理使用Streaming和Suspense来优化用户体验。

其他渲染方式

除了静态渲染和动态渲染，还有其他几种常见的渲染方式，每种都有其特定的应用场景和特点。

客户端渲染（CSR - Client-Side Rendering）

客户端渲染是指页面内容在用户的浏览器中通过JavaScript动态生成。服务器只返回一个基本的HTML框架和JavaScript文件，实际的页面内容由客户端JavaScript执行后生成。

特点：

  • 首次加载慢：需要下载和执行JavaScript才能看到内容
  • SEO不友好：搜索引擎爬虫可能无法正确索引JavaScript生成的内容
  • 交互体验好：页面切换无需重新加载，用户体验流畅
  • 服务器压力小：服务器只提供静态文件，不进行渲染

实现示例：

// React CSR示例
import { useState, useEffect } from 'react';

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>;
}

适用场景：单页应用（SPA）、需要丰富交互的应用、不需要SEO的内部工具。

服务器端渲染（SSR - Server-Side Rendering）

服务器端渲染是指每次用户请求时，服务器都会执行完整的渲染过程，生成HTML后返回给客户端。这与动态渲染在概念上非常相似，SSR通常被视为动态渲染的一种实现方式。

特点：

  • SEO友好：搜索引擎可以直接索引完整的HTML内容
  • 首屏加载快：用户立即看到内容，无需等待JavaScript执行
  • 服务器压力大：每次请求都需要服务器处理
  • 实时数据：每次请求都获取最新数据

实现示例：

// 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>;
}

适用场景：需要实时数据的页面、个性化内容、需要SEO的动态页面。

静态站点生成（SSG - Static Site Generation）

静态站点生成是指在构建时（build time）预先生成所有页面的HTML文件。这些静态文件可以部署到CDN，实现全球快速分发。SSG是静态渲染的一种实现方式。

特点：

  • 性能最优：预生成的静态文件加载速度最快
  • SEO友好：完整的HTML内容便于搜索引擎索引
  • 成本低：可以部署到免费的静态托管服务
  • 数据更新困难：需要重新构建才能更新内容

实现示例：

// 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>;
}

适用场景：博客、文档网站、营销页面、内容相对固定的网站。

增量静态再生（ISR - Incremental Static Regeneration）

增量静态再生是Next.js引入的一种混合渲染方式，结合了静态渲染的性能优势和动态渲染的数据更新能力。页面在构建时预生成，但可以在后台定期重新生成，无需重新部署整个网站。

特点：

  • 性能优秀：大部分请求返回缓存的静态页面
  • 数据可更新：后台自动重新生成页面，保持内容新鲜
  • SEO友好：预生成的HTML便于搜索引擎索引
  • 灵活性高：可以设置不同的重新验证时间

实现示例：

// 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 });
}

适用场景：内容需要定期更新但不需要实时更新的网站，如新闻网站、产品目录、博客等。

渲染方式对比

以下是各种渲染方式的详细对比，帮助你更好地理解它们的区别和适用场景：

渲染方式渲染时机数据更新性能SEO服务器成本
静态渲染（SSG）构建时需要重新构建⭐⭐⭐⭐⭐ 最快⭐⭐⭐⭐⭐ 最佳⭐⭐⭐⭐⭐ 最低
增量静态再生（ISR）构建时+按需后台自动更新⭐⭐⭐⭐ 很快⭐⭐⭐⭐⭐ 最佳⭐⭐⭐⭐ 低
动态渲染（SSR）请求时实时更新⭐⭐⭐ 中等⭐⭐⭐⭐ 良好⭐⭐ 较高
客户端渲染（CSR）浏览器中实时更新⭐⭐ 较慢⭐⭐ 较差⭐⭐⭐⭐⭐ 最低

性能说明：性能评分基于首次内容绘制（FCP）和最大内容绘制（LCP）等指标。静态渲染通常最快，因为内容已经预生成；动态渲染需要服务器处理，速度取决于服务器响应时间；客户端渲染需要下载和执行JavaScript，首次加载可能较慢。

实际应用场景

不同的渲染方式适合不同的应用场景。以下是一些常见的实际应用案例：

静态渲染场景

  • 博客网站：文章内容相对固定，适合静态渲染。可以使用ISR定期更新最新文章。
  • 文档网站：技术文档、API文档等，内容稳定，需要快速加载和良好的搜索体验。
  • 营销落地页：产品介绍、活动页面等，追求快速加载和SEO效果。
  • 作品集网站：设计师、开发者个人作品展示，内容相对固定。

动态渲染场景

  • 用户Dashboard：需要显示用户特定的数据，如订单、设置、统计信息等。
  • 实时数据展示：股票价格、加密货币价格、体育比分等需要实时更新的内容。
  • 电商购物车：需要根据用户状态动态显示购物车内容、库存信息等。
  • 社交媒体动态：用户时间线、个性化推荐等。

混合渲染场景

许多现代网站采用混合渲染策略，不同页面使用不同的渲染方式：

  • 电商网站：产品列表页使用ISR，产品详情页使用静态渲染，购物车和用户中心使用动态渲染
  • 新闻网站：首页和分类页使用ISR，文章详情页使用静态渲染，评论系统使用客户端渲染
  • SaaS应用：营销页面使用静态渲染，应用内部使用动态渲染或客户端渲染

参考文献

  1. Next.js - Static and Dynamic Rendering - Next.js官方文档关于静态和动态渲染的详细说明
  2. Next.js - Static Site Generation - Next.js静态站点生成（SSG）的完整指南
  3. Strapi - What is Website Rendering - 网站渲染方式的概述和最佳实践
  4. Hashnode - CSR, SSR, SSG Explained - CSR、SSR、SSG等渲染方式的详细对比和解释

常见问题

    静态vs动态渲染：网站渲染方式指南 | Alignify