next v9 이상에서는
getInitialProps 대신 getStaticProps, getStaticPaths, getServerSideProps을 사용하도록 가이드 합니다.getStaticProps
서버사이드 렌더링을 하는 nextJs에서 컴포넌트는 각 페이지마다 사전에 불러와야할 데이터가 있습니다.(이하 data fetching) react, vue같은 Client Side Rendering (CSR)의 경우는
useEffect, created 함수를 이용하여 data fetching을 합니다. 서버사이드에서 실행하는 next에서는 getInitialProps를 이용하여 data fetching 작업을 합니다.Fetch data at build time, pre-render for Static Generation getStaticPaths only runs at build time on server-side.
function Blog({ posts }) { return ( <ul> {posts.map(post => ( <li>{post.title}</li> ))} </ul> ); } export async function getStaticProps() { 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;
getStaticPatch
- 빌드 타임 때, 정적으로 렌더링할 경로 설정
- 이곳에 정의하지 않은 하위 경로는 접근해도 페이지가 안뜸
- 동적라우팅 : 라우팅 되는 경우의 수 따져서 하위로 넣음
/pages/dyna/[dynamic].js: /dyna/동적인값// This function gets called at build time export async function getStaticPaths() { return { //빌드 타임 때 아래 정의한 /dyna/1, /dyna/2, ... /dyna/동적인값 경로만 pre렌더링. paths: [ { params: { dynamic: 1 } }, { params: { dynamic: 2 } } ...... { params: { dynmic: 동적인값 } } ], // 만들어지지 않은 것도 추후 요청이 들어오면 만들어 줄 지 여부. fallback: true, } }
getServerSideProps
Fetch data on each request. pre-render for Server-side Rendering
function Page({ data }) { // Render data... } // This gets called on every request export const getServerSideProps: GetServerSideProps = async context => { // 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;
언제 쓰는가?
getServerSideProps는 데이터 요청시 인출해야 페이지를 미리 렌더링해야하는 경우에만. TTFB (Time to First byte)는 getStaticProps서버가 모든 요청에 대해 결과를 계산해야하고 추가 구성 없이는 결과를 CDN에 의해 캐시 할 수 없기 때문에 더 느립니다.
데이터를 미리 렌더링 할 필요가없는 경우 클라이언트 측에서 데이터를 가져 오는 것을 고려해야합니다.
클라이언트 측에서 데이터 가져오기
페이지에 자주 업데이트되는 데이터가 포함되어 있고 데이터를 미리 렌더링 할 필요가없는 경우 클라이언트 측에서 데이터를 가져올 수 있습니다. 이에 대한 예는 사용자 별 데이터입니다. 작동 방식은 다음과 같습니다.
- 먼저 데이터가 없는 페이지를 즉시 표시합니다. 페이지의 일부는 정적 생성을 사용하여 미리 렌더링 할 수 있습니다. 누락 된 데이터에 대한 로드 상태를 표시 할 수 있습니다.
- 그런 다음 클라이언트 측에서 데이터를 가져와 준비가 되면 표시합니다.
예를 들어 이 접근 방식은 사용자 대시 보드 페이지에 적합합니다. 대시 보드는 비공개 사용자 별 페이지이기 때문에 SEO는 관련이 없으며 페이지를 미리 렌더링 할 필요가 없습니다. 데이터는 자주 업데이트되므로 요청 시간 데이터 가져 오기가 필요합니다.
getInitialProps 이점
- 속도가 빨라집니다. 서버는 data fetching만, 브라우저는 렌더링만 함으로 연산을 브라우저와 서버가 각각 나누어 분담하게되어 그만큼 속도가 빨라집니다.
- 함수형 컴포넌트로 next를 코딩할 경우, 렌더링 하는 함수와 data fetching을 하는 함수가 분리됨으로 개발자의 입장에서 로직 파악이 쉽습니다. (예시 코드를 보면서 자세히 설명하겠습니다.)
