CSR과 SSR은 뭘까

Oct 1, 2025 updated Oct 1, 2025 computer-science rendering seo web

CSR이 뭐임? -> 클라이언트 사이드 렌더링이고 사용자가 요청하면 컨텐츠를 로드한 뒤 페이지를 렌더링해서 보여줌 대표적으로 리액트, 뷰, 앵귤러 등이 있음
- 장점이 뭐임? -> 초기 로딩 속도를 제외하면 이미 모든 컨텐츠가 로드되어있기 때문에 속도가 빠름 새로고침이 발생하지 않기때문에 UX에 이점이 있고 서버에서 화면을 처리하지 않아도 됨
- 단점은 뭐임? -> JS파일이 로드되기 전까지 빈 HTML을 보고있어야하고 SEO 최적화에도 어려움

* SSR은 뭐임?
  -> 서버 사이드 렌더링인데 사용자가 요청하면 서버에서 렌더링을 마친 HTML을 제공하는 방식임

* 장점이 뭐임?
  -> CSR방식에 비해 첫 컨텐츠 로딩 시간이 매우 짧고, 이미 렌더링 된 HTML 문서가 전달되기 때문에
     SEO도 CSR 방식에 비해 더 유리함

* 단점은 뭐임?
  -> 매 페이지마다 로딩시간과 새로고침이 발생하기 때문에 화면이 깜박이기도 하고
     JS가 완전히 로드되기 전까진 상호작용이 불가능함

* SSG는 뭐임?
  -> 빌드시에 HTML을 사전 렌더링해서 배포하는 방식임

* 장점이 뭐임?
  -> HTML을 만들어서 제공하기 때문에 렌더링 속도가 매우 빠르고 SEO에도 유리함

* CSR과 SSR 중 어떤 걸 골라야함 ?
  -> 두 방식의 단점을 보완해서 나온 프레임워크들이 있는데 리액트의 경우엔 NEXT와 GATSBY가 대표적임

* NEXT.JS는 뭐임?
  -> SPA 형태의 웹 서비스에서 SSR과 SSG를 적용할 수 있도록 해주는 프레임워크임

* SPA 형태의 웹 서비스는 뭐임?
  -> 싱글 페이지 어플리케이션임 요청시 한 번 컨텐츠를 로딩하고 이후엔 동적으로 DOM을 렌더링해서 보여주는 방식임
     대부분의 SPA는 CSR방식으로 구현돼있음 

* 어떤 방식으로 작동하는거임?
  -> NEXT는 HTML을 빌드타임 때 미리 렌더링을 해줌 이걸 프리 렌더링이라고 함
     갖고 있다가 요청이 들어오면 알맞은 페이지를 반환 해 주는거임

* 이게 왜 SSR임?
  -> 이건 NEXT의 SSG라는 기능이고 SSR을 사용하는 방법은 따로 존재함

* 그럼 CSR은 사용 안하는 거 아님?
  -> 그건 아님 NEXT에서도 리액트처럼 CSR방식을 사용 할 수 있고 
     더불어 SSR또는 SSG도 혼합하여 사용 할 수 있음

* 서버가 없는데 어떻게 SSR을 수행하는거임?
  -> NEXT의 자체 서버가 있고 노드 환경에서 돌아가는 것 같다.

피드백 넥스트를 SSR로 돌리려면 WAS에 올려야하고 SPA나 SSG로 하려면 WS에 올리면됨

넥스트도 SSR을 하려면 서버가 필요하다 => WAS

SSG는 미리 만들어둔 html을 WS에 올리는것이고 WS에 주소를 달면 정적호스팅이 된다