玩转Next.js渲染方式：CSR、SSR、SSG、ISR全面剖析

2023-06-03 00:39:30

Next.js 渲染方式指南：优化您的 Web 应用程序性能

简介

Next.js 作为一款基于 React 的前端框架，提供了一系列开箱即用的功能，让开发者可以轻松构建高性能且可扩展的 Web 应用程序。其最突出的特点之一就是支持多种渲染方式，包括：

CSR（客户端渲染）
SSR（服务端渲染）
SSG（静态站点生成）
ISR（增量静态生成）

1. CSR（客户端渲染）

CSR 是 Next.js 的默认渲染模式，其中应用程序在客户端上渲染。当用户访问页面时，Next.js 将应用程序的 JavaScript 代码发送到浏览器，然后由浏览器执行并渲染页面。CSR 的主要优点是它提供更快的初始加载速度，因为浏览器不需要等待服务器端渲染完成即可显示页面。

示例：

import React from 'react';

function Page() {
  return <h1>Hello, World!</h1>;
}

export default Page;

2. SSR（服务端渲染）

SSR 是一种服务器端渲染模式，其中 Next.js 在服务器端渲染页面，然后将渲染好的 HTML 发送到浏览器。SSR 的主要优点是它提供更快的交互时间，因为页面已经预先渲染好了，浏览器不需要等待客户端渲染完成即可显示页面。此外，SSR 还可以提高搜索引擎优化 (SEO) 性能，因为搜索引擎可以抓取预渲染好的 HTML 页面。

示例：

import React from 'react';

export async function getServerSideProps() {
  // 获取服务器端数据
  return { props: { data: 'Server-side data' } };
}

function Page({ data }) {
  return <h1>{data}</h1>;
}

export default Page;

3. SSG（静态站点生成）

SSG 是一种静态站点生成模式，其中 Next.js 在构建时生成静态 HTML 页面，然后将这些页面部署到 CDN 上。SSG 的主要优点是它提供最快的加载速度，因为静态 HTML 页面可以直接从 CDN 上获取，不需要等待服务器端渲染或客户端渲染。此外，SSG 还可以提高 SEO 性能，因为搜索引擎可以直接抓取静态 HTML 页面。

示例：

import React from 'react';

export async function getStaticProps() {
  // 获取静态数据
  return { props: { data: 'Static data' } };
}

function Page({ data }) {
  return <h1>{data}</h1>;
}

export default Page;

4. ISR（增量静态生成）

ISR 是一种增量静态生成模式，其中 Next.js 在构建时生成静态 HTML 页面，并在首次访问页面时将这些页面缓存到 CDN 上。当用户再次访问页面时，Next.js 会检查缓存中是否有该页面的静态 HTML 页面，如果有则直接从 CDN 上获取，如果没有则在服务器端渲染页面并将渲染好的 HTML 页面缓存到 CDN 上。ISR 的主要优点是它可以提供更快的加载速度，同时又可以保持内容的更新。

示例：

import React from 'react';

export async function getStaticProps() {
  // 获取静态数据
  return { props: { data: 'Static data' } };
}

export async function getServerSideProps({ revalidate }) {
  // 获取服务器端数据
  return { props: { data: 'Server-side data' }, revalidate: 10 };
}

function Page({ data }) {
  return <h1>{data}</h1>;
}

export default Page;