之前讲过 next.js
中的 getServerSideProps
,今天来讲一讲另一个很类似的 API
:getStaticProps
,以及和 getStaticProps
紧密相关的 getStaticPaths
。
getStaticProps
主要用于构建时落地一些静态数据,但不同于 getServerSideProps
,getStaticProps
默认情况下只会在构建时执行一次,之后的每次请求都会使用构建时的数据。在 ISR
、SSG
等场景下还有不同的表现。
而 getStaticPaths
则用于配合 getServerSideProps
实现动态路由的构建,next.js
会在构建时根据 getStaticPaths
的返回值来生成对应的静态页面。
使用
先看下 getStaticProps
如何使用,其实和 getServerSideProps
用法差不多:
export default function GetStaticProps({ content }: { content: string }) {return (<div><header>getStaticProps</header><main>{content}</main></div>);
}
export const getStaticProps = async () => {const content = 'Hello World';console.log('call getStaticProps');return {props: {content}};
};
只需要在 page
中导出 getStaticProps
函数,然后在函数中返回 props
即可。在 page
渲染组件中就可以直接通过 props
即可获得数据。
调用时机
再来看下 getStaticProps
的调用时机,这里和 getServerSideProps
存在很大差异:
- 当执行
next build
时 - 当
getStaticPaths
返回