前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Next.js - SSR / SSG / CSR / ISR / Dynamic Routing

Next.js - SSR / SSG / CSR / ISR / Dynamic Routing

原创
作者头像
轻量级云原生架构实验室
发布2022-12-01 10:29:43
1.2K0
发布2022-12-01 10:29:43
举报
文章被收录于专栏:轻量级微服务

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

SSR (Server-side Rendering)

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

代码语言:javascript
复制
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 时执行,示例代码如下:

代码语言:javascript
复制
// 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 中请求服务端数据再渲染组件,该动作在页面基本静态文件加载完毕后执行,示例代码如下:

代码语言:javascript
复制
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,它可以处理缓存、重新验证、焦点跟踪、间隔重新获取等。示例代码如下:

代码语言:javascript
复制
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,该动作在用户发起页面请求时执行,示例代码如下:

代码语言:javascript
复制
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 时执行,示例代码:

代码语言:javascript
复制
/**
 * 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,其它路由会执行动态路由的逻辑。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • SSR (Server-side Rendering)
  • SSG (Static-side Generation)
  • CSR (Client-side Rendering)
  • ISR (Incremental Static Regeneration)
  • Dynamic Routing
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档