Next.js学习记录之预渲染和数据获取

Next.js学习记录之预渲染和数据获取

• 预渲染
  next有两种预渲染的方式：静态生成和服务端渲染，他们之间的区别就是什么时候生成html页面。

  • 静态生成，是在build应用的时候生成html, 然后每次请求的时候重用静态生成的页面。
  • 服务端渲染，就是每次请求的时候都去生成html页面

  在开发模式下（即npm run dev），每次请求的时候都会重新渲染页面，不管页面是不是静态生成的。

  什么时候使用？
  在用户请求之前是否可以预渲染页面，如果可以，就可以渲染静态生成

• 静态渲染时如何配合数据

  • 使用 getStaticProps

  export default function Home(props){
       ...}
  
  export async function getStaticProps(){
       
      // get exteral data from the file system, API, DS, etc
      const data = ...