Next.js

CSR 과 SSR

해갈 2024. 2. 24. 09:41

웹 애플리케이션의 역사

 

MPA 방식

  • 초창기 웹은 텍스트 중심의 단순 문서로 멀티 페이지 애플리케이션이라고 MPA 방식으로 구현되어 있음
  • MPA 는 다중 페이지로 이뤄져 있어 변경사항이 있을 때마다 서버로 페이지를 요청받는 방
  • MPA 는 서버로부터 계속해서 HTML 파일을 내려받기 때문에 새로고침이 발생하고, 유저는 새로고침이 발생할 때마다 깜빡이는 화면을 볼 수 밖에 없었음
  • 웹이 발전하면서 사진, 영상, 그리고 유저 인터렉션 등이 많아져 복잡도가 높아지면서 MPA 로는 성능 이슈 문제를 맞음

 

Ajax

  • 이런 문제를 해결하기 위해 나온 것이 Ajax 라는 기술. 
  • Ajax 는 변화가 생길 때마다 통째로 HTML 파일을 서버로부터 내려받는 것이 아닌 필요한 부분만 리로드할 수 있도록 도와주게 되었음

 

SPA(Single Page Application)

  • SPA 다음으로 나온 기술인 싱글 페이지 애플리케이션인 SPA 방식.
  • 단일 페이지로 구성되어 Ajax 에서는 계속 HTML 파일을 새로 갱신을 받았지만, 갱신될 부분에서만 데이터를 요청하게 됨
  • 따라서 새로고침이 발생하지 않아서 사용자 경험에 좋다는 특징이 있음

 

설명 이유

이렇게 웹 애플리케이션의 역사를 설명한 이유는 MPA 방식과 SPA 방식이 각각 CSR 과 SSR 방식과 채택하고 있기 때문입니다.

 

 

CSR & SSR

CSR 은 클라이언트 사이드 렌더링, SSR 은 서버 사이드 렌더링으로 이름에서 알 수 있듯이 어디서 렌더링을 처리할지에 따라서 차이가 나게 됨

 

CSR

  • CSR 은 클라이언트 측에서 렌더링을 담당을 하는 것이고, 첫 로딩에 빈 HTML 파일에 필요한 번들 파일을 모두 다운로드 받는 방식

 

 

  1. 사용자가 웹에 접속
  2. 사용자가 웹에 접속하게 되면, 브라우저가 서버에 리소스 요청을 보냄
  3. 서버는 JS 코드와 CSS 를 불러올 수 있는 빈 HTML 파일을 브라우저에게 전송
  4. 브라우저는 코드들을 다운받은 후에 렌더링 진행해 사용자에게 페이지 제공

 

  • 이런 방식은 요청을 보내고, 응답의 첫 번째 바이트가 도착하기까지의 시간인 TTFB(Time To First Bye)가 빠르다는 장점이 있지만, 사용자가 화면에서 콘텐츠를 볼 수 있는 페이지 로드 타임라인의 첫 번째 지점인 FCP(First Contentful Paint)는 좋지 않다는 단점이 존재.

 

 

SSR

  • SSR 은 서버 측에서 렌더링 페이지를 그려서 클라이언트에 내려주는 방식
  • SSR 방식에서도 요청 즉시 동적으로 HTML  파일을 만드느냐 아님, 미리 다 만들어둔 정적 페이지를 제공하느냐에 따라서 Static Site Generation 이라는 개념도 나오게 됨
  • SSG 는 예로 들어 3명의 사용자가 어떤 특정 블로그 게시글에 방문한다고 했을 때, 모두 같은 내용의 게시글 내용을 확인할 수 있음. 하지만, 마이페이지같은 경우는 3명의 사용자 모두 다른 내용을 보게 됨. 때문에 이렇게 모두에게 같은 내용의 데이터를 제공할 때에는 SSG 방법을 사용하기도 함

 

 

  1. 사용자가 웹에 접속
  2. 브라우저는 리소스 요청
  3. 서버는 초기 컨텐츠가 로딩된 페이지를 제공
  4. 브라우저는 초키 컨텐트가 로딩된 페이지와 JS 코드를 다운받고 먼저 HTML 파일을 사용자에게 보여줌. 해당 페이지는 정적인 페이지이며 버튼을 눌러도 응답이 없을 수도 있음
  5. 다운받은 JS 코드를 실행해 이벤트리스너들을 할당해서 인터랙티브한 페이지를 제공하게 됨

 

  • SSR 의 장점으로는 FCP(First Content Painting) 이 빠르다는 장점이 있지만, TBT(Total Blocking Time) 이 생긴다는 단점이 존재
    • TBT 는 FCP 로부터 TTI(Time To Interact) 사이의 시간을 의미
    • TTI 는 사용자가 페이지에서 상호작용이 가능하기까지의 시간을 의미

 

 

CSR & SSR 장단점

 

CSR 장단점

  • 장점
    • 화면 깜빡임이 없어 좋은 사용자 경험을 제공
    • 초기 로딩 이후 구동 속도가 빠름
  • 단점
    • 초기 구동 속도가 느림
    • SEO 가 어려움

 

SSR 장단점

  • 장점
    • 초기 로딩속도가 빠름
    • SEO 가 쉬움
  • 단점
    • 페이지를 이동할 때마다 화면이 깜빡여 사용자 경험 저하
    • 매번 요청을 보내기 때문에 서버가 과부화 될 우려

 

 

SEO 란

  • SEO 는 Search Engine Optimization 이라고 해서 웹 사이트 검색 결과가 더 잘 보이도록 최적화 하는 과정을 의미
  • 검색을 했을 때 좀 더 상단에 뜨기 위해 최적화를 함
  • SEO 는 검색봇이 웹사이트를 크롤링해가면서 정보를 수집하며 색인화 과정을 거침 그래서 이런 저장된 정보를 바탕으로 SEO 를 수행
  • 그치만 만약 빈 HTML 파일을 만나게 된다면 검색봇은 어떤 내용의 HTML 파일인지 알 수 없게 됨. 하지만, 구글의 검색봇은 JavaScript 를 실행할 수 있어 해석가능
  • SSR 을 통해 초기 콘텐츠가 로딩된 HTML 파일을 일반 검색봇들이 보게 되면 정보를 알 수 있어 검색 우선순위에 해당될 수 있음

 

 

어떤 방식이 좋은 방식일까?

  • 위 설명에서 알 수 있듯이 각각의 장단점이 존재하고, 필요 이유가 있어 적재적소에 서비스 특징에 맞게 필요한 방식을 채택하는 것이 중요
  • 개인적으로는 CSR 은 사내에서만 사용하는 서비스라 SEO 가 불필요한 경우, SSR 은 이커머스 사이트처럼 검색 유입이 중요한 경우와 사용자 경험이 우선시되어 초기 로딩속도가 중요한 경우, SSG 는 데이터 변동이 없는 정적 페이지를 렌더링하는 경우가 될 수 있을 것 같음

 

 

CSR + SSR(Univers Rendering)

  • 요즘엔 이런 두 방식의 장점을 모두 살려 사용하는 것을 유니버셜 렌더링이라고 함
  • 보통 초기 렌더링은 SSR 방식을 사용하고, 다른 페이지로 이동할 때는 CSR 방식을 사용
저작자표시 (새창열림)