浏览器访问网站的流程:输入一个网址,浏览器获取一个HTML页面,但这会页面没有数据,使用fetch发请求获取数据并使用useState设置state,state发生变化,这是render函数再一次去渲染页面,因此这个流程中咱们有两个渲染周期。而我们使用next.js则是利用第一个渲染周期进行预渲染,可以减少首页白屏显示时间。那next.js是怎么渲染的呢?
在next.js中文网中我们知道Next.js 有两种预渲染形式:静态生成和服务器端渲染
静态生成:如果一个页面使用了静态生成,在页面构建时将生成对应的HTML文件,意味着在生产环境中,运行‘next build’时将生成该页面对应的HTML文件,接着,对应的HTML文件将在每个页面发请求时被复用,也可以被CDN缓存。
tips:这里的页面构建分为两个阶段:
- 解析HTML并解析文档对象模型(DOM)
- 执行JavaScript脚本
服务端渲染(SSR|动态渲染):如果一个页面使用了服务端渲染,则在每次页面请求时重新去生成HTML文件。
想要在预渲染时获取数据,分为两种情况:
在静态生成预渲染阶段,我们的页面组件需要使用到外部数据【接收参数】,通常使用到Next.js提供的函数:getStaticProps ,而如果咱们的页面使用动态路由,也需要的这个函数:getStaticPaths 。这两个函数都需要从同一文件export并都是async异步函数,都在构建时被调用,并允许咱们在预渲染阶段将获取的数据作为props传递给页面。
在服务端渲染阶段,咱们如果在某个页面需要频繁去更新数据,可以使用getServerSideProps这个函数去获取数据并传递给页面。这个函数也是从同一页面文件export同时也是async异步函数,在每次页面发请求时被调用。
下面咱们来说说这三个函数:
- getStaticProps(静态生成):在构建时获取数据。
- getStaticPaths(静态生成):指定动态路由以根据数据预渲染页面。
- getServerSideProps(服务器端渲染):获取每个请求的数据。
此外,我们将讨论如何在客户端获取数据:
getStaticProps(静态生成):在构建时获取数据
如果从页面export名为 getStaticProps 的异步函数,Next.js 将在构建时使用 getStaticProps 返回的props预渲染此页面。
export async function getStaticProps(context) {
return {
props: {}, // 将作为props传递给页面组件
}
}
接收的形参context为一个对象:
- params 包含使用过动态路由页面的路由参数,如果页面文件名称是[name].js,那么params为{name:xxx,xxx:xxx...},它也可以跟getStaticPaths一起使用,后面再说!
const {name} = context.params
- preview 如果页面处于预览模式,则preview为true否则为undefined。这个属性可以在发请求时呈现页面而不是在构建时呈现,可以绕过静态生成预渲染阶段。
- previewData 包含 setPreviewData 设置的预览数据
- ...
getStaticProps返回一个对象:
- props 带有将页面组件接收的props可选对象
- revalidate 以秒为单位的可选数量,之后可以重新生成页面,默认为false。当revalidate为false时,意味着没有重新验证,因此页面将被缓存为已构建,直到下一次构建
- notFound 是一个布尔值,允许页面返回404状态,默认为true
export async function getStaticProps(context) {
const res = await fetch(`https://.../data`)
const data = await res.json()
if (!data) {
return {
notFound: true,
}
}
return {
props: { data }
}
}
Next.js 允许咱们在构建站点后创建或更新静态页面。增量静态重新生成 (I