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 方法：

复制 1export default function HomePage(props) { ... }
 2
 3// 导出异步获取数据方法
 4export async function getStaticProps() {
 5  // 获取数据，例如从数据库、API、文件等
 6  const data = ...
 7
 8  // 返回的参数将会按照 key 值赋值到 HomePage 组件的同名入参中
 9  return {
10    props: ...
11  }
12}
13复制代码

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

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

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

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

复制 1export default function HomePage(props) { ... }
 2
 3// 导出异步获取数据方法
 4export async function getServerSideProps() {
 5  // 获取数据，例如从数据库、API、文件等
 6  const data = ...
 7
 8  // 返回的参数将会按照 key 值赋值到 HomePage 组件的同名入参中
 9  return {
10    props: ...
11  }
12}
13复制代码

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

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

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

一个简单的示例如下：

复制 1import useSWR from 'swr'
 2
 3function Profile() {
 4  const { data, error } = useSWR('/api/user', fetch)
 5
 6  if (error) return <div>failed to load</div>
 7  if (!data) return <div>loading...</div>
 8  return <div>hello {data.name}!</div>
 9}
10复制代码

和一些封装的请求 Hooks 类似，useSWR 还支持自定义请求库，默认使用的是 fetch 的 pollyfill 模块（unfetch），提供的中文官方的文档也非常清晰，地址：swr.vercel.app/zh-CN/docs/…