웹 페이지 렌더링 방식

 

렌더링이란?

 

웹 페이지에 접속하는 과정에서 링크를 클릭해 원하는 곳으로 이동할 때 HTML,CSS,JS등 개발자가 작성한 문서를 서버에 응답받아 실시간으로 브라우저에 그려지는 과정을 렌더링 과정이라고 말할수 있을 것 같다.

 

웹 페이지 렌더링 방식으로는 크게 CSR, SSR, SSG 로 나눌수 있다. 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 정리해보려한다.

 

클라이언트사이드 렌더링(Client-side Rendering)

— 웹 브라우저에서 자바스크립트로 HTML을 만드는 것

리액트로 할 수 있는 가장 기본적인 방식의 렌더링이다.

 

리액트로 작성한 코드는 자바스크립트로 변환 (트랜스파일링)이 가능한데, 클라이언트사이드 렌더링은 자바스크립트로 변환된 리액트 코드를 웹 브라우저에서 실행해서 HTML을 만드는 걸 말한다.

 

최초의 HTML파일을 받는 것을 제외하고 페이지 렌더링을 위한 별도의 HTTP 통신을 할 필요가 없기때문에,

서버의 요청없이 클라이언트에서 라우팅을 담당하기 때문에 후속 페이지 로드 시간이 훨신 빠르고 부드럽다.

 

서버는 오직 Ajax를 통해 필요한 데이터를 주고 받는 역할만 수행한다.

 

자바스크립트의 번들의 크기의 영향을 많이 받기 때문에 코드분할을 고려해야한고, 브라우저에서 HTML을 컴파일하기 전에 기본 HTML, CSS 및 모든 필수 스크립트를 로드하기 때문에 초기 페이지 로드 시간이 SSR에 비해 느리다.

 

서버사이드 렌더링(Server-side Rendering)

— 서버에서 HTML을 만들고 리스폰스로 보내주는 것

백엔드 서버에서 리퀘스트를 받으면 상황에 맞는 HTML을 만들어서 리스폰스로 보내주는 방식을 '서버사이드 렌더링'이라고 한다. 즉 서버에서 HTML을 만든다는 것이다.

리액트에서도 서버사이드 렌더링을 할 수 있는 기능들을 제공하는데, 이렇게 하면 이미 렌더링 된 것이 웹 브라우저에 도착하니까 훨씬 빨리 화면을 띄워줄 수 있고, 검색 엔진에서 좋은 점수를 받아서 검색했을 때 사이트가 잘 노출될 수 있다는 장점이 있다.

 

렌더링이 준비된 HTML 파일을 브라우저에서 로드하기 때문에 첫 페이지 로딩이 빨라지는 장점이 있다.

 

서버에서 매번 페이지를 새로 렌더링하기 때문에 화면이 부드럽지 않고(페이지 이동마다 새로고침 현상),  서버 부하가 생길 수 있으며, 서버 비용 또한 많이 든다.

 

 

대표적인 CSR과 SSR을 정리해보았는데 정리된 내용을 보면 느꼈다시피 CSR과 SSR은 장점과 단점이 서로 맞물려 있다.

CSR의 부족한 점은 SSR이 강하고 반대의 경우도 같다는 것이다. 그래서 이 부분을 완벽하게 해결할 순 없지만 어느정도 가운데 접점에 해당하는 방식이 아래의 방식이다.

 

정적 사이트 생성(Static Site Generation)

— 미리 HTML 파일을 만들어서 서버를 배포하는 것

미리 HTML 파일로 만들어서 서버로 배포하는 방법을 사용하는 방식을 '정적 사이트 생성'이라고 한다.

서버에서는 리퀘스트가 들어오면 HTML 파일을 읽어서 리스폰스로 보내주는 것이다.

 

서버에서 렌더링 하는 것도 좋지만, 데이터가 거의 바뀌지 않을때는 매번 새로 만드는 것이 낭비일 것이기 때문에 이러한 상황일 때 사용하는 것이 좋다.

'정적 사이트 생성'에서 정적이라는 말의 의미는 HTML을 파일로 만든다는 것인데, 개발자가 새로 배포하지 않는다면 서버에서 보내주는 HTML이 달라지지 않는다는 의미이다. 쉽게생각해서 리액트 코드로 HTML 파일을 만드는 것.

물론 자바스크립트를 쓸 수 있기 때문에 정적으로 생성된 사이트에서도 동적인 데이터를 가져와 페이지를 보여주는 것도 가능하다.