Rendering
Rendering이란 Javascript 코드를 브라우저가 이해할 수 있는 HTML로 바꾸는 것을 말한다.
Client Side Rendering (CSR)
Client Side Rendering 방식은 브라우저가 rendering 작업을 하는 방식인데
이는 사용자 브라우저인 client단에서 모든 rendering 작업을 수행하고 client가 사용자 브라우저에 UI를 구축한다는 말이다.
모든 rendering, 즉 모든 UI 구축 작업이 client 측에서 일어나며 client는 JavaScript를 로드하고 그 후에 JavaScript가 UI를 빌드한다.
CSR 방식을 사용하는 대표적인 라이브러리는 React가 있다.
이 방식의 단점은 크게 두 가지가 있다.
1. 페이지 로딩 시간의 연장
브라우저를 새로고침했을 때마다 브라우저가 모든 JavaScript 파일을 다운로드하고 실행시키기 까지 빈화면이 보여진다. 이유는 HTML에 실제로 UI가 없어서 그런데 이때 UI가 보여주기까지의 시간이 길어지면 그만큼 사용자가 페이지를 기다리는 시간이 길어진다. (JavaScript를 기다려야함)
2. 검색 엔진 최적화(SEO)의 어려움
위에서 말했듯이 원래 페이지의 HTML은 비어있기 때문에 검색 엔진(Google 등)이 보는 웹사이트는 비어있게 되어 SEO에 취약하다.
*SEO : 웹사이트가 유기적인(무료) 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정
Server Side Rendering (SSR)
Server Side Rendering 방식을 사용한 페이지의 소스코드를 보면 페이지의 내용들이 모두 실제로 브라우저 코드에 있다. 이 말은 즉 브라우저가 이미 화면에 표시할 HTML을 다 갖고 있기 때문에 JavaScript가 로드될 때까지 기다릴 필요가 없다는 뜻이다.
모든 컴포넌트와 페이지들은
1. 먼저 backend에서 render된다.
2. HTML로 변환된다.
3. HTML은 브라우저에 넘겨진다. (JavaScript가 올 때까지 기다리지 않아도 된다.)
와 같은 과정을 통해 사용자에게 보여지게 된다.
SSR 방식을 사용하는 대표적인 라이브러리는 Next.js가 있다.
Next.js application의 모든 page안의 모든 component들은 Next.js가 그것들을 우선 server에서 render한다.
예를 들어 사용자가 /about-us로 접속하면 사용자에게 어떠한 HTML을 주기 전에 Next.js는 server, 즉 backend에서 application을 render한다. 사용자는 Next.js가 backend에서 생성한 HTML을 보기 때문에 어떤 페이지에 접속해도 비어있는 HTML을 볼 수 없다.