본문 바로가기
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.
Basic Features > Pages 2 [공식 문서로 공부하는 Next.js] 기본적인 특징 1 (next.js 9.3 version) : Pages - 2 Static Generation (추천) 페이지를 정적으로 생성하는 경우 HTML은 빌드 시 생성됩니다. 즉, 다음 빌드를 실행할 때 페이지 HTML이 생성된다는 말입니다. 이 경우 HTML은 각 요청에서 재사용되고, CDN에서 캐시 할 수 있습니다. Static Generation (데이터가 없는 경우) 기본적으로 Next.js는 데이터를 가져오지 않고, 정적 생성을 사용하여 페이지를 미리 렌더링 합니다. 이 경우 데이터가 없으므로 Next.js는 빌드 시 페이지당 하나의 HTML 파일을 생성합니다. function About() { return About } export default About Static Generati.. 2022. 1. 6.
Basic Features > Pages 1 [공식 문서로 공부하는 Next.js] 기본적인 특징 1 (next.js 9.3 version) : Pages - 1 Next.js에서 page는 페이지 디렉토리의 .js, .jsx, .ts 또는 .tsx 파일에서 내보낸 React Component 입니다. 각 페이지는 파일 이름을 기반으로 경로와 연결됩니다. 예시) pages/about.js 가 React component 로 export 되었다며, /about로 접근이 가능합니다. Pages with Dynamic Routes Next.js는 동적 경로를 지원합니다. 'pages/posts/[id].js'라고 파일을 만들었다면 'pages/posts/1','pages/posts/2' 등으로 접근할 수 있습니다. Pre-rendering 기본적으로 Next.js는 모든 페이지가 pre-re.. 2022. 1. 6.

티스토리툴바