Data Fetching > getStaticProps [공식 문서로 공부하는 Next.js] getStaticProps Basic Features > Data Fetching > getStaticProps 페이지에서 getStaticProps(정적 사이트 생성)라는 함수를 내보내는 경우 Next.js는 getStaticProps에서 반환된 props를 사용하여 빌드 시 이 페이지를 미리 렌더링합니다. export async function getStaticProps(context) { return { props: {}, // will be passed to the page component as props } } 언제 getStaticProps를 사용하나요? 1. 페이지를 렌더링하는 데 필요한 데이터는 사용자의 요청에 앞서 빌드 시 사용할 때 2. 데이터를 헤드리스 CMS에서 가져올 때 3. 데.. 2022. 1. 25. Data Fetching > getStaticPaths [공식 문서로 공부하는 Next.js] getStaticPaths Basic Features > Data Fetching > getStaticPaths 언제 getStaticPaths를 사용하나요? 페이지에 동적 경로를 사용하고 정적으로 pre-rendering하는 경우 동적 경로를 사용하는 페이지에서 getStaticPaths라는 비동기 함수를 내보내는 경우 모든 경로를 정적으로 사전 렌더링합니다. export async function getStaticPaths() { return { paths: [ { params: { ... } } // See the "paths" section below ], fallback: true, false, or 'blocking' // See the "fallback" section below }; } p.. 2022. 1. 11. Basic Features > Data Fetching 2 [공식 문서로 공부하는 Next.js] Data Fetching > getStaticProps 언제 getStaticProps를 사용하나요? 페이지를 렌더링하는 데 필요한 데이터는 사용자의 요청에 앞서 미리 빌드해야하는 경우 headless CMS에서 데이터를 가져오는 경우 공개적으로 데이터가 캐시되어야 하는 경우(사용자별 아님). 페이지는 pre-rendering 되어야하고 매우 빨라야 하는 경우(getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성합니다.) Incremental Static Regeneration(ISR) ISR은 개발자와 콘텐츠 편집자가 전체 사이트를 다시 빌드할 필요 없이 페이지별로 변경하고 생성할 수 있습니다. 즉 변경된 데이터만 빌드하게 해주는 Next.js 기능입니다.. 2022. 1. 7. Basic Features > Data Fetching 1 [공식 문서로 공부하는 Next.js] Data Fetching Next.js는 pre-rendering 을 위해 데이터를 가져오는 방법으로 3가지 비동기 함수를 제공하고 있습니다. getStaticProps(정적 생성): 빌드 시 데이터를 가져옵니다. getStaticPaths(정적 생성): 데이터를 기반으로 페이지를 미리 렌더링하기 위한 동적 경로를 지정합니다. getServerSideProps(서버 측 렌더링): 각 요청에서 데이터를 가져옵니다. getStaticProps(정적 생성) 페이지에서 getStaticProps라는 비동기 함수를 export 하는 경우 이 함수에서 반환되는 props를 사용하여 빌드 시 이 페이지를 pre-rendering 합니다. !!) 이 함수 안에서는 내부 api호출을 위해 fetch를 사용하면 안됩니다... 2022. 1. 7. 이전 1 2 3 4 5 6 7 8 다음
