[Next.js] Static Generation and Server-side Rendering


Static Generationは持ってきてもなくてもいいです.살짝 말이 이상한데...外部データをインポートしないとHTMLをレンダリングできないページもあります.このためには、ファイルシステム、外部API、またはデータベースなどのfetchingにアクセスする必要がある.

構築時間によるデータ付き静的生成


Next.jsは、ページコンポーネントをエクスポートする際に、getStaticPropsというgetStaticProps関数をエクスポートすることができる.asyncは、getStaticPropsで実行され、関数内で外部データをbuild 타임に渡し、ページ上でfetchに渡すことができる.
export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}
propsは次です.jsに対して言います:“ああ、このページはデータをロードする必要があります!「このページをレンダリングする前に、データを解決しなければなりません.」そう伝えます.getStaticPropsをよりよく理解するために、次のステップです.js公式ドキュメントのブログ例が実装されます.以下の原理に従う.
getStaticPropsを呼び出す前に、準備コードを省略し、getStaticPropsを呼び出すコードを直接表示します.
pages/index.js
import { getSortedPostsData } from '../lib/posts'

export async function getStaticProps() {
  const allPostsData = getSortedPostsData()
  return {
    props: {
      allPostsData
    }
  }
}

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Keep the existing code here */}

      {/* Add this <section> tag below the existing <section> tag */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  )
}
以上のコードは、ファイルシステムのデータをgetStaticPropsに入力するコードである.しかしながら、fetchのデータは、外部データAPI等においても入手可能である.
export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..')
  return res.json()
}
もちろん、fetchデータベースを直接使用することもできます.
import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}
querygetStaticPropsでのみ動作する.server-sideは動作しません.client-sidegetStaticPropsに含まれていません.つまり、データベースに直接アクセスするJS bundleもブラウザに送信されないので、コードに記述しても問題ありません.

Development vs Production

queriesモードでは、Developmentは各要求に対して動作する.しかしながら、getStaticPropsモードでは、ProductiongetStaticPropsでのみ動作する.すなわち、build timeにしかアクセスできないデータ、例えばrequest timeは使用できない.

Only Allowed in a Page

query parameters나 HTTP headersは、getStaticProps要素においてのみ、pageを達成することができる.exportファイルでは不可能です.

Fetching Data at Request Time

non-pageでデータをrequest timeする必要がある場合は、fetchを考慮する必要があります.
Server-side Renderingのコードの例を次に示します.
export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    }
  }
}
呼び出しgetServerSidePropsrequest timeは、特定のcontextを含む.
いずれにしてもrequest specific parametersよりgetStaticPropsの方が遅いので、必要なときだけ使うのが良いです.( TTFB(Time to first byte) )

Client-side Rendering


データが pre-render a page whose data must be fetched at request timeを必要としない場合、pre-renderが考えられる.