解释 JavaScript SSR (Server-Side Rendering) 和 SSG (Static Site Generation) 的优缺点，以及它们在不同应用场景下的选择依据。

各位观众老爷，大家好！我是你们的老朋友，今天咱们聊聊前端界两员大将：SSR (Server-Side Rendering) 和 SSG (Static Site Generation)。这俩兄弟啊，都能解决首屏加载慢的问题，但性格脾气截然不同，应用场景也各有千秋。今天咱们就来扒一扒它们的底裤，看看谁更适合你的项目。

开场白：为什么要关心SSR和SSG？

在JavaScript的世界里，SPA（Single Page Application）大行其道。但SPA有个先天缺陷：首次加载慢，SEO不友好。为啥呢？因为浏览器拿到的是一个空壳HTML，然后JavaScript再一股脑地把内容渲染出来。蜘蛛爬虫看到的是一片空白，用户看到的则是漫长的等待。

SSR和SSG就像两剂猛药，专门治疗SPA的这些毛病。它们的核心思想都是：提前渲染。只不过渲染的时机和方式不一样。

第一回合：SSR (Server-Side Rendering) – 动态渲染的王者

SSR，顾名思义，就是在服务器端把页面渲染好，然后直接返回给浏览器。浏览器拿到的是完整的HTML，可以直接展示，不需要再执行JavaScript。

SSR的工作流程：

浏览器发起请求。
服务器接收请求。
服务器执行JavaScript代码，生成HTML。
服务器将HTML返回给浏览器。
浏览器渲染HTML，展示页面。
浏览器下载并执行JavaScript，激活交互。

SSR的优点：

首屏加载快： 这是SSR最大的优势。浏览器直接拿到完整的HTML，无需等待JavaScript执行，用户体验大大提升。
SEO友好： 搜索引擎爬虫可以直接抓取到HTML内容，更容易被收录。
更好的用户体验： 尤其是在移动网络环境下，SSR可以显著提升页面加载速度。

SSR的缺点：

服务器压力大： 每次请求都要在服务器端渲染页面，对服务器资源消耗较大。
开发复杂度高： 需要同时维护前端和后端代码，调试难度增加。
配置复杂： 需要配置服务器环境，例如Node.js。
TTFB (Time To First Byte) 可能会比较长： 因为服务器需要执行JavaScript代码来生成HTML。

SSR的代码示例 (使用Next.js)：

Next.js 是一个流行的 React SSR 框架，可以简化 SSR 的开发。

// pages/index.js
import React from 'react';

function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to my awesome website!</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps(context) {
  // 在服务器端获取数据
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default HomePage;

代码解释：

getServerSideProps 是 Next.js 提供的一个特殊的函数，它会在服务器端执行。
在这个函数里，我们使用 fetch 获取数据。
获取到的数据通过 props 传递给 HomePage 组件。
HomePage 组件渲染数据，生成HTML。

注意事项：

getServerSideProps 只能在 pages 目录下的文件中使用。
在 getServerSideProps 中，可以访问 context 对象，它包含了请求的信息，例如 query 参数、 headers 等。

第二回合：SSG (Static Site Generation) – 静态页面的守护者

SSG，就是在构建时把页面渲染好，生成静态HTML文件，然后部署到CDN上。浏览器请求时，直接从CDN获取静态HTML文件。

SSG的工作流程：

开发者运行构建命令。
构建工具执行JavaScript代码，生成HTML文件。
HTML文件部署到CDN。
浏览器发起请求。
CDN返回静态HTML文件。
浏览器渲染HTML，展示页面。
浏览器下载并执行JavaScript，激活交互。

SSG的优点：

性能极佳： 因为是静态HTML文件，所以加载速度非常快。
安全： 静态文件不容易受到攻击。
成本低： 不需要服务器资源，可以部署到CDN上，成本较低。
SEO友好： 搜索引擎爬虫可以直接抓取到HTML内容，更容易被收录。

SSG的缺点：

不适合动态内容： 如果内容经常变化，每次更新都要重新构建，效率较低。
构建时间长： 页面数量越多，构建时间越长。
不适合需要用户认证的页面： 因为所有用户看到的都是相同的静态HTML文件。

SSG的代码示例 (使用Gatsby)：

Gatsby 是一个流行的 React SSG 框架，可以简化 SSG 的开发。

// src/pages/index.js
import React from 'react';
import { graphql } from 'gatsby';

function HomePage({ data }) {
  return (
    <div>
      <h1>Welcome to my awesome website!</h1>
      <ul>
        {data.allUsersJson.nodes.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export const query = graphql`
  query {
    allUsersJson {
      nodes {
        id
        name
      }
    }
  }
`;

export default HomePage;

代码解释：

graphql 是 Gatsby 提供的一个 API，用于查询数据。
在这个例子中，我们查询 allUsersJson 中的所有用户数据。
查询到的数据通过 data 传递给 HomePage 组件。
HomePage 组件渲染数据，生成HTML。

注意事项：

Gatsby 使用 GraphQL 来查询数据。
数据源可以是本地文件、API、数据库等。

第三回合：SSR vs SSG – 巅峰对决

特性	SSR	SSG
渲染时机	请求时动态渲染	构建时静态渲染
性能	相对较好，取决于服务器性能	极佳
SEO	优秀	优秀
动态内容	适合	不适合
服务器压力	大	无
开发复杂度	高	相对较低
成本	高，需要服务器资源	低，可以部署到CDN
首次加载速度	快，但TTFB可能会比较长	非常快
适用场景	动态内容、需要用户认证的页面	博客、文档、营销页面等静态内容为主的网站
数据获取方式	请求时获取数据	构建时获取数据

选择依据：根据应用场景来决定

如果你的网站内容经常变化，需要用户认证，或者需要实时更新数据，那么SSR更适合你。 例如：电商网站、社交网站、新闻网站。
如果你的网站内容相对静态，例如博客、文档、营销页面等，那么SSG更适合你。 例如：个人博客、企业官网、产品文档。

更进一步：ISR (Incremental Static Regeneration) – 鱼和熊掌兼得

为了解决SSG不适合动态内容的缺点，Next.js 引入了 ISR (Incremental Static Regeneration) 技术。

ISR 允许你定期重新生成静态页面，而无需重新构建整个网站。

ISR的工作流程：

首次请求时，如果页面不存在，则生成静态页面。
后续请求时，如果页面已经存在，则直接返回静态页面。
在后台，Next.js 会定期检查页面是否需要重新生成。
如果需要重新生成，则生成新的静态页面。
下次请求时，返回新的静态页面。

ISR的代码示例 (使用Next.js)：

// pages/posts/[id].js
import React from 'react';

function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

export async function getStaticPaths() {
  // 获取所有文章的id
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return {
    paths,
    fallback: false, // 如果请求的id不在paths中，则返回404
  };
}

export async function getStaticProps({ params }) {
  // 根据id获取文章数据
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 10, // 每隔10秒重新生成一次静态页面
  };
}

export default Post;

代码解释：

getStaticPaths 用于指定需要预先生成的页面路径。
getStaticProps 用于获取页面数据。
revalidate 属性用于指定重新生成静态页面的时间间隔。

注意事项：

getStaticPaths 和 getStaticProps 只能在 pages 目录下的文件中使用。
fallback: false 表示如果请求的id不在 paths 中，则返回 404 错误。
revalidate 属性的单位是秒。

总结：选择合适的渲染方式

选择SSR、SSG还是ISR，取决于你的具体需求。

SSR： 适合动态内容、需要用户认证的网站。
SSG： 适合静态内容为主的网站，例如博客、文档、营销页面。
ISR： 适合既有静态内容，又有少量动态内容的网站，例如新闻网站、电商网站的产品页面。

最后的忠告：

不要盲目追求最新的技术，选择最适合你项目的技术才是王道。在选择渲染方式之前，一定要仔细评估你的需求，并考虑各种因素，例如性能、SEO、开发复杂度、成本等。

希望今天的讲座对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复