Next.js的页面预渲染

Next.js的页面预渲染有两种形式

  1. 静态生成
    在需要页面预渲染的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
}

posted @ 2022-06-08 21:03  code-G  阅读(83)  评论(0编辑  收藏  举报