NextJS - getServerSideProps 사용법

NextJS에서는 CSR, SSR을 개발자가 원하는 형태로 작성할 수 있는데, 기존의 리액트방식으로 구성을 하게되면 CSR이고 getServerSideProps를 통해 데이터를 가지고와서 작성하게되면 SSR형태로 구성할 수 있습니다.

이 방식을 채택하게되면 db나 rest api에서 가져온 데이터 리스트들도 서버에서 데이터를 가져와서 props로 넣어주고 시작하기 때문에 static HTML이 작성된 상태를 볼 수 있습니다.

SEO에 최적화된 페이지를 작성할 수 있게 됩니다.

 

---

getServerSideProps

메소드의 명을 함부로 바꿀 수 없습니다. 주어진 이름 그대로 사용해야 하며 아래의 형태로 기본적으로 사용할 수 있습니다.

export function getServerSideProps(){
    return {
        props: {
            "test": "test"
        }
    }
}

* async 키워드도 옵션으로 사용할 수 있습니다.

 

 

동작 순서

동작 원리는 아래와 같습니다.

1. 사용자가 페이지에 접근합니다.
2. getServerSideProps가 존재하는 컴포넌트를 호출해야 한다면, 해당 함수가 먼저 동작이되어서 서버에서 데이터 처리를 합니다.(Rest API, db read 등)
3. 처리가 끝난 데이터를 return해주는데 props객체 부분에 전달해줄 수 있습니다.
4. 전달된 props는 _app.tsx에서 작성한 pageProps로 전달받고 이동하려는 컴포넌트에 props를 다시 재전달합니다.
5. 서버 -> _app.tsx(pageProps) -> components(props) 형태로 전달받은 props를 통해 데이터를 사용합니다.

 

 

사용 예시

export async function getServerSideProps(){
    const {API_KEY} = process.env;
    const {results} = await (await fetch(`http://localhost:3000/api/movies/${API_KEY}`)).json();
    return {
        props: {
            results
        }
    }
}