Nextjs 이야기를 나누다 보면 많이 나오는 단어인데 명확한 차이를 몰라 정리하였습니다.

CSR

client side rendering 의 약자로
서버에서 데이터만 받아와서 클라이언트 단에서 데이터가 담긴 컴포넌트들이 랜더링 됩니다.
보통 SPA(single page application)에서 많이 사용됩니다.

SPA에 대해 간략히 이야기하자면

브라우저에서 처음에 도메인을 입력하면
DNS서버를 통해 ip를 받고
그 ip에 있는 서버에 요청하게 되는데 페이지를 달라고 요청을 하게 되고,
응답으로 html 파일을 하나 주게 됩니다.
그 이후에는 javascript 로 하나의 html에서 이페이지 저페이지를 랜더링하면서 페이지를 이동하는것입니다.

그러면, html을 이미 받아왔기 때문에 다른 페이지에 가더라도 랜더링 된 html 파일을 받아오는게 아니라,
데이터만 요청하고, 받아온 데이터를 기반으로 컴포넌트를 랜더링 해주는 방식이기 때문에 CSR 방식으로 랜더링을 하는것 입니다.

CSR의 장점은

• 페이지를 이동할 때 깜빡임이 없고
• 서버에서는 html 파일 하나만 내려주고 데이터만 주기 때문에 서버의 부하를 줄여줄수 있습니다.
• 다른페이지로 이동했을 때 서버의 응답이 오기를 기다리지 않고 랜더링 할 수 있기때문에 빠른 인터렉션을 제공해줍니다.

CSR의 단점은

• 첫페이지에서는 html이랑 전체페이지에 대한 javascript까지 받아와야 되기때문에 서버 사이드 렌더링보다 속도가 느립니다.
• SEO 최적화를 하려면 추가 작업이 필요합니다.

SEO는
구글이나 네이버 봇이 페이지를 돌아다니면서 이페이지에는 어떠어떠한 정보를 가지고 있다고 크롤링을 하면 검색엔진최적화를 해주는 작업인데, html이 하나 이기 때문에 각 페이지 마다 메타데이터를 수집할 수 없습니다(별도의 작업 없이는, helmat을 이용하면 된다고 하는거 같습니다)

SSR

server side rendering의 약자로 서버에서 데이터로 html 파일을 랜더링 해서 보내주는것입니다.
그 이후에는 CSR로 구현할 수도 있고, 계속 server에서 내려 받을수 있습니다.

SSR의 장점은

• 처음에 데이터랑 랜더링된 html 이랑 같이 내려주기 때문에 CSR보다 빠르게 랜더링 됩니다.
• 도메인마다 html이 있기 때문에 SEO최적화를 잘할수 있습니다.(next-seo라는 라이브러리를 쓰면 더 쉽게 meta데이터를 설정할수 있습니다)

SSR의 단점은

• 처음 로딩 이후 페이지 이동시에 CSR보다 속도가 느릴수 있습니다.(CSR은 데이터만 받아와서 그려주는데 서버가 그려서 보내줘야 되서 느립니다.)

nextjs에서 SSR은 사용자가 요청할 때마다 그 시점에 페이지를 새롭게 랜더링하기 때문에 서버에서 받아와야 되는 데이터가 많을때 보통 사용합니다. (getServerSideProps를 이용해서 서버에서 데이터를 요청하고 랜더링하여 받아옵니다.)

SSG

static site generation의 약자로 정적으로 사이트를 만들어주는 것입니다.
빌드 단계에서 페이지 마다 html 파일을 생성해서, 요청하는 도메인에 따라 그 html 파일을 내려줍니다.

미리 html을 생성해두기 때문에 빠른 응답을 기대할 수 있지만,
빌드단계에서 미리 만들어두기 때문에 빌드 뒤에 data가 바뀌어도 다시 불러오지 않습니다.
(GetStaticProps를 이용)

ISR

incremental static regeneration의 약자로 SSG처럼 빌드 단계에서 랜더링 하지만, 설정해둔 시간마다 페이지를 새로 랜더링 해줍니다. 즉각적으로 데이터 변화에 따라 랜더링 되는것은 아니지만, 시간에 따라 새로 랜더링 되기 때문에 데이터 변화를 보여줄수 있습니다.
(GetStaticProps를 이용하지만, 시간을 함께 전달)