API Call

Next.jsは基本的にすべてのページを事前にレンダリングします.事前にレンダリングしてhtmlを生成することで、より良いパフォーマンスとSEOの利点を得ることができます.
Next.jsには2つの形式のプリレンダリングがあります

静的生成:構築時にページをHTMLとして作成し、要求時に提供します.

サーバ側提示:ページを要求すると、サーバ側提示によりHTMLが提供される.

外部データが不要な場合は、次の手順に従います.jsは構築時にページを表示し、必要に応じて提供します.(静的作成)
外部データが必要な場合は、サーバ側レンダリングで外部データを使用してレンダリングし、HTMLを提供します.

getServerSideProps

Next.jsは、サーバから取得したgetServerSidePropsというページデータのデフォルトAPIを有する.
構成サーバがFetchで初期データを送信する
サーバ側はpropsを受信できます.
ページが要求されるたびに、ページは事前に実行され、ページコンポーネントのpropsに渡されます.

export default function Home({user}) { // 미리 실행된 getServerSideProps() 함수의 결과 값을 props로 넘겨받음.
    const username = user && user.name;
    return (
        <div>
            {username}
        </div>
    )
}

// 미리 실행됨 
export const getServerSideProps = async () =>{
    try {
        const res = await fetch('https://api.github.com/users/raccoonback')
        if(res.status === 200) {
            const user = await res.json()
            return { // 결과를 Home 컴포넌트의 props로 넘겨줌 
                props: {user} 
            }
        }
    } catch (e) {
        console.error(e)
        return { // 결과를 Home 컴포넌트의 props로 넘겨줌 
            props: {}
        }
    }
}

getServerSidePropsで返されるprops値は、ページのpropsに渡されます.

getStaticProps

getStaticPropsとは異なり、getServerSidePropsは構築時にデータをロードし、結果をjsonとして保存して使用する.これは、一貫したデータが表示されることを意味します.


プリレンダリングhtmlに日付データが含まれていることを確認できます.
また、next build && next startコマンドで構築・実行を行うことで、リフレッシュ後にデータが更新されないことを確保できます.
バージョン9.5からは、revalidate: 시간(초)のオプションがあれば、所定の時間(秒)ごとに更新するように設定できます.

getStaticPaths

getStaticPathsを用いて経路を予め指定することができる.すなわち、この経路は外部データに依存する.