首页/文章/react

基于 Next.js 的 SSR和SSG 方案了解一下

2022-11-29

1246 字约 5 分钟

...

Next.js 支持：

在服务端预渲染
静态页面生成和服务端渲染
有数据和无数据的静态生成
一些预定义的方法（生命周期函数）注入数据

6.1 预渲染

默认情况下，Next.js 预渲染每个页面。这意味着 Next.js 会提前为每个页面生成 HTML，预渲染可以带来更好的性能和SEO。

每个生成的 HTML 都与该页面所需的最少 JavaScript 代码相关联。当浏览器加载页面时，其 JavaScript 代码会运行并使页面完全交互。

预渲染和无预渲染的对比如下：

6.2 静态生成和服务端渲染

Next.js 支持两种形式的预渲染方式：静态生成和服务端渲染

静态生成： 在构建时生成 HTML 的预渲染方法。然后在每个请求上重用预渲染的 HTML。
服务器端渲染： 在每个请求上生成 HTML 的预渲染方法。

6.3 获取数据

（1）静态生成时获取数据

在服务端构建生成静态页面之前，有时候需要获取一些数据，可以借助 getStaticProps 方法。

在页面组件内，同时导出一个 getStaticProps 方法：

export default function HomePage(props) { ... }

// 导出异步获取数据方法
export async function getStaticProps() {
  // 获取数据，例如从数据库、API、文件等
  const data = ...

  // 返回的参数将会按照 key 值赋值到 HomePage 组件的同名入参中
  return {
    props: ...
  }
}
复制代码

注意，仅在页面组件内导出该方法

（2）服务端渲染时获取数据

比如用户的个人中心页面，该页面时不需要 SEO 优化的，其数据通常需要实时更新获取，因此采用 SSR 的方式，而 SSR 在服务端获取数据可以借助 getServerSideProps 方法

和构建时获取数据方法类似：

export default function HomePage(props) { ... }

// 导出异步获取数据方法
export async function getServerSideProps() {
  // 获取数据，例如从数据库、API、文件等
  const data = ...

  // 返回的参数将会按照 key 值赋值到 HomePage 组件的同名入参中
  return {
    props: ...
  }
}
复制代码

（3）客户端渲染时获取数据

如果不需要“预渲染”时候获取数据，即不需要“静态生成”和“服务端渲染”的时候获取数据，则可以在对应页面组件代内，编写网络请求相关代码。

Next.js 团队提供了一个基于 React Hooks 的 useSWR 钩子，推荐使用，该钩子会处理缓存、重新验证、焦点跟踪、间隔重新获取等。

一个简单的示例如下：

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetch)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}
复制代码