저번 수업 중 강사님이 서버사이드 렌더링과 클라이언트 사이드 렌더링에 대한 차이점에 대해
간략히 짚고 넘어가 주셨다. 그 이후에 추가로 더 개념, 차이점과 장단점을 정리하면 좋을 것 같아서
이번 포스팅 주제로 서버사이드 렌더링과 클라이언트 사이드 렌더링을 정리해보려 한다.
우선 뒤에 반복되는 렌더링의 뜻은 무엇일까?
렌더링이란,
서버로부터 요청해서 받아 온 문서들(html, css, js) 브라우저 화면에 나타내는 것을 의미한다.
서버사이드 렌더링이란?
전통적인 방식으로 클라이언트 측에서 서버 측으로 요청을 보내면 서버 측에서 응답하여 클라이언트 측에 화면이 보인다.
클라이언트 측에서 페이지를 요청할 때마다 서버 측에서 전체 페이지를 새롭게 응답하여 리로딩(새로고침)이 일어난다
모든 콘텐츠가 담겨있는 html을 준비한 후 클라이언트 측으로 넘겨주기 때문에 초기 로딩 속도가 빠르고 검색엔진 최적화에 유리하다.
이미 응답된 같은 페이지의 한 부분만 새롭게 불러오고 싶어도, 전체 페이지를 함께 로딩해야 하기 때문에 트래픽이 쌓이게 된다.
장점
1. SEO(검색엔진 최적화)
2. 렌더링 속도가 빨라 사용자가 기다리는 로딩 시간이 덜 하다
단점
1. 매 요청마다 새로운 페이지를 렌더링 하기 때문에 화면 깜빡거림 발생
2. 트래픽이 쌓이면서 CSR에 비해 서버 부하가 발생
클라이언트 사이드 렌더링이란?
최초 요청 시, 서버 측에서 클라이언트 측으로 빈 html 파일만을 전송하고 필요한 데이터를 서버 측으로부터 받아와
결합된 내용을 html 문서에 나타낸다. (html 안의 ~. js로 된 자바스크립트 파일을 서버로부터 다운)
모든 문서에 대한 처리를 서버가 하는 서버사이드 렌더링과는 달리 자바스크립트 DOM요소 조작을 통해
브라우저에서 페이지를 직접 렌더링 하며 서버의 일을 대신 처리할 수 있도록 한다.
처음 요청 시, 한 페이지만 불러오고 그 이후에 요청되는 페이지에 대해선 변경사항이 있는 그 부분만! 추가적으로 불러오기 때문에 전체 페이지를 계속 읽어오는 것보다 빠른 속도를 기대할 수 있다
하지만 클라이언트사이드렌더링이 결코 쉽지 않다. 자바스크립트 코드의 양이 방대하게 늘어나기 때문이다
이를 개발자 혼자서 하기에도 쉽지않고 그렇다고 여러 명이서 하자니 코드가 꼬일 가능성이 높다
(그래서 체계적인 틀이 필요하고 이를 도와주는 것이 바로 자바스크립트 프레임워크 중 하나인 리액트!)
장점
1. 초기 로딩 속도는 서버사이드 렌더링보다 느리지만 이후에 페이지 요청 시
모든 페이지가 아닌 필요한 부분만 새로 요청하여 속도가 빠르다
2. 페이지 깜빡임 없이 부드럽게 전환이 가능
3. 1번에서 설명한 것처럼 필요한 부분만 변경된 사항으로 반영하기 때문에 비용 측면에서 효율적
4. 서버측 부담이 적다 (복잡한 마크업을 다 출력할 필요 없음)
단점
1. SEO의 어려움 (클라이언트에서 서버에 데이터 요청하기 전 까진 html이 비어져있기 때문)
2. 필요한 데이터를 요청해서 빈 html 파일에 결합해야 하기 때문에 완료 시점이 늦어져 초기 로딩 속도가 서버사이드 렌더링보다 느림
+ 보안 문제
서버사이드 렌더링에선 사용자에 대한 정보를 서버 측에서 세션으로 관리하지만
클라이언트 사이드 렌더링에선 브라우저의 쿠키, 로컬 스토리지에 정보를 저장한다
이는 XSS(Cross-Site Scripting) 공격에 대한 취약점을 드러내어 보안 이슈가 발생할 수 있다
위의 개념들을 정리하면서 가장 많이 봤던 개념들이 SPA, MPA, js Dom tree, SSG와 Next.js였다
여기서 Next.js는 리액트를 더욱 편리하게 사용할 수 있게 도와주는 프레임워크이며
서버사이드 렌더링을 기본으로 하지만 클라이언트 사이드 렌더링이나 SSG를 목적에 맞게 사용할 수 있도록
지원한다고 한다. 8월쯤에 리액트를 배우고 그 이후에 Next.js에 대해서도 조금씩 공부해야겠다
Ref.
https://dsc-sookmyung.tistory.com/96
https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/