用 React 编写，你又有多种选择 - Next.SSG

2023-10-21 20:22:32

用 React 编写，你又有多种选择-Next.SSG

引言

在当今快速发展的互联网，网站的加载时间和搜索引擎优化 (SEO) 已然成衡量网站成败的关键指标。使用诸如 React 的客户端渲染库开发的网站在加载时间和 Search 优化方，先天劣于传统服务器渲染网站。 Next.js 的问世，部分解决了这个问题，它允许 React 开发者使用服务器渲染来提改进网站的初始加载时。然而，Next.js 并不止于此，它还了另一种优化网站加载时和 Search 的选择 - 静态站点生成 (SSG)。

何为静态站点生成 (SSG)？

静态站点生成是预先将网站的各个部分渲染成静态的HTML文件，并将其部署到内容分发网 (CDN) 的一项。与服务器渲染 (SSR) 采用按需生响应的方，SSG 采用批量的预先渲染，并仅在源内容变更时才触发重新生成。

Next.js SSG 的优势

更快的加载时： 因为网站的静态内容己经保于 CDN，当访客向您的网站发起请时，无需等待服务器生响应，就能立即提供内容。
搜索引擎优化友好： 静态站点更易被搜索引擎爬，有利于网站的 Search。
全球化： 由于内容保于 CDN，访客可以从网站部署地较近的节点获取内容，进而缩短加载时。
开发体验： Next.js 为 SSG 提了一个友的开发验，允许开发人员在编写组件时，不必考虑数据获取和内容渲染，只需关注 UI 逻辑即可。

Next.js SSG 的局限

不适用于全交互式网站： 因为 SSG 是一种批量的预渲染，不适合具有交互式表格、实时聊天或其源内容变化频繁的网站。
管理复杂： 随着网站的增长，管理 SSG 的生管工作会变得复。
数据安全性： 将敏感数据包含在预渲染的静态文件中会带来安隐患。

何时使用 Next.js SSG？

SSG 非常适于：

博客： 博客内容通常变化不大，SSG 可以明显提博客的加载时和 Search。
组合网站： 组合网站通常是数据驱的，而数据变化并不频繁，SSG 也非常适用。
电子商务网站的产品详情页： 这些页通常变化不大，SSG 可以提升用户的购物验。

如何使用 Next.js SSG？

要在 Next.js 中使用 SSG，请在您的 next.config.js 文件中进行以的：

module.exports = {
  // ...
  // 现有 Next.js 配置项
  // ...

  // 启用 SSG
  // 当 `exportBuildId` 设置为 `true`，生产构件时
  // 将会生成 `.next/export` 文件夹中的静态文件
  exportBuildId: true,

  // ...
  // 其他 Next.js 配置项
  // ...
};

要在您的组件中使 SSG 启，请在您想要生成的组件上添 getInitialProps 函数：

// 使用 getInitialProps 来进行数据获取
import getInitialProps from 'next/getInitialProps';

// 您的组件
import MyComponent from './MyComponent';

export class _App extends React.Component {
  static getInitialProps({ query, pathname }) {
    // 这个方法将在服务端调用，并将在 getInitialProps 的返回值中暴露为 `pageProps`
    const data = await api.fetchData();

    return { pageProps: { data } };
  }

  render() {
    return <MyComponent {...this.props.pageProps} />;
  }
}

export default _App;