SSR vs SSG: Next.js의 렌더링 대결! 어떤 것을 택할까?

next.js SSR(서버사이드 렌더링) vs SSG(정적 사이트 렌더링)

🎉🎉 안녕하세요, 프론트엔드 개발자 행님덜! 오늘은 우리가 모두 사랑하는 Next.js에서 SSR과 SSG를 비교하는 화끈한 포스팅으로 찾아왔습니다! 두 기술의 차이점을 알아보고, 언제 어떤 것을 선택해야 할지 살펴보겠습니다. 시작하겠습니다! 🍿🥤

 

🚀 SSR (Server Side Rendering) - 서버에서 화면 조립

SSR은 말 그대로 서버에서 페이지를 렌더링하는 기술이에요. 요청이 들어올 때마다 서버에서 페이지를 새롭게 생성해서 클라이언트에 전달해 주는 거죠. SSR의 장점은 무엇일까요? 🤔

SEO 친화적: 구글, 네이버 등 검색 엔진이 페이지를 더 잘 이해하고 색인화할 수 있어요.

초기 로딩 성능: 사용자에게 보여주기 전에 서버에서 렌더링이 완료되기 때문에 초기 로딩 성능이 좋아집니다.
하지만 모든 게 장점만 있는 건 아니죠. 🙅‍♂️

서버 부하 증가: 매번 요청에 대해 서버에서 렌더링을 해야 하기 때문에 부하가 증가합니다.

 

next.js SSR 렌더링

 getServerSideProps 메소드에서 서버에서 불러올 data를 fetch할 수 있습니다.

export async function getServerSideProps(context) {
  return {
    props: {},
  }
}

반응형

🌐 SSG (Static Site Generation) - 빌드 시점에 페이지 생성

SSG는 빌드 시점에 페이지를 생성하는 기술이에요. 빌드된 페이지는 정적 파일로 저장되어, 클라이언트의 요청에 따라 그대로 전달됩니다. 어떤 장점들이 있을까요? 🧐

빠른 페이지 응답 속도: 이미 생성된 정적 파일을 전달하므로, 페이지 응답 속도가 매우 빠릅니다. 그로 인해 SEO에도 유리합니다.
서버 부하 감소: 렌더링 작업이 빌드 시점에 이루어지기 때문에, 서버 부하가 줄어듭니다.
CDN 활용 용이: 정적 파일을 쉽게 CDN에 배포할 수 있어 전 세계 사용자들에게 빠르게 전달할 수 있습니다.

 

그렇다면 SSG의 단점은? 😟

데이터 변경 시 빌드 재실행: 데이터가 변경될 경우, 빌드를 다시 실행해야 합니다.

 

next.js SSG 작성 예시

export async function getStaticPaths() {
  return {
		// 미리 빌드할 경로를 params를 통해서 정희합니다.
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
  }
}

export async function getStaticProps(context) {
  return {
		// 정적으로 사용할 props를 전달합니다.
    props: {},
  }
}

 

🤹‍♂️ SSR과 SSG, 언제 뭐를 써야 할까요?

각각의 기술은 자신만의 장단점이 있어요. 어떤 상황에서 어떤 기술을 사용할지 결정하기 위해서는 몇 가지 고려 사항이 있습니다. 🎭

 

🔥 SSR 는 언제 쓸까 :

데이터가 실시간으로 변하는 웹 사이트: 뉴스, 쇼핑몰 등 실시간으로 데이터가 업데이트되는 경우에는 SSR이 적합합니다.
SEO 최적화 필요: 검색 엔진 노출이 중요한 경우, SSR이 좀 더 CSR에 비해 SEO 친화적인 해결책입니다.

 

🏎 SSG 는 언제 쓸까:

정적 콘텐츠가 많은 웹 사이트: 블로그, 문서, 소개 페이지 등 정적 콘텐츠가 많은 웹 사이트에는 SSG가 적합합니다.
전세계 사용자 대응: CDN을 활용해 전 세계 사용자에게 빠른 페이지 응답 속도를 제공하려면 SSG가 적절합니다.

SEO가 최우선: SEO가 중요한 페이지. 응답이 빠르기 때문에 검색엔진이 우선순위로 하는 경향이 있습니다.

인증이 필요한 사이트 : 인증 정보는 미리 생성할수 없기 때문에 SSR이 유리 합니다.

 

💡 결론

SSR과 SSG는 각각의 상황에 따라 적절한 기술을 선택해야 합니다. 특정 상황에 따라 두 기술을 혼용해서 사용하는 것도 가능하니, 프로젝트의 요구 사항과 목적을 분석하여 최적의 솔루션을 찾아보세요!

그럼 여기까지 포스팅을 마치겠습니다. 오늘도 화끈한 개발 얘기로 함께할 수 있어 기뻤어요! 🎉 

다음에 또 놀러오세요~! 👋