getInitialProps란?

웹 페이지는 페이지 별로 사전에 불러와야 할 데이터가 존재한다. Data Fectching이라고 하는 로직은 CSR에서 React 로직에 따라 componentDidMount or useEffet로 컴포넌트가 마운트 되고 나서 하는 경우가 많다. 이 과정을 서버에서 미리 처리하도록 도와주는 것이 getInitialProps


next 9.3 버전에서는 getInitialProps를 세분화 하여 getStaticProps, getStaticPaths, getServerSideProps를 사용하게 됨

페이지 진입 전에 호출되며 내부 로직은 서버에서 실행된다. (클라이언트에서만 가능한 로직은 X, ex: Window, Document 등)

Document.js에 있는 getInitialProps는 클라이언트 라우팅이나 스태틱 페이지에서는 동작하지 않는다. 오로지 서버사이드렌더링 될 때 필요한 데이터를 비동기로 가져오기 위해서 존재한다.


기본적으로 받는 props인 context(ctx).

  • pathname : 현재 pathname. /user?type=normal page 접속 시에는 /user

  • query : 현재 query를 object 형태로 출력 /user?type=normal page 접속 시에는 {type: ‘normal’}

  • asPath : 전체 path /user?type=normal page 접속 시에는 /user?type=normal

  • req : HTTP request object (server only)

  • res : HTTP response object (server only)

  • err : Error object



getStaticProps

빌드 타임 때 정적인 페이지를 생성한다. pages에서만 사용할 수 있으며, buil 할 때 리턴한 Props를 기반으로 페이지를 미리 렌더링 해놓는다. (매우 빠르게 페이지를 띄워줌)

빌드 타임에서만 실행된다.


언제 사용해야 할까?

  • 데이터가 빌드 타임에 페이지에 사용되어야 할 때 (user 요청 x)
  • SEO 등의 이슈로 인해 빠르게 미리 렌더링 해야 하는 페이지. (HTML과 JSON 파일을 모두 생성해 두기 때문에)
  • 유저에 구애받지 않고 퍼블릭하게 캐시할 수 있는 데이터


function Blog({ posts }) {
    return (
        {posts.map((post) => (
            <li>{post.title}</li>
        ))}
    )
} //buil time에 채워짐


//서버 사이드 빌드 타임에 실행
export async function getStaticProps(context) {
    const res = await fetch('...../posts');

    const posts = await res.json();

// {props: {...}} 형태로 반환해야 하며 posts로 받을 수 있다.
    return {
        props: {
            posts,
        },
    }
}

export default Blog

context 매개 변수는 다음의 키를 포함한다.

  • params : 동적 경로를 사용하는 페이지에 대한 경로 정보를 담는다.

  • preview : 페이지 미리보기 모드가 있다면 true.

  • previewData : setPreviewData에 의해 설정된 미리보기 데이터

getStaticProps는 빌드 타임에 한번만 실행된다. 또한 정적 HTML을 만들어 내기 때문에 쿼리 매개 변수나 HTTP 헤더 등 요청 시간에만 사용할 수 있는 데이터는 받지 않는다.


getStaticPaths

다이나믹 라우트에서만 쓰이는 메소드.

다이나미 라우팅이란? 파일명을 [id]와 같이 대괄호로 묶어서 생성하면 다이나믹 라우팅 기능을 이용할 수 있다. (router 객체나 context 객체의 query 파라미터로 조회할 수 있음.)

페이지의 url에서 외부 데이터를 사용할 경우 getStaticPaths를 export 해줘야 한다. (동적 라우팅 시에 많이 사용)


export async function getStaticPaths(){
     {
    return {
        paths: [
            { params: {...}}
        ],
        fallback: true or false
    };
}
}

pahts getStaticPaths의 필수 값이며 paths에서 반환되는 params 값으로 동적 라우팅 경로의 이름이 된다.

export const getStaticPaths = async () => {
    return {
        paths: [
            { params: { id: "1" }},
            { params: { id: "2" }}
        ]
    }
} //url이 post/1과 post/2로 생성된다
//또한 params는 페이지 이름과같아야 한다


fallBack

필수 값으로 Boolean 타입. fallBack이 false라면 getStaticPaths에서 반환되지 않는 모든 경로는 404 페이지가 된다.


getServerSideProps

SSR시 활용하는 메소드. 런타임 환경에서 페이지에 접근 시 서버 측에서 실행된다.

pre-render or sever-side Rendering 빌드와 상관없이 매 요청마다 데이터를 가져온다.

function Page ({ data }){
    console.log(this.props.data) //res.json() 출력
}

export async function getServerSideProps() {
    const res = await fetch(`https://.../data`)
    const data = await res.json()

    return { props: { data: data }}
}
export default Page



  • getStaticProps: static data를 위해 data fetching
  • getServerSideProps : ssr을 위해 data fetching
  • getStaticProps와 getServerSideProps의 차이는 빌드 이후에 data 변경이 가능한지?



  • Static Generation을 Client-side Rendering과 함께 사용 : 페이지의 일부분을 pre-rendering 하지 않고 그 부분을 CSR에서 JS 코드를 동작 시켜 구성할 수 있다

  • SSR 사용 : 각각의 요청마다 페이지를 pre-render하게 할 수 있다.