Next.js 渲染方式大揭秘：洞悉 SSG、SSR、ISR、CSR 的奥秘

前端

2023-05-25 02:26:47

Next.js 渲染方式揭秘：在速度与灵活性之间做出最佳选择

概述

Next.js 是一款流行的 React 框架，以其强大的功能和对各种渲染方式的支持而闻名。理解这些渲染方式至关重要，以便为你的应用程序做出最佳选择。

静态生成 (SSG)

速度： SSG 是最快的渲染方式。它预先生成 HTML 文件，并在请求时直接发送给客户端。
优势： 极快的加载速度，适合静态内容（如博客文章）。
缺点： 无法渲染动态内容，如用户输入或数据库查询结果。

服务器端渲染 (SSR)

速度： 比 SSG 慢，但可以渲染动态内容。
优势： 可以在服务器上渲染页面，提供更丰富的交互体验。
缺点： 加载时间略长，可能需要更多服务器资源。

增量静态生成 (ISR)

速度： ISR 是 SSG 和 SSR 的折衷。它预生成静态页面，并在每次请求时检查更新。
优势： 提供快速加载，同时可以渲染动态内容。
缺点： 可能比 SSG 更复杂。

客户端渲染 (CSR)

速度： CSR是最慢的渲染方式。它在客户端渲染页面，需要重新生成整个页面。
优势： 可以渲染任何内容，包括交互式组件。
缺点： 加载速度较慢，可能导致页面闪烁。

选择最佳渲染方式

选择合适的渲染方式取决于你的应用程序需求。

静态内容： 使用 SSG 以获得最快的加载速度。
动态内容： 使用 SSR 或 ISR，以渲染动态元素并保持快速的响应时间。
交互式内容： 使用 CSR 以实现无缝的交互体验。

代码示例

// SSG
export async function getStaticProps() {
  const data = await fetch('https://example.com/api/data');
  return {
    props: {
      data,
    },
  };
}

// SSR
export async function getServerSideProps() {
  const data = await fetch('https://example.com/api/data');
  return {
    props: {
      data,
    },
  };
}

// ISR
export async function getStaticProps() {
  const data = await fetch('https://example.com/api/data');
  return {
    props: {
      data,
    },
    revalidate: 60, // 重新生成页面，每 60 秒检查一次更新
  };
}

// CSR
export default function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const data = await fetch('https://example.com/api/data');
      setData(data);
    }

    fetchData();
  }, []);

  return (
    <div>
      {data ? JSON.stringify(data) : 'Loading...'}
    </div>
  );
}