본문 바로가기

카테고리 없음

SSR, CSR

서버사이드 랜더링의 기초

구글에 사용자가 접속한다고 하다.
주소를 치고 들어간다. (서버에서 요청을함)
요청받은 서버는 응답하고 브라우저가 랜더링된 화면을 우리에게 보여준다. (보통의 화면)
그러나 이 과정에서 사실 서버에서 html을 받아오는데, 그걸 브라우저가 랜더링 해주는 것이다.

CSR
장점
페이지이동이 속도 좋다.
단점
처음 자바스크립트 파일을 다 불러오기 때문에 초기로딩이 느리다.
페이지 캐싱이 잘안된다.
검색엔진 최적화가 잘 안됨.
(처음 요청시 blank페이지가 나오기 때문에)
SPA
리액트, 뷰, 앵귤러가 대표적이다.

두가지의 장점을 섞을순 없을까? -> Isomorphic App
Next.js
서버사이드 랜더링을 리액트로 가능
(코드는 react, 서버에서는 html를 내어준다)
Ssg 기능 첫로딩 속도올려준다.
CSR 의 페이지 이동 속도의 장점
첫 요청시 SSR로 처음 html받아오고 (링크 같은거 그다음 눌렀을때) 그다음은 CSR로 처리 (초기 로딩 빠르게하기 + 페이지 이동 빠르게하기 = 각각 장점만 쏙빼온 웹사이트 구현가능)