关于NextJs 动态路由静态文件生成问题

932 阅读1分钟

问题:

这段时间在玩nextjs,生产发布时发现想实现ssr并且动态获取数据并增加静态页面文件;

了解到了next的ISR(Incremental Static Regeneration)方案:增量静态再生成,运行时定期重新生成静态 HTML;

现在基本可以实现静态文件生成,且能定期获取动态数据;

但是有个问题,我在地址栏内输入一个随意的id也会自动生产一个我不需要的静态文件,看图

image.png

如果有人恶意输入,无限在地址栏输入,导致我生产了很多无效静态文件,这不是很危险吗;

解决:

重新回去看了一下官方文档,原来是给了解决方案的,是我菜了,文档都看不明白 !

利用getStaticProps 返回值 notFound属性,加个if校验,数据库若没对应数据的话可以不生成静态文件

export async function getStaticProps(context) {
  const res = await fetch('http://localhost:3030/api/msq/search?id='+context.params.aid)
  const result = await res.json()
  //判断后端数据是否存在,不存在不生产页面
  if (!result.success) {
    return {
      notFound:true,
      revalidate: 10,
    }
  } 
  return {
    props: {
      datas:result.data,
    },
    revalidate: 10,
  }
}