破译Next.js渲染秘籍：SSR、CSR、SSG、ISR、DPR大解析

前端

2023-08-10 08:38:18

Next.js渲染技术：打造高性能Web应用的终极指南

什么是Next.js渲染？

Next.js是一款流行的React框架，因其出色的性能优化和灵活的渲染模式而备受推崇。渲染技术是Next.js的核心，它决定了页面在浏览器中显示的方式，影响着网站的加载速度、用户体验和整体性能。

渲染模式

Next.js提供了多种渲染模式，每种模式都有其优点和缺点，适合不同的应用场景。以下是最常见的渲染模式：

1. 服务端渲染（SSR）

SSR将页面渲染工作交由服务器完成，然后将完整的HTML页面发送给浏览器。SSR的优势在于加载速度快，用户体验佳，尤其适用于处理大量数据或复杂交互的页面。

// SSR示例
export async function getServerSideProps() {
  // 获取数据
  const data = await fetch('https://example.com/api/data').then(res => res.json());
  // 返回页面渲染所需的数据
  return {
    props: {
      data,
    },
  };
}

2. 客户端渲染（CSR）

CSR将页面渲染工作交由浏览器完成。浏览器在接收到服务器发送的HTML、CSS和JavaScript代码后，利用自身资源进行渲染。CSR的优点在于服务器负载较低，开发和调试相对简单。

// CSR示例
export default function Page() {
  // 在客户端获取数据
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('https://example.com/api/data').then(res => res.json()).then(setData);
  }, []);
  // 使用数据渲染页面
  return <div>{data}</div>;
}

3. 预渲染（SSG）

SSG在构建时，提前将页面渲染成HTML文件，然后将这些HTML文件发送给浏览器。SSG的优点在于，它兼顾了SSR和CSR的优点，既能提供快速的页面加载速度，又能够减轻服务器负载。

// SSG示例
export async function getStaticProps() {
  // 获取数据
  const data = await fetch('https://example.com/api/data').then(res => res.json());
  // 返回页面渲染所需的数据
  return {
    props: {
      data,
    },
  };
}

4. 增量静态生成（ISR）

ISR是一种动态的预渲染方式。它在构建时，只预渲染部分页面，而其他页面则在首次访问时进行渲染。ISR的优点在于，它可以兼顾SSG的性能优势和CSR的动态性。

// ISR示例
export async function getStaticProps(context) {
  // 如果页面数据是最新，则使用预渲染结果
  if (!context.revalidate) {
    const data = await fetch('https://example.com/api/data').then(res => res.json());
    return {
      props: {
        data,
      },
    };
  }
  // 如果页面数据过时，则返回 null，触发重新渲染
  return {
    props: {},
    revalidate: 60, // 重新渲染间隔为60秒
  };
}

5. 渐进式生成（DPR）

DPR是一种先进的渲染技术，它将页面渲染分为两个阶段：服务器端渲染和客户端渲染。服务器端渲染负责生成页面的静态版本，而客户端渲染则负责处理动态内容。DPR的优点在于，它能够提供极致的用户体验，在处理大量动态内容时，DPR的性能表现也非常出色。

// DPR示例
export async function getServerSideProps(context) {
  // 获取静态内容
  const staticData = await fetch('https://example.com/api/static-data').then(res => res.json());
  // 返回页面渲染所需的数据
  return {
    props: {
      staticData,
    },
  };
}