SSR(Server Side Rendering)
Server Side Rendering이라고 하며 한국말로 해석하면 서버쪽에서 실체화해서 유저가 요청을 한다라는 뜻으로 해석된다. 서버에서 완전한 Html을 보내주고 브라우저가 렌더링해서 홈페이지를 보여준다.
장단점
클라이언트가 실행할 내용이 별로 없어서 초기 로딩속도가 빠르다는 장점이 있고, 완전한 Html을 제공하기 때문에 검색엔진이 크롤링을 할 때 따로 JavaScript를 실행시킬 필요가 없어 검색엔진이 데이터를 효율적으로 수집할 수 있다.
하지만, 모든 요청에 대해 서버에서 페이지를 렌더링 해야하므로 서버의 부하가 증가되며, 서버에서 렌더링하는 데 시간이 걸리므로, 서버 응답 시간이 길어질 수 있다.
완전한 Html?
웹 브라우저가 웹 페이지를 표시하기 위해 필요한 모든 콘텐츠들과 필수 Html 요소들을 포함하는것이다.
완전한 Html 파일은 하나의 페이지가 동작하기 위한 모든 구성요소들을 포함시킨다. ex) !DOCTYPE html, html lang="kr", head, body, style, script etc
CSR(Client Side Rendering)
클라이언트에서 렌더링 된다는것은 서버에서 완전한 Html 파일을 받아오는것이 아니라, 간소화된 Html파일과 JavaScript를 받아오는 것이다. JavaScript는 DOM(Document Object Model)을 업데이트 시켜주고, 페이지를 렌더링하는데 사용된다.
장단점
홈페이지가 처음 로딩될 때 모든 JavaScript가 다운로드 되고, 파싱되고, 실행되기 전까지 페이지가 완전히 렌더링 되지 않기 때문에 로딩이 약간 길다.
어플리케이션을 어떻게 설계하느냐에 따라 다르겠지만, 페이지가 처음 로딩된 이후에 페이지 안에서 화면전환을 할때는 필요한 데이터만 가져오면 되고, 페이지 일부분만 JavaScript로 구성된 코드들로 다시 렌더링해주기 때문에 전체 페이지를 다시 새로고침 해야하는 필요가 줄어든다.
간소화된 Html?
모든 필수 태그들이 들어가있지만, 내용은 거의 비워져있는 상태로 DOM을 조작할 JavaScript파일이 필수적으로 들어가야한다.
사용 용어 정리
렌더링?
우리가 웹 페이지를 볼 때 구성되는 구성요소들은 Html, Css, JavaScript로 구성되어있다. 이 기술들로 페이지를 구성하고 표시하는 과정을 렌더링이라고 한다.
DOM(Document Object Model) 문서 객체 모델?
DOM은 Html, XML등의 문서의 구조화된 표현을 나타내는 인터페이스이다. 이를 통해 JavaScript와 같은 프로그래밍 언어가 문서의 구조, 스타일, 내용을 동적으로 조작할 수 있게 한다.
여러가지 특징이 있는데 구조적인 특징으로는 트리구조이고, 기능적인 특징으로는 문서조작, 이벤트 처리, 문서 네비게이션(문서 내에서 자기자신 탐색가능)의 기능이 있으며 DOM은 표준화된 인터페이스이기 때문에 다양한 브라우저에서 사용할 수 있다는 특징이 있다.
크롤링?
검색엔진이나 다른 웹 서비스가 인터넷을 순회하여 웹 페이지의 정보를 수집하는 작업을 말한다.
검색엔진?
인터넷 상에서 사용자가 특정 키워드로 검색할 때 관련 정보를 찾아주는 소프트웨어시스템.
