CSR과 SSR 각각의 개념을 이해하고
둘의 차이를 분석한다.
서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정
[ 정의 ] - 최초 한 번 페이지를 불러온 이후에는 데이터만 변경하여 사용할 수 있는 웹 어플리케이션
[ 과거의 웹 사이트 ] - 전통적인 웹 페이지는 데이터의 변화가 있을 때마다 웹 페이지 전체를 새로 불러왔다.
예를 들어 블로그에 좋아요 하나를 달았을 뿐인데 완전히 새로운 페이지를 불러오는 것이다.
현대에 이르러 점차 웹 사이트가 고도화 되면서 한 페이지에서 다루는 데이터의 용량이 방대해졌고, 약간의 변화에도 완전히 새로운 페이지를 불러오는 것은 점점 버거워졌다.
[ SPA의 등장 ] - 이러한 문제를 해결하기 위해 등장한 것이 바로 SPA(Single Page Application)이다. SPA는 전통적인 웹 페이지와는 다르게 뭔가를 클릭하거나 스크롤 하는 등의 상호작용이 일어난다면, 최소한의 요소만 변경시킨다.
페이지 변경이 일어났다고 보이는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.
CSR 과정
클라이언트 사이드 렌더링(CSR)은 Javascript를 사용하여 브라우저에서 페이지를 직접 렌더링하는 것을 의미한다.
모든 로직은 서버가 아닌 클라이언트에서 처리된다.
점점 더 복잡해지는 웹 페이지를 구현하기 위해 전통적인 방식 보다는 CSR로 웹을 구현하는 경우가 많아졌다. > React / Vue / Angular
CSR은 다음과 같은 과정을 거친다.
- 클라이언트의 요청에 의해 서버는 html 파일을 클라이언트에 전송한다.
- body의 내부에는 script tag만 들어있다.
- 기본적으로 빈 html 파일이기 때문에 순간적으로 빈 화면이 출력된다.
- 클라이언트는 서버에 app.js를 요청하고 서버는 이를 보내준다.
서버 사이드 렌더링(SSR)은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 보여주는 방식이다.
Next.js는 CSR 방식인 React를 SSR방식으로 구동하기 쉽게 만들어주는 프레임 워크이다.
-> SSR의 장점과 CSR의 장점을 결합