회사 기술 면접중에, 최종 프로젝트에 사용했었던 Next.js의
getServerSideProps, getStaticProps의 대한 질문이 나왔었다.
Next.js를 간단하게 5일 정도 학습하고 바로 프로젝트에 들어갔던 터라, 면접을 봤을 당시에는 프로젝트가 끝나고 3개월이 지난 시점이었다.
다시 까보지 않은 내 잘못을 탓하며 질문에 답하려 생각해봤지만, 어떤 기능을 하는지 잘 기억이 나지 않았다.
기껏해야 기억나는 건 getServerSideProps는 Router path 경로를 지정해준다..? 아니 해줬었나..? 싶어서 기어들어가는 목소리로 답을 했었던 것 같다.
무지했던 나의 부끄러움을 잊지 않기 위해 질문의 답을 정리해보려한다.
들어가기에 앞서
Next.js는 더 나은 성능과 SEO, 검색엔진최적화를 위해 모든 페이지를 미리 렌더링한다. (Pre-Render)
렌더링의 방식은 getServerSideProps, getStaticProps로 나뉜다.
getServerSideProps
Server Side Rendering (SSR)방식이다.
서버 측에서만 실행되고 브라우저에서는 실행되지 않는다.
- 요청이 있을 때마다 서버 측에서 데이터를 가져온다.
- 각 요청마다 데이터를
동적으로 생성하므로 항상 최신 데이터를 제공할 수 있다.
장점
실시간 데이터가 필요한 경우 유용하다.동적인 컨텐츠를 제공해야 하는 경우에 적합하다.
단점
- 매 요청하다 서버에 데이터를 가져오기 때문에 성능이 느려질 수 있다.
- 요청당 서버 부하가 증가할 수 있다.
- 캐싱이 어렵거나 복잡할 수 있다.
코드 요소
export async function getServerSideProps( {params} ) {
//...
}
async함수로 정의되어야 한다. 그리고 매개변수로context객체를 받는다. 여기서는context객체의params속성을 사용하여 동적인 라우팅 경로에서 추출한 파라미터를 얻을 수 있다.
export async function getServerSideProps( {params} ) {
const { slug } = params;
// 서버에서 데이터 가져오기;
const res = await fetch(`https://example.com/api/posts/${slug}`);
const post = await res.json();
return {
props : {
post
}
};
}
getServerSideProps함수 내부에서는 서버에서 데이터를 가져올 수 있다. 해당 예시는fetch함수를 사용하여 외부 API에서 데이터를 가져오고,await키워드를 사용하여 비동기적으로 데이터를 기다린다.
데이터를 가공하여props객체에 담아 반환한다.
반환된 데이터는 컴포넌트의props로 전달된다.
return {
props : {
post
}
};
getServerSideProps함수는{props : { ... }}형식의 객체를 반환해야 한다. 예시 코드에서post변수를props객체에 담아 반환하고 있음을 볼 수 있다.
이렇게 반환된 데이터는 페이지 컴포넌트의props로 전달되어 사용된다.
export default function Post({post}) {
// ...
}
- 반환된 데이터는 해당 페이지 컴포넌트의
props로 전달된다.
위 예시에서는Post컴포넌트의postprop으로 데이터를 받아와서 사용하고 있다. 이렇게 받은 데이터를 활용하여 컴포넌트를 렌더링 할 수 있다.
getServerSideProps는 서버 측에서 데이터를 가져오고 해당 데이터를 페이지 컴포넌트에 전달하는 역할을 한다.
이를 통해 동적인 데이터를 페이지에 주입하여 서버 사이드 렌더링을 구현할 수 있음.
getStaticProps
Static Site Generation (SSG)방식이다.
Client Side Rendering과 다르게 항상 서버에서 실행된다.
- 사전 빌드 시점에 데이터를 가져와서 정적인 페이지로 생성한다.
- 빌드 시점에 데이터를 가져오기 때문에 요청이 들어올 때마다 데이터를 다시 가지고 오지 않아도 된다.
장점
- 성능이 향상되며, 페이지 로딩 속도가 빠르다.
- 캐싱이 용이하고 CDN 캐싱을 적용할 수 있다.
-CDN 캐싱➡️ 콘텐츠 전송 네트워크는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크이다. - 욧청당 서버 부하가 감소한다.
단점
- 사전 빌드 시점에 데이터를 가져오므로 실시간 데이터에는 적합하지 않다.
- 데이터가 자주 변경되는 경우에는 새로운 빌드를 해야한다.
코드 요소
export async function getStaticProps() {
//...
}
getStaticProps는async함수로 정의되어야 한다.
그리고 매개변수를 받지 않는다.
export async function getStaticProps() {
// 사전 빌드 시점에 데이터 가져오기
const res = await fetch(`https://example.com/api/posts`);
const posts = await res.json();
return{
props : {
posts
}
};
}
- 함수 내부에서는 사전 빌드 시점에 데이터를 가져와야 한다.
위 예시에서는fetch함수를 사용하여 외부 API에서 데이터를 가져오고,await키워드를 사용하여 비동기적으로 데이터를 기다린다.
가져온 데이터를 json 형태로 가공하여props객테에 담아 return 한다.
return {
props : {
post
}
};
getStaticProps함수는{props : {...} }형식의 객체를 반환해야 한다.
이 예시에서는posts변수를 객체에 담아 반환하고 있다.
반환된 데이터는 페이지 컴포넌트의props로 전달된다.
export default function Blog( {posts} ) {
// ...
}
getStaticProps에서 반환된 데이터는 해당 페이지 컴포넌트의props로 전달된다.
해당 데이터를 활용하여 컴포넌트를 렌더링할 수 있다.
getStaticProps함수는 사전 빌드 시점에 데이터를 미리 가져오고, 해당 데이터를 페이지 컴포넌트에 전달하는 역할을 한다.
이를 통해 정적인 페이지를 생성하고 빌드 시점에 데이터를 미리 가져와서 페이지를 렌더링할 수 있다.
요약
getServerSideProps는 실시간 데이터가 필요하거나 동적 컨텐츠를 제공해야하는 페이지를 렌더링하는데 적합합니다.
반면 getStaticProps는 정적 데이터, 정적 컨텐츠가 많은 페이지에 적합한 렌더링 방식입니다.
