9月22日水曜日


😎 知るところ


Next.jsのページ表示方式


1. Pre-Rendering

  • より良い性能とSEOのために、Nextは原則としてPageのためにHTMLを作成しておく.
  • HTMLがいつ生成されるかによって、次の2つに分けられます.
  • 状態生成:build時生成
  • サーバ側還元:next build毎回作成
  • next推奨Static Generation.ユーザーが要求する前にページをレンダリングする必要がありますか?yesの場合は、Static Generationをお勧めします!
  • 2. Static Generation


    2-1. Without Data


    2-2. With Data

  • request:ページ内容依存外部データ用
  • build時呼び出し
  • このように戻して、getStaticPropsロ素子から支柱を得ることができる
  • function Blog({ posts }) {
      // Render posts...
    }
    
    // This function gets called at build time
    export async function getStaticProps() {
      // Call an external API endpoint to get posts
      const res = await fetch('https://.../posts')
      const posts = await res.json()
    
      // By returning { props: { posts } }, the Blog component
      // will receive `posts` as a prop at build time
      return {
        props: {
          posts,
        },
      }
    }
    
    export default Blog
  • props.posts:ページパスが外部データに依存する場合に使用(動的ルーティング)
  • pages/posts/[id]この場合に使用
  •   // This function gets called at build time
    export async function getStaticPaths() {
      // Call an external API endpoint to get posts
      const res = await fetch('https://.../posts')
      const posts = await res.json()
    
      // Get the paths we want to pre-render based on posts
      const paths = posts.map((post) => ({
        params: { id: post.id },
      }))
    
      // We'll pre-render only these paths at build time.
      // { fallback: false } means other routes should 404.
      return { paths, fallback: false }
    }

    3. SSR

  • getStaticPaths使用
  • 上記の2つの関数と同様であるが、build時に呼び出されるのではなく、ユーザ要求時に呼び出されるたびに呼び出されるという違いがある.
  • function Page({ data }) {
      // Render data...
    }
    
    // This gets called on every request
    export async function getServerSideProps() {
      // Fetch data from external API
      const res = await fetch(`https://.../data`)
      const data = await res.json()
    
      // Pass data to the page via props
      return { props: { data } }
    }
    
    export default Page

    Reference

  • https://nextjs.org/docs/basic-features/pages