Next.js - SSR / SSG / CSR / ISR

Next.js 提供了多种网页渲染方式，这取决于你的服务应用的场景，包括服务端渲染、客户端渲染、静态生成、增量静态生成等。

SSR (Server-side Rendering)

在 Next.js 中使用 getServerSideProps 来实现服务端渲染，该动作在用户发起页面请求时执行，示例代码如下：

function Page({ data }) {
  // Render data...
}

// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

export default Page

两种模式：

• 用户直接请求：服务端请求数据 -> 服务端渲染页面 -> 用户
• 用户通过 next/link 或 next/router 跳转：客户端请求数据 -> 服务端执行 getServerSideProps 并返回数据 -> 客户端渲染

SSG (Static-side Generation)

在 Next.js 中使用 getStaticProps 来实现静态页面生成，该动作在 next build 时执行，示例代码如下：

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries.
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

CSR (Client-side Rendering)

客户端渲染，一般的做法是在 useEffect 中请求服务端数据再渲染组件，该动作在页面基本静态文件加载完毕后执行，示例代码如下：

function Profile() {
  const [data, setData] = useState(null)
  const [isLoading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    fetch('/api/profile-data')
      .then((res) => res.json())
      .then((data) => {
        setData(data)
        setLoading(false)
      })
  }, [])

  if (isLoading) return <p>Loading...</p>
  if (!data) return <p>No profile data</p>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

Next.js 背后的技术团队开发了名为 SWR 的 React Hook 包，如果使用客户端渲染的话，强烈推荐使用 SWR，它可以处理缓存、重新验证、焦点跟踪、间隔重新获取等。示例代码如下：

import useSWR from 'swr'

const fetcher = (...args) => fetch(...args).then((res) => res.json())

function Profile() {
  const { data, error } = useSWR('/api/profile-data', fetcher)

  if (error) return <div>Failed to load</div>
  if (!data) return <div>Loading...</div>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.bio}</p>
    </div>
  )
}

想了解更多，可以查看 SWR 文档 。

ISR (Incremental Static Regeneration)

在 Next.js 中使用增量静态生成，只需在 getStaticProps 中添加属性 revalidate，该动作在用户发起页面请求时执行，示例代码如下：

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation is enabled and a new request comes in
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// the path has not been generated.
export async function getStaticPaths() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))

  // We'll pre-render only these paths at build time.
  // { fallback: blocking } will server-render pages
  // on-demand if the path doesn't exist.
  return { paths, fallback: 'blocking' }
}

export default Blog

如上示例，用户发起请求后，服务端会渲染并缓存该页面，再将预渲染的页面返回给用户。在缓存期间内，用户的请求会直接返回缓存；缓存时间结束后，用户再次请求，会重新渲染并生成新的缓存。

使用 ISR，就可以在运行时实现静态页面生成，而无需重新构建整个网站。

Dynamic Routing

在 Next.js 中配合使用 getStaticPaths + getStaticProps 即可实现动态路由的预渲染，该动作在 next build 时执行，示例代码：

/**
 * CodePath: ./pages/user/[uid].tsx
 */
import { GetStaticPropsContext } from "next/types"

const Page = ({ name }) => {

  return (
    <div> {name} </div>
  )

}

export async function getStaticPaths() {
  const users = ['Anoyi', 'Jack', 'Marry']
  return {
    paths: users.map(user => ({ params: { user } })),
    fallback: true
  };
}

export async function getStaticProps(context: GetStaticPropsContext) {

  const { user } = context.params

  return {
    props: {
      user
    },
  }

}

export default Page

如上示例，项目构建完毕后，会生成三个静态文件 /user/Anoyi & /user/Jack & /user/Marry，其它路由会执行动态路由的逻辑。