[Next.js] getServerSideProps 사용법 및 예제

 

[서버로부터 데이터 불러오기]

기본적으로 Next.js는 모든 페이지를 미리 렌더링 합니다. 이렇게 미리 렌더링을 하여 html을 생성하게 되면 더 나은 성능과 SEO 이점을 얻을 수 있습니다. Next에는 두 가지 형태의 사전 렌더링이 존재합니다.

1. 정적 생성: 빌드 시에 페이지를 HTML로 만들어 요청 시 제공합니다.
2. 서버 사이드 렌더링: 페이지 요청 시 서버 사이드 렌더링을 통하여 HTML을 제공합니다.

외부 데이터를 필요로 하지 않는다면 서버 사이드 렌더링을 통하여 외부 데이터를 이용하여 렌더링을 한 후 HTML을 제공하게 됩니다. 이때 서버 사이드 렌더링에 대하여 Next는 옵션을 제공합니다. 정적 생성에 관한 옵션에 대해서는 다음에 다루도록 하겠습니다.

 

 

[getServerSideProps]

Next는 getServerSideProps라는 페이지의 데이터를 서버로부터 제공받는 기본 API를 가지고 있습니다. 서버에서 데이터를 패치하여 초기 데이터를 전달하도록 구성이 되어 있습니다. 간단한 예제를 만들어 사용해 보도록 하겠습니다.

 

먼저, 서버에서 데이터를 패치하기 위해 'isomorphic-unfetch' 모듈을 설치하도록 하겠습니다. (axios와 비슷한 기능을 한다고 보시면 됩니다.)

npm i isomorphic-unfetch // npm
yarn add isomorphic-unfetch // yarn

 

[소스 코드] pages/fetch.tsx

import fetch from 'isomorphic-unfetch';

const fetchPanel = ({user}: any) => {
    const username = user && user.name;
    return <h1>{username}</h1>
}

export const getServerSideProps = async () => {
    try {
        // 깃허브 api 중 유저의 정보를 받아오는 api를 사용
        const res: any = await fetch("https://api.github.com/users/cshoon95");

        if (res.status === 200) {
            const user = await res.json();
            return { props: { user }}           
        }

        return { props: {} };
    } catch (error) {
        console.log(error);
        return { props: {} }
    }
}

export default fetchPanel;

 

[소스 분석]

getServerSideProps는 이름 그대로 서버 측에서 props를 받아오는 기능을 하게 됩니다. 페이지를 요청 시마다 실행이 되며 getServerSideProps에서 페이지로 전달해준 데이터를 서버에서 렌더링을 하게 됩니다. 서버에서 실행되기 때문에, 앞의 코드를 새로고침을 하여 실행해 본다면 콘솔 출력이 아닌 브라우저가 아닌 터미널에서 되는 것을 확인하실 수 있습니다.

console.log가 아닌 terminal에 로그가 출력

 

fetch를 이용하여 github api 유저인 저의 정보를 불러왔습니다. 데이터 요청은 에러가 발생할 수 있기 때문에 항상 try, catch를 이용하여 치명적인 에러의 발생으로부터 스크립트가 죽는 것을 방지해야 합니다. getServerSideProps에서 리턴한 props값들은 페이지의 props로 전달되게 됩니다. 전달받은 깃허브 유저 정보의 유저명을 출력하도록 하였습니다.

 

[실행 결과]

전달받은 깃허브 유저정보의 유저명이 위에 출력된 것을 확인하실 수 있습니다.

 

 

Reference

클론 코딩으로 시작하는 Next.js (이형주)