前端渲染模式：CSR、SSR、SSG 和 ISR

前端

2023-11-07 06:26:09

渲染模式：影响网站性能、用户体验和 SEO 的关键因素

在当今快节奏的数字世界中，网站的加载速度和整体性能至关重要。为了提供无缝的用户体验，选择合适的渲染模式至关重要。本文将深入探讨四种流行的渲染模式：CSR、SSR、SSG 和 ISR，分析它们的优点、缺点和最佳用例。

CSR（客户端渲染）

CSR 将渲染任务完全委托给浏览器。当用户访问网站时，浏览器会向服务器请求 HTML、CSS 和 JavaScript 代码，然后在本地渲染页面。

优点：

开发简单，无需服务器端渲染环境
允许动态更新，适用于频繁更改内容的网站

缺点：

首次加载速度慢，因为浏览器需要下载和解析代码

SSR（服务器端渲染）

SSR 在服务器端将 HTML 渲染成完整的页面，然后将渲染后的 HTML 返回给浏览器。

优点：

提高首次加载速度，减少浏览器渲染时间

缺点：

增加服务器端的负担
对于内容频繁更新的网站可能不实用

SSG（静态网站生成）

SSG 在构建阶段预先生成网站的 HTML 页面。运行时，它直接将预生成的 HTML 返回给浏览器。

优点：

大幅提高加载速度
节省服务器资源

缺点：

内容无法动态更新
需要在更新内容时重新构建网站

ISR（增量静态再生）

ISR 是 SSG 的变体，允许内容动态更新。当用户访问网站时，如果发现某个页面的内容已过期，就会触发服务器端重新渲染该页面。

优点：

结合了 SSG 的性能优势和动态更新的能力
适用于内容更新频率较低但需要即时性的网站

如何选择渲染模式

选择合适的渲染模式取决于网站的具体需求和特征。

内容更新频率： 对于内容频繁更新的网站，CSR 或 ISR 更合适。
性能要求： 对于需要快速加载速度的网站，SSG 或 ISR 更合适。
服务器端负担： 对于服务器资源有限的网站，CSR 或 SSG 更合适。

代码示例

以下是使用这四种渲染模式的代码示例：

CSR：

// CSR with React
import React from "react";
import ReactDOM from "react-dom";

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

ReactDOM.render(<App />, document.getElementById("root"));

SSR：

// SSR with Next.js
import React from "react";

export default function App() {
  return <h1>Hello World!</h1>;
}

SSG：

// SSG with Gatsby
import React from "react";

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`;

const IndexPage = ({ data }) => {
  return <h1>{data.site.siteMetadata.title}</h1>;
};

export default IndexPage;

ISR：

// ISR with Strapi
import React from "react";

export async function getStaticProps(context) {
  const response = await fetch("https://api.strapi.io/api/posts");
  const data = await response.json();
  return { props: { posts: data } };
}

const IndexPage = ({ posts }) => {
  return <h1>{posts[0].title}</h1>;
};

export default IndexPage;