概览
数据抓取允许我们使用不同的方式渲染页面内容- 依赖于应用的使用情况,这里包括了使用服务端渲染/静态生成进行预渲染,以及在运行时使用增量静态重新生成更新或者创建内容 …
- SSR
Server-side rendering
- SSG
Static-site generation
- CSR
Client-site rendering
- ISR
- Dynamic routing
getServerSideProps
服务端渲染需要的一个函数,每一个请求都会调用这个函数进行页面的预渲染 ..
注意不考虑渲染leixing,任何props
都能够传入到页面组件中并且能够在客户端中的初始化HTML中能够查看 …
这允许页面进行正确的水和,确保你没有传递任何敏感信息(它不应该出现在客户端)到props
中 …
什么时候运行此函数
这个函数运行在运行时,绝不可能运行在浏览器端 …
- 直接请求这个页面,
getServerSideProps
会在请求时进行运行,并且这个页面将会使用返回的props 进行预渲染 … - 当我们在客户端页面通过
next/link
或者next/router
进行客户端页面过渡时,Next.js 会发送一个API 请求到服务器(这个过渡的页面是服务端渲染,否则不会执行这个函数),这将会运行getServerSideProps
getServerSideProps
会返回一个json用于渲染这个页面,所有的这些工作都是自动通过Next.js进行处理,因此你不需要做任何额外的事情,你仅仅需要定义这个方法 ..
你能够使用 next-code-elimination tool 去验证Next.js 从客户端打包中消除了什么 …
getServerSideProps
仅仅能够从一个页面
中暴露,非页面文件中暴露不会工作 …
那么什么是页面? 查看 页面简介了解更多 ….
注意你必须暴露getServerSideProps
作为一个单独的函数 - 它将不会工作(如果你增加getServerSideProps
作为页面组件的函数) …
关于这个API 的详情参考查看 API 文档 …
什么时候使用这个函数
你应该仅仅在每次请求时都需要抓取数据来预渲染页面时使用,这是因为请求的数据或者属性是独立的(例如headers authorization
) .. 通过使用 getServerSideProps
的页面能够进行服务端渲染(在请求时)并且仅仅能够在缓存控制请求头被配置之后才能够被缓存 ….
vs API Routes
它也能够抓取服务器上的API路由 ..,然而从getServerSideProps
中去抓取一个API 路由,这是不必要的且不成熟的方式,因为它将导致额外的请求发送(由于getServerSideProps
以及 API 路由运行在服务器上) …
假设,API 路由被用来从一个CMS中抓取某些数据,那么这个API 路由直接从getServerSideProps
中调用. 这会产生额外的调用,减少性能,相反直接调用在API 路由中放置的逻辑到getServerSideProps
中,这也能够调用一个CMS,数据库,或者其他API …
fetching data on the client side
如果页面包含了频繁刷新数据的操作,你不需要预渲染数据,你能够在客户端进行数据抓取,例如用户特定的数据:
- 首先,立即展示没有数据的页面,页面的一部分仍然能够使用静态生成预渲染,对于缺少数据的时候你能够展示状态
- 然后从客户端加载数据并在ready的时候,显示它们 ..
这种方式对于用户仪表盘页面工作的非常良好,因为仪表盘是私有的,用户特定的页面,SEO 是不相关的并且页面不需要预渲染 … 数据是频繁更新的,它需要请求时数据抓取 …
也就是说,静态生成默认都会使用 ..
在请求时使用getServerSideProps抓取数据 …
前面是在请求时客户端进行数据抓取, 但是现在使用 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
SSR with Caching
通过在getServerSideProps
中使用缓存头(Cache-Control
)用来缓存动态响应,
例如使用stale-while-revalidate
- 链接 ..
// This value is considered fresh for ten seconds (s-maxage=10).
// If a request is repeated within the next 10 seconds, the previously
// cached value will still be fresh. If the request is repeated before 59 seconds,
// the cached value will be stale but still render (stale-while-revalidate=59).
//
// In the background, a revalidation request will be made to populate the cache
// with a fresh value. If you refresh the page, you will see the new value.
export async function getServerSideProps({ req, res }) {
res.setHeader(
'Cache-Control',
'public, s-maxage=10, stale-while-revalidate=59'
)
return {
props: {},
}
}
它的意思是在 接下来的10秒内,数据是新鲜的,但是 在59秒之前,数据将变得陈旧,但是仍然会渲染,在背后有一个重新校验请求将会发起获取一个新鲜的值用来填充/收集一个缓存,如果刷新这个页面,将会看到一个新值 …
查看缓存了解更多 …
使用getServerSideProps 渲染一个错误页面
假设如果在getServerSideProps中抛出了一个错误,它将展示pages/500.js
页面,检查 500 page
的文档了解如何创建并使用它,在开发阶段这个文件将不会被使用并且会存在一个覆盖层展示并替代它 ..