NextJS를 공부하는 주된 이유중의 하나가 SSR이다.
프론트엔드 구직 회사들의 채용조건들을 보다보면, NextJS가 있는걸 심심치 않게 볼 수 있다.
왜 그 회사들은 NextJS를 사용할까?
왜 CSR이 아닌 SSR일까?
이 물음에 답하기 전에 CSR과 SSR을 떠올려 보자..
CSR(Client Side Rendering)
클라이언트의 브라우저에서 렌더링을 담당하는 것.
SSR(Server Side Rendering)
서버에서 렌더링을 담당하는 것.
렌더링은 뭐야???
쉽게 말해 유저가 어떤 사이트에 들어 가면 서버에서 해당 사이트의 HTML 파일을 화면에 뿌려준다 이걸 렌더링이라고 한다.
'서버'와 '클라이언트'의 대화를 통해 CSR를 한번 알아보자
1. User가 google(Website)에 접속하면 서버에 요청을 보낸다.
(클 : "안녕 서버야? 나 클라이언트야. 나 google 들어갈래")
2. 서버에서 HTML과 JS를 Client로 보낸다.
(서 : "응 클라이언트야 내가 구글 HTML이랑 JS (+CSS) 보내줄게")
3. Client는 HTML과 JS를 다운로드 받는다.
(클 : "응 고마워 서버야. HTML이랑 JS 다운 받을게!)
4. 다운이 완료된 JS가 실행된다.
(클 : "너가 보내준 HTML이랑 JS로 내가 브라우저에서 렌더링 다할게 넌 쉬고 있어. 데이터 필요할 때 API 요청으로 잠깐 부를게")
*CSR 특징
3번에서 처음 화면에서 렌더링을 위한 HTML, JS를 받기 때문에 시간이 오래걸림.
서버로 그때 그때 렌더링이 이루어지지 않고 클라이언트 브라우저에서 렌더링이 이루어 지기 때문에 SEO가 좋지 않다.
브라우저(클라이언트)에서 렌더링을 진행되기 때문에 서버에서 클라이언트 측으로 전송되는 HTML코드에 별 내용이 없음.
'서버'와 '클라이언트'의 대화를 통해 SSR를 한번 알아보자
1. User가 google(Website)에 접속하면 서버에 요청을 보낸다.
(클 : "안녕 서버야? 나 클라이언트야. 나 google 들어갈래")
2. Server는 레더링을 위한 준비를 한다. 즉시 렌더링 가능한 html파일을 만든다.
(서 : "응 클라이언트야 내가 렌더링을 담당할거야. 그니까 렌더링 가능한 구글 HTML이랑 JS 보내줄게")
3. 파일이 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다.
(클 : "응 고마워 서버야. HTML먼저 잘 받았어! 너가 렌더링 하니까 내가 몸이 가벼워. 파일도 빠르게 화면에 뿌려주네?")
4. 클라이언트가 JS를 다운받는다. 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다.
(클 : "JS도 다운받았어. 이제 상호작용할 수 있겠어!")
6. 브라우저가 Javascript 라이브러리(react)를 실행한다.
(서 : "클라이언트야 이제 JS 라이브러리(react) 불러와서 같이 놀자")
7. JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.
*SSR 특징
4번에서 HTML파일을 먼저 받아 렌더링한다. 그동안 사이트 조작은 안된다.
CSR처럼 한번에 모든 파일을 받아와서 렌더링 하는게 아니기 때문에 처음 화면 렌더링이 빠르다.
서버에서 렌더링이 이루어 지기때문에 SEO가 좋다.
서버에서 매번 렌더링을 해줘야 해서 페이지 렌더링 시 속도가 다소 느리다(CSR은 클라이언트에서 한번에 받아서 받은 걸로 그때 그때 렌더링 해주기 때문에 첫 렌더링만 느리고 이후에는 빠름)
무엇이 더 좋다 할수 없고
각 회사의 서비스에서 어떤부분이 더 필요한지에 따라 CSR를 할지 SSR을 할지 달라질듯 하다...!
참고 블로그 : https://hahahoho5915.tistory.com/52