SSG와 SSR

• SSG : 미리 정적인 파일을 빌드 타임에 생성해 둠
• SSR : 사용자가 특정 페이지(url)로 접근할때 서버에서 pre-render 시작

<aside> 💡 Next.js는 pre-render방식을 전체 프로젝트에 모두 다 적용하는게 아니라 각 페이지 별로 필요한 pre-render 방식으로 SSG, SSR, ISR, CSR를 선택해서 적용 할 수 있다.

</aside>

SSG를 사용하면 좋은 페이지는 ??

• 밑으 4가지 대부분이 데이터가 실시간으로 자주 안바뀌는 페이지, 정적으로 배포 해놓으면 새로 배포하기전까지 안바뀔 페이지
• Marketing Page
• Blog Posts
• E-commerce proudct listings
• Help and documentation ( 고객 센터 및 문서 )

SSG적용 선택 여부

• 사용자가 페이지를 요청하기 전에 pre-render 할수 있는가? ↔ SSR은 페이지를 요청하면서 pre-render 진행
• Yes 면? SSG, No 면? SSR, CSR, ISR
• 요청하기 전에도 이 페이지는 미리 정해 놓을 수 있다면?? → SSG

SSG적용에는 2가지 케이스 가 있다.

• 외부 데이터 fetch 없이 pre-rendering (말그대로 API 호출도 필요없다. 그냥 정적인 페이지 뿌려줌.)
• 외부 데이터를 fetch해서 pre-rendering (외부 API pokemon API, 다른파일 읽어와서(해볼예시) , Next.js에서 제공하는 API Routes)

<aside> 💡 SSG는 결국에 서버에서 동작 및 처리를 한다.

</aside>