Next.js 이 4가지는 뭐가 다를까요? 🤔 getInitialProps / getServerSideProps / getStaticPaths / getStaticProps

여러분, 안녕하세요! Next.js 프레임워크로 멋진 웹사이트를 만들려는 분들을 위해, 제가 오늘 여러분들에게 Next.js에서 사용하는 4가지 데이터 가져오기 기법을 소개해드릴 거예요! 이 글을 통해 각각 어떻게 다른지 이해하고, 어떤 상황에 어떤 기능을 사용해야 하는지 파악해봅시다!

 

데이터 가져오기 네 가지 기법의 살짝 둘러보기

getInitialProps 🕵️‍♂️

- 요청 시점에 서버와 클라이언트 모두에서 실행됩니다.
- 페이지의 초기 상태를 설정해줍니다.

getServerSideProps 🏃‍♂️

- 요청 시점에 서버에서 실행되어 데이터를 가져옵니다.
- 서버 사이드 렌더링(SSR)의 빛을 발합니다.

getStaticPaths 🛣

- 빌드 시점에 정적 경로를 생성합니다.
- 필요한 경로만 정적으로 생성할 수 있어요.

getStaticProps 📚

- 빌드 시점에 데이터를 가져와 정적 파일로 만듭니다.
- 정적 사이트 생성(SSG)의 대표 주자입니다.

 

반응형

2. 이들의 차이점은? 비교대결 시작! 🥊

실행 시점 🕑

- getInitialProps: 요청 시점 (서버 & 클라이언트)
- getServerSideProps: 요청 시점 (서버)
- getStaticPaths: 빌드 시점
- getStaticProps: 빌드 시점

성능과 캐싱 🚀

- getInitialProps: 캐싱이 어렵고 성능이 다소 떨어질 수 있어요.
- getServerSideProps: 캐싱은 가능하지만, 요청 시점에 실행되므로 성능에 영향을 줄 수 있어요.
- getStaticPaths & getStaticProps: 빠른 성능과 효율적인 캐싱이 가능합니다. CDN을 활용하면 더욱 빛나요!

데이터 실시간성 🌐

- getInitialProps & getServerSideProps: 데이터 실시간성이 높아요. 요청 시점에 데이터를 가져오니까요!
- getStaticPaths & getStaticProps: 빌드 시점의 데이터를 사용하므로, 실시간성이 낮아요.

결론

4가지 기법의 차이점을 잘 이해하셨다면, 이제 어떤 상황에 어떤 기능을 사용할지 결정할 때가 되었습니다. 각 기능의 장단점을 참고하여 프로젝트의 요구사항과 가장 잘 맞는 데이터 가져오기 방식을 선택하세요! 그럼 이만, 행운을 빌어요! 🍀

상황별 사용 추천 👨‍🏫

getInitialProps

서버와 클라이언트 모두에서 초기 데이터를 가져와야 하는 경우에 추천합니다.
하지만 캐싱이 어렵고 성능이 다소 떨어질 수 있으므로, 요즘은 getServerSideProps와 getStaticProps를 더 선호하는 추세입니다.

getServerSideProps

매 요청마다 데이터가 실시간으로 업데이트되어야 하는 경우에 추천합니다.
서버 사이드 렌더링(SSR)이 필요한 경우에도 좋아요!

getStaticPaths

빌드 시점에 동적 경로를 생성해야 하는 정적 페이지의 경우에 추천합니다.
예를 들어, 블로그 포스트나 상품 상세 페이지와 같이, URL에 동적 경로가 포함된 정적 페이지를 만들 때 사용하세요.

getStaticProps

컨텐츠가 자주 변경되지 않고, 높은 성능과 효율적인 캐싱이 요구되는 경우에 추천합니다.
정적 사이트 생성(SSG)이 적합한 사이트를 만들 때 이 기능을 사용하세요.

이상으로 Next.js에서 사용되는 4가지 데이터 가져오기 기법에 대한 설명을 마치겠습니다. 이 글이 여러분의 프로젝트에 도움이 되길 바라며, 다음에 또 만나요! 🎉