getStaticProps와 getServerSideProps 의 개념차이

Next.js를 이틀째 보고 있는데, getStaticProps, getServerSideProps를 어떻게 사용하는건지 모르겠다.

 

공식문서를 읽는 능력이 쓰레기임을 느낀다...

 

코드로 연습은 못했지만, 개념이라도 우선 기록해두자

 

getStaticProps

• "빌드 시 딱 한번" 호출 -> 변화가 없는 페이지(회사 소개 페이지, 신문기사 등 읽는 문서)에 적절하다.
• 호출시마다 매번 data fetch를 하지 않아 getServerSideProps보다 성능면에서 좋다.
• 데이터가 클라이언트에 도달하기 전에 렌더링되므로 페이지의 SEO가 향상한다 -> CSR의 단점을 보완!

getServerSideProps

• 사용자가 페이지를 로드할 때 마다 데이터가 갱신되어 항상 업데이트 된 정보를 볼 수 있다. -> prerender
• 갱신할 때 마다 prerender를 하는데, prerender는 사전에 HTML을 만든다는 의미이다. -> SEO 향상
• 매 요청마다 서버에서 실행되므로 성능은 getStaticProps보다 불리하지만, 내용을 언제든 동적으로 수정 가능
• 데이터를 미리 렌더링 할 필요가 없다면, 클라이언트 측에서 데이터를 fetching 하는게 효율적이다. -> 오용하지 않기

 

 

---

시간이 지난후 추가 하는 내용

내가 예전에 이 글을 쓸 때 어떻게 사용하는지 모른다고 써놨다.

아래처럼 쓰면 된다. 그냥 컴퍼넌트 외부에 한번 선언해주면 끝.

실행은 '알아서' 된다. 왜? 프레임워크니깐

내부 깊숙한 곳에서 알아서 실행한다.

함수 이름이랑 export만 똑바로 적어주면 됨!