[TIL] 08.19 Next.js getStaticProps and getServerSideProps

getServerSideProps 는 runtime 시 실행 getStaticProps 는 빌드시 실행

next build 명령어를 실행하게 되면 Next.js 는 페이지를 3 타입으로 최적화 한다.

1. λ (Lambda): 이러한 페이지는 런타임에 렌더링되며getInitialProps 또는getServerSideProps를 구현할 수 있습니다.
2. ○ (Static): Static으로 렌더링 된 페이지에는 HTML 만 포함되며 이 페이지는 매우 빠르다.
3. ● (SSG): 정적 사이트 생성 페이지도 정적 방출로 제공됩니다. 이는 HTML 및 프리 페치 된 props (getStaticProps 정적 메소드에서)을 렌더링한다는 점에서 정적 페이지와 다릅니다.

완전히 서버레서 렌더 하려는 이유

1. 사이트 엔진 최적화를 위해 페이지를 즉시 사용가능 하도록 하거나
2. 비공개 API를 보호하기 위해

1.getStaticProps

빌드 타임 때 딱 한 번만 실행됨 따라서 빌드시 고정되는 값이고, 빌드된 이후에는 변경이 불가능함.

사용하면 좋을 경우

• 유저의 요청에 따라 매번 fetching할 필요가 없는 경우
• 누구나 볼 수 있는 데이터를 불러올 때 (전체 공개 페이지)
• pre-rerender가 되어야하는 페이지

2.getServerSideProps

빌드 이후에도 실행이 가능 하고 매 요청마다 데이터를 서버로 부터 가져옴

return 한 값이 반드시 객체 형태여야 한다.

사용하는 경우

• 요청 마다 데이터를 가져와서 페이지를 pre-render 해야하는 경우

사용법은 getStaticProps와 getServerSideProps 둘다 같다.

const Users = ({ 
    users 
}) => { 
    return ( 
        {users.map(
            (user, key) => ( 
                <ul key={key}> 
                    <li>
                        {user.username}
                    </li> 
                </ul > )
            )
        }
    )
} 

export const getServerSideProps = async () => { 
    const data = await axios 
        .get("/userData") 
        .then((res) => ({ 
            users: res.data, 
         })
    return { 
        props: data, 
    }; 
};