렌더링(Rendering): 우리가 만든 코드를 HTML로 변환하여 브라우저에 출력하는 과정
예시:
// 우리가 만든 코드
function Welcome() {
return <h1>안녕하세요</h1>;
}
➡ 렌더링 결과:
<!-- 렌더링이 이루어진 후, 브라우저 출력 결과 -->
<h1>안녕하세요</h1>
렌더링이 **클라이언트(브라우저)**에서 이루어지면 CSR (Client Side Rendering),
서버에서 이루어지면 **SSR (Server Side Rendering)**이라고 한다.
<aside> 💡
결국 렌더링이란 웹 페이지의 HTML 콘텐츠를 최종적으로 만들어내는 과정이다.
렌더링 방식이란 사용자가 브라우저에서 실제로 보게 될 HTML 콘텐츠를 누가, 언제, 어디서 만들어 내는지에 따라서 나뉜다고 볼 수 있다.
</aside>
클라이언트 측에서 페이지를 렌더링하는 방식이다. 대부분의 웹 프레임워크(React나 Angular 등)에서 기본적으로 지원하는 기능이다.
일반적으로 **단일 페이지 애플리케이션(SPA)**과 사용자 상호작용이 많은 애플리케이션(게임 등) 및 실시간 채팅 애플리케이션과 같이 동적인 콘텐츠가 있는 애플리케이션에 적합하다.
기본적으로 웹 브라우저는 처음에 빈 HTML 파일을 로드한다. 그 후에 로드되는 자바스크립트와 CSS는 웹 브라우저에서 전체 페이지를 렌더링하는 역할을 한다.
React 애플리케이션이 서버에서 클라이언트로 전송될 때, 전송되는 유일한 HTML은 페이지 정보가 없는 루트 HTML 페이지이다. 예를 들어, "create-react-app"을 실행하면 index.html이 전송된다.
Javascript가 클라이언트로 전송되기 전까지는 관련 항목이 페이지에 실제로 나타나지 않는다. 따라서 브라우저에서 Javascript를 비활성화하면 페이지가 빈 화면으로만 표시된다.
(루트 파일 비어 있음 → 정보 X → 검색 엔진이 내용 읽지 못함 → SEO 최적화에 불리)
React 앱이 브라우저로 전송되는 방식
초기 HTML을 받아온 후 JavaScript를 다운로드하고 필요한 데이터 및 DOM 조작을 통해 화면을 그린 후에야 페이지를 나타낸다. (초기 로딩 오래 걸림)
런타임(웹 브라우저)에 이르러서야 HTML에 컴포넌트와 스타일이 적용이 된다. (브라우저에서 렌더링을 진행하기 때문)