[Dev] CSR(Client Side Rendering) : SSR(Server Side Rendering)

랜더링이란?

렌더링은 코드를 브라우저가 이해할 수 있는 HTML로 변환하는 과정을 의미한다.
쉽게 말해, 개발자가 작성한 코드를 사용자가 볼 수 있는 웹 페이지로 바꾸어 주는것을 의미!

CSR(Client Side Rendering)

약자 그대로 해석하면 된다, 렌더링이 클라이언트(브라우저)에서 이루어지는 방식이다.
즉, 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내줌.

create-react-app 으로 생성한 보통의 react 파일은 브라우저 단에서 모든 rendering 작업을 수행해야 한다는 뜻

이 방식에는 단점이 있는데

실제로 유저가 페이지에 맨 처음 접속한 시점에는 빈 화면이 나온다..!
왜냐하면 브라우저의 JavaScript 엔진에 의해 rendering 되는데 시간이 걸리기때문이다.

새로고침시, 흰색 화면으로 깜빡이는 것은 정말 빈 화면 이후 코드가 랜더링 되기 때문에 깜빡이는것처럼 보인다.

-> 그렇다면 브라우저의 JavaScript 엔진을 비활성화 시킨다면?

잘 나오던 React 기반 프로젝트 화면이 JavaScript를 비활성화 하니 흰색 빈 화면만 랜더링된다.

물론 JavaScript를 비활성화 해두고 브라우저를 사용하는 사람은 없겠지만..

데이터 상태가 좋지않은 휴대폰으로 CSR 방식의 사이트로 접속한다면 모든 JavaScript 파일이 다운되고 랜더링되기까지 사용자는 지루한 빈 화면을 훨씬 오래 보게 될 것이다.

이상적인 웹사이트는 접속한 즉시 사용자에게 화면과 정보를 제공하는것이 일반적이다.

두번째 단점은 SEO 검색 엔진 최적화이다.

검색 엔진은 서버에서 바로바로 제공하는 HTML을 선호함..

만약 내가 열심히 만든 사이트가 구글에 노출되기를 바란다면 구글은 페이지의 JavaScript 를 실행시켜 내용을 찾는것보다, 페이지의 HTML에 유용한 실제 데이터가 있는 경우를 더 확실하게 인식한다.

구글 검색엔진이 보는 열심히 만든 내 웹사이트는 비어있는 사이트로 인식할 확률이 높아 노출되기 어렵다.

3번을 보면 클라이언트는 HTML과 JS를 다운로드 받는데, 그동안 유저는 아무것도 볼 수 없다고 나와있다.

SSR (Server Side Rendering)

서버에서 미리 렌더링된 HTML을 클라이언트에 전달하는 방식이다.

SSR은 이미 화면에 표시할 HTML을 보내준다. > 브라우저단에서 JavaScript가 로드될 때 까지 기다릴 필요가 없다.

그렇다면 CSR 방식의 React 가 아닌 기본적으로 SSR인 Next.js기반 웹사이트는 어떨까

사용자는 브라우저의 JavaScript가 비활성화되어 있어도
서버에서 랜더링된 HTML파일을 보내주기 때문에 정상적으로 화면을 볼 수 있을것이다.

예상대로 JavaScript를 비활성화 해도 화면이 잘 랜더링된것을 볼 수 있다.

* next.js의 모든 page 안의 component 들은 next.js가 우선 server에서 render 한다

처음에 사용자가 페이지에 도착했을 때, UI 를 빌드하는 데에 JavaScript가 필요하지 않다는 점은 매우 큰 장점이다.

다시 3번을 보면 CSR 과 다르게 클라이언트에 전달되는 순간, 서버에서 보내준 HTML은 즉시 렌더링 된다.
그러나 아직 JavaScript가 읽히기 전이기 때문에 사이트 자체는 조작 불가능하다.

CSR vs SSR

페이지 로딩 시간

첫 페이지 로딩:

추가 페이지 로딩:

SEO 대응

자원 사용량

티스토리툴바