'getStaticProps'와 'getServerSideProps'의 차이

Next.JS로 만든 포트폴리오 배포 사이트에서 계속해서 이미지 로드 오류가 발생하였다.

 

계속해서 원인에 대해서 생각해 봤었는데 아무리 봐도 getStaticProps() 문제인 것 같았다. 그래서 교체를 하니 정상적으로 며칠 동안 이상 없이 작동되었다.

 

그렇다면 왜 getServerSideProps() 일 때는 정상적으로 이미지를 불러왔을까? 그 이유는 아래와 같다.

 

getStaticProps 이 메서드는 정적 생성(Static Generation)을 사용하는 페이지에 사용됩니다.

정적 생성은 빌드 시점에 페이지를 렌더링 하고 미리 생성된 HTML 파일을 제공하는 방식입니다.

이렇게 생성된 페이지는 정적인 상태로 유지되며, 서버에 요청이 발생하지 않습니다.

getStaticProps를 사용하여 데이터를 가져오면, 빌드 시점에 한 번 호출되며 데이터가 페이지에 미리 로드됩니다.

그러나 이미지와 같은 동적인 요소의 경우, 빌드 시점에서 로드할 데이터가 없어 문제가 발생할 수 있습니다.

 

getServerSideProps 이 메서드는 서버 측 렌더링(Server-Side Rendering, SSR)을 사용하는 페이지에 사용됩니다.

SSR은 클라이언트 요청이 있을 때마다 서버에서 페이지를 렌더링하고 HTML을 동적으로 생성하여 제공하는 방식입니다.

getServerSideProps를 사용하여 데이터를 가져오면, 각 요청마다 호출되며 최신 데이터를 사용하여 페이지를 렌더링합니다.

따라서 이미지와 같은 동적인 요소도 정상적으로 로드됩니다.

 

두 차이점을 명심해야겠다.