Next.js的页面预渲染
Next.js的页面预渲染有两种形式
- 静态生成
在需要页面预渲染的js文件中
export async function getStaticProps(context) {
//通知next.js页面需要预渲染的属性
//xxx操作
return {
props:{},//props属性
revalidate: number, //至少多少秒进入此页面重新静态预渲染,增量静态生成
notfound: boolean, //是否跳转404
redirect:{
destination:{} //重定向哪个页面
}
};
}
export async function getStaticPath() {
//动态路径预渲染,通知next.js哪些路径预渲染
return {
paths:[{pathname:xxx}], //路径
fallback:boolean | 'blocking', //false不在paths数组里的路径进行跳转回404,true表示出了paths是静态渲染,其他都不是,可以正常渲染,blocking同true
};
}
2.服务器端渲染
export async function getServerSideProps(context){
//同getStaticProps
return {}l
}