SSR(서버사이드렌더링) 과 CSR(클라이언트사이드렌더링)

해당 내용과 관련하여 새로 업데이트해서 작성했습니다! 아래 글을 확인해주세요

CSR, SSR

---

SPA: Single Page Application

• 하나의 html 파일로만 작동하는 웹 애플리케이션
• 최초 1회 페이지 로딩 후로는 데이터만 변경하여 사용
  • 클라이언트사이드렌더링 방식

CSR: Client Side Rendering

• SPA 방식 -> Client Side에서 HTML 반환 후 JS가 동작하면서 데이터만 서버로부터 주고받아 렌더링하는 것
• JS 파일을 fetch하고 브라우저가 컴파일하기 전까지 화면에는 아무것도 렌더링되지 않음.
• 장점
  • 사용자 이벤트에 따라 필요한 부분만 읽어들임 -> SSR보다 더 빠른 '상호작용' 가능
  • 페이지 전체(x) 일부(o)만을 변경 -> 빠른 렌더링 가능
  • SSR 필요하지 않아 -> 일관성 있는 코드 작성 가능
• 단점
  • SEO 적용 불편? (html만 가져오기 때문에)
  • '초기'구동 속도가 느림 (페이지 읽고, JS 읽고, 화면을 그리는 시간까지) (단, '상호작용'은 빠름 -- 한 번 불러오고 나면 그 후에는 필요한 부분만 슉슉 바뀌기 때문)

SSR: Server Side Rendering

• 기존에 많이 쓰여온 렌더링 방식
• 올드버전 SSR은 서버가 모든 걸 컴파일하고 데이터를 포함시키고 HTML페이지를 클라이언트에 전달 (빠르고 효율적)
  • 다만, 다른 Route로 navigate할 때마다 서버는 이 작업을 처음부터 다 다시 반복하는 문제
  • -> ₩초기₩ 페이지 로드할 때만 SSR을 쓰고, ₩그 다음부터는₩ 필요한 데이터만 fetch할 수 있도록 AJAX사용 (dynamic routing)
  • React의 renderToString() 메소드 -> 하나의 코드로 서버사이드, 클라이언트사이드 를 모두 개발 가능 (단, 서버가 필요)
• 사용자에게 화면을 렌더링하기 전에 미리 fetch data
• 사용자가 웹에 접근 시 (최초 접속 시) 서버에 각각의 페이지에 대한 요청 -> html, JS 파일 모두 다운로드해서 바로 렌더링
• 장점
  • '초기'구동이 빠름(???) - 최초 시점에 사용자가 컨텐츠를 빨리 볼 수 있음
  • SEO 적용 용이
• 단점
  • 필요한 부분만 수정하는 것이 아닌, 페이지 _전체_를 로딩하고 렌더링 (즉, 새로고침)
    -> CSR보다 '상호작용'이 느림 -- 사용자 경험이 좋지 않음 ('초기'에 화면은 빨리 '볼' 수는 있으나 JS파일이 다 다운되지 않은 상태라 버튼이 클릭되지 않는 등 이벤트리스너가 작동하지 않을 수)