[Next JS] SSR 과 SSG

글을 작성하며

이번 글에서는 Next.js에서 제공하는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)에 대해 알아보려고한다. 지금 바로 알아 보도록 하자!

Next JS

Next.js는 React를 기반으로한 JavaScript 프레임워크로, 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG)을 지원하여 웹 애플리케이션의 개발을 쉽게 만들어준다.

SSR

SSR은 서버에서 웹 페이지를 동적으로 렌더링하여 클라이언트에게 전달하는 방식이다.
SSR은 동적인 콘텐츠와 인터랙션을 필요로 하는 경우에 적합하다.

SSR 의 장점

1. 초기 로딩 속도 개선: 서버에서 페이지를 렌더링하므로 초기 로딩 속도가 빠르다.

2. SEO 최적화: 검색 엔진 크롤러가 페이지의 내용을 쉽게 이해할 수 있다.

3. 동적인 콘텐츠: 매 요청마다 항상 최신 데이터를 렌더링할 수 있다.

SSR 의 단점

1. 서버 부하: 모든 요청마다 서버에서 페이지를 렌더링해야 하므로 서버 부하가 증가할 수 있다.

2. 렌더링 지연: 데이터를 가져오기 위해 서버에 추가적인 요청이 필요하므로 페이지 렌더링이 지연될 수 있다.

SSG

SSG는 빌드 시점에 페이지를 사전에 렌더링하여 정적 파일로 생성하는 방식이다.
SSG는 정적인 콘텐츠가 많은 경우에 유용하다.

SSG의 장점

1. 빠른 초기 로딩: 미리 생성된 정적 HTML 파일을 제공하므로 초기 로딩 속도가 매우 빠르다.

2. 서버 부하 감소: 요청마다 서버에서 페이지를 렌더링할 필요가 없으므로 서버 부하가 감소한다.

3. 확장성: 정적 파일 서버를 사용하므로 수많은 요청에도 효율적으로 응답할 수 있다.

SSG의 단점

1. 정적인 콘텐츠: 미리 생성된 페이지는 빌드 시점의 데이터를 가지고 있으므로 동적인 업데이트가 어렵다.

2. 콘텐츠의 실시간 업데이트 어려움: 새로운 데이터로 페이지를 업데이트하려면 다시 빌드해야 한다.

SSR 와 SSG 어떤 방식을 선택해야 하는가?

SSR과 SSG 중 어떤 방식을 선택해야 할지는 프로젝트의 요구 사항에 따라 다르다.

---

SSR을 사용하는 페이지의 예시로는 사용자 맞춤형 데이터 등, 실시간 업데이트가 필요한 대시보드 등이 있다.

SSR은 초기 로딩 속도가 느리지만, 최신 데이터를 항상 제공할 수 있으며 SEO에도 유리하다.

---

SSG페이지의 예시로는 블로그, 상품 목록, 문서 페이지 등 자주 변경되지 않는 콘텐츠에 적합하다.

SSG는 초기 로딩 속도가 빠르고 서버 부하가 적으며, 확장성이 좋습니다. 하지만 동적인 콘텐츠 업데이트에는 빌드 과정이 필요하므로 실시간 업데이트가 어렵다.

---

글을 마치며

Next.js는 SSR과 SSG를 혼합하여 사용할 수 있다. ( 동적인 콘텐츠가 포함된 페이지는 SSR, 정적인 콘텐츠만 있는 페이지는 SSG )

SSR은 초기 로딩 속도 개선과 SEO를 위해 유용하며, SSG는 빠른 초기 로딩과 확장성을 위해 적합하다. 페이지의 상황에따라 SSR와 SSG를 골라서 사용하도록 하자.