hongjunland

Welcome

1 분 소요

학습 목표

  • SSR과 CSR의 특징과 장단점을 설명할 수 있다.
  • SEO에 대해 설명할 수 있다.
  • next.js가 필요하게된 계기와 특징에 대해서 설명할 수 있다.

1. SSR vs CSR

1.1 SSR(Server Side Rendering)

ssr

  • 과거부터 현재까지, 많은 웹 어플리케이션들은 페이지를 이동시 서버에 새로운 페이지에 대한 요청을 하는 SSR 방식을 채택

  • 서버에서 렌더링을 마치고, Data가 결합된 HTML파일을 내려주는 방식.
  • 새로운 페이지로 이동할 때마다 서버에 요청해서 페이지를 받아야 하기 때문에, 받아오는 시간동안 깜빡 거리는 현상을 마주할 수 있다.

1.2 CSR(Client Side Rendering)

csr

  • SPA기법이 대두 되면서, 각광 받기 시작.
  • 최초 요청시에만 HTML같은 각종 리소스를 받고 이후에는 데이터만 요청하고, 자바스크립트로 뷰를 컨트롤.
  • 초기 요청때 많은 리소스를 요청하기 때문에 렌더링 속도가 비교적 느린편.
  • 최초 이후에는 빠른 페이지 전환 속도와 더 나은 사용자 경험을 제공 함.
  • 보안에 취약함 - 쿠키나 localstorage에서 사용자의 정보를 저장해야해서 XSS 공격에 취약.

1.4 비교 요약

구분 렌더링 속도 페이지 전환 속도 생산성 SEO 성능 사용자 정보
SSR 빠름 느림 낮음 일관됨 서버 Session
CSR 느림 빠름 비교적 높음 대체로 낮음 Cookie or localStorage

2. SEO(Search Engine Optimization) 문제

  • 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품잘과 양을 개선하는 과정.
  • React나 Vue를 사용시, CSR과 SSR중에 선택하게 되는 요소.
  • 많은 크롤러들이 자바스크립트를 지원하지 않기 때문에, CSR은 SEO가 잘 되지 않는 경우가 많음.(구글 제외)

3. Next.js

3.1 탄생

  • CSR의 대표적인 문제인 초기 렌더링과, SEO문제의 취약성을 해소하고자 React에서 SSR을 구현 하게 되는 상황이 발생
  • React로 SSR방식 개발의 생산성 향상을 위한 Next.js라는 프레임워크가 탄생.
  • SSR의 단점인 불필요한 부분까지 렌더링, CSR의 단점인 초기 렌더링 속도 및 SEO의 취약성의 해결.

3.2 작동 원리

  • 초기에 사용자가 서버에 페이지 접속 요청시, SSR방식으로 렌더링 될 HTML을 보냄
  • 브라우저에서 JavaScript를 다운로드하고, React를 실행
  • 사용자, 페이지가 서로 상호작용해서 다른 페이지 이동시, CSR방식으로 브라우저에서 처리

3.3 주요 기능

  • 직관적인 페이지 기반 라우팅 시스템(동적 경로 지원)
  • 사전 렌더링, 정적 생성
  • 코드 분할 자동화
  • 내장 CSS 및 Sass 지원 및 모든 CSS-in-JS라이브러리 지원
  • Fast Refresh을 지원하는 개발 환경
  • Serverless Functions로 API 엔드포인트를 빌드하기 위한 API 경로

4. 정리

  • SSR의 단점은 페이지 전환 속도 및 리소스 낭비
  • CSR로 보완하고자 했지만 SEO문제가 발생
  • 기존 프레임워크로 SSR로 개발하는데 있어서 생산성이 부족
  • Next.js의 탄생으로 React개발자들의 생산성 비약적으로 상승

참고