로딩
티스토리 데이터 처리 중입니다.

Next.js에서 데이터 렌더링 방식 비교와 getStaticProps(SSG), getServerSideProps(SSR) 활용

 Next.js에서 데이터 렌더링 방식 비교와 getStaticProps(SSG), getServerSideProps(SSR) 활용

Next.js는 데이터를 효과적으로 가져오고 렌더링하는데에 있어서 두 가지 주요 방식인 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 지원합니다. 또한, 이를 구현하기 위해 getStaticProps와 getServerSideProps라는 두 가지 메서드를 사용합니다.

이제 각각의 개념과 차이점에 대해 자세히 알아보겠습니다. 정적 사이트 (Static Site Generation) - getStaticProps getStaticProps는 Next.js에서 사용되는 메서드로, 정적 사이트 생성에 활용됩니다.

이 방식은 페이지가 빌드될 때 미리 데이터를 가져와 페이지를 사전 렌더링합니다. getStaticProps를 사용하여 데이터를 가져오면, 빌드 시간에 한 번 호출되며, 이후에는 정적인 데.....