CSR, SSR에 대해서는 알고있었는데 Next.js 공부중 처음 접해보는 랜더링 방식인
SSG, ISR에 대해서도 이해할겸 간단한 장단점 정리와 언제 어떤 방식을 사용하는게 좋을지에 대해서 공식문서들을 바탕으로 정리해보자

CSR (Client Side Rendering)

동작원리

1. 유저가 웹 페이지를 방문하면, 브라우저는 빈 HTML 파일을 다운로드 한다.
2. 브라우저는 JS 번들 파일을 다운로드한 다음 AJAX를 통해 API 요청을 수행하여 동적 컨텐츠를 가져오고 파싱하여 최종 컨텐츠를 랜더링한다.
3. 사용자가 페이지를 이동할 경우, 서버에 추가 요청하지 않고 이미 다운받은 JS를 이용하여 랜더링 한다.

장점🔺

• 초기 페이지 로딩 후에는 페이지 이동이 빠르다
• 페이지간 이동시 깜빡임이 존재하지 않아 네이티브 앱과 비슷한 경험가능
• 서버의 부하가 적다

단점🔻

• SEO 친화적이지 않음 (구글 크롤러의 경우 CSR 페이지도 읽을 수 있다고 함)
• 초기 페이지 로딩속도(TTV, FCP)가 느리다
• 클라이언트측에서 보안에 좋다.

SSR (Server Side Rendering)

동작원리

1. 사용자가 웹 페이지를 방문하면, 서버는 리소스를 확인하고 페이지 내에 있는 서버측 스크립트를 실행 후 HTML 컨텐츠를 컴파일한다.
2. 컴파일된 HTML을 브라우저로 전송.
3. 브라우저는 HTML을 다운로드하고 사용자가 페이지를 볼 수 있도록 한다.
4. 브라우저는 자바스크립트를 다운로드하고 실행하면서 페이지를 interactive하게 만든다.
5. 사용자가 페이지를 이동할 경우, 위 동작을 반복.

장점🔺

• 초기 페이지 로딩속도가 빠르다
• SEO 친화적
• 서버 측에서 처리를 하기 때문에 사용자의 하드웨어, 소프트웨어 성능에 영향을 덜받는다.
• 클라이언트가 아닌 서버 측에서 처리하기 때문에 보안에 좋다.

단점🔻

• 페이지간 이동시 깜빡임 존재
• 페이지 이동할 때 마다 서버에 요청을 해서 서버 과부화 가능성 높음

CSR과 SSR은 상반된 장단점을 가지고 있는데 둘의 중간지점에 해당하는 방식이 SSG이고
Next.js 공식문서에도 SSG 방식을 사용하길 권장한다.

SSG (Static Site Generation)

동작원리

1. SSR처럼 서버로부터 HTML을 받아오며, 빌드과정에서 HTML 파일을 생성한다.
2. 화면을 서버에서 미리 만들어서 전송해주는 방식.

장점🔺

• 페이지 로딩속도(TTV) 빠름
• SEO 친화적
• 보안이 좋음

단점🔻

• 정적인 데이터
• 유저별 데이터 제공은 힘들다

위의 특성들 때문에 SSG는 프로모션 페이지,

ISR (Incremental Static Regeneration)

SSG와 동일한 원리로 작동하는데 정해진 주기에 따라 페이지를 다시 빌드한다

동작원리

1. 페이지를 처음 방문하면 데이터는 SSG 방식처럼 빌드과정에서 받아온 데이터입니다.
2. ISR은 revalidate 시간이 지나면 해당 페이지만 서버사이드에서 다시 빌드하게 된다. API를 백그라운드에서 접속하기 때문에 클라이언트 쪽에 보이는 데이터는 변함이 없습니다.
3. revalidate 시간 후에 새로고침을 누르면 ISR이 페이지를 재 빌딩 하는 시간 후에 렌더링 되기 때문에 실제 시간보다 1초 늦게 보입니다. 여기서 1초라는 뜻은 페이지 재 빌딩이 1초 걸린다는 뜻입니다.

장점🔺

• 페이지 로딩속도(TTV)가 빠름
• SEO 친화적
• 보안이 좋음
• 데이터가 주기적으로 변경됨

단점🔻

• 실시간 데이터가 아니다
• 유저별 데이터 제공은 힘들다

❓그럼 언제 어떤 방식을 써야할지

각각의 장단점들을 따져봤을때 위와 같은 상황에 맞는 랜더링 방식을 사용하면 될 것 같다

참고한 글

https://web.dev/rendering-on-the-web/