렌더링은 웹 개발에서 중요한 개념으로, 사용자가 웹 페이지를 요청했을 때 그 페이지가 브라우저에 표시되는 과정을 의미한다. 렌더링 과정은 크게 서버 사이드 렌더링( SSR )과 사이드 렌더링( CSR )으로 나눌 수 있다.
서버 사이드 렌더링( SSR, Server-Side Rendering )
: 서버에서 HTML을 생성한 후 클라이언트( 브라우저 )로 전송하는 방식으로, 클라이언트는 서버에서 받은 완성된 HTML을 그대로 렌더링 한다.
과정
1. 클라이언트 요청 : 사용자가 웹 페이지를 요청한다.
2. 서버 처리 : 서버는 요청을 받아 필요한 데이터를 조회하고, JSP/PHP/ASP.NET 등의 서버 사이드 템플릿 엔진을 사용해
HTML을 생성한다.
3. HTML 전송 : 생성된 HTML을 클라이언트로 전송한다.
4. 브라우저 렌더링 : 브라우저는 받은 HTML을 화면에 렌더링한다.
장점
- SEO( 검색 엔진 최적화 ) 친화적 : 검색 엔진 크롤러가 완성된 HTML을 쉽게 읽고 인덱싱할 수 있다.
- 초기 로딩 속도 : 초기 페이지 로딩 속도가 빠르다.
단점
- 서버 부하 : 서버에서 모든 요청에 대해 HTML을 생성해야 하므로 서버 부하가 증가한다.
- 인터랙티브성 부족 : 초기 로딩 이후의 사용자 상호작용은 추가적인 JavaScript 로직이 필요하다.
예시
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<title>SSR Example</title>
</head>
<body>
<c:set var="user" value="Alice" />
<p>Hello, <c:out value="${user}" />!</p>
</body>
</html>
클라이언트 사이드 렌더링 ( CSR, Client-Side Rendering )
: 서버에서 최소한의 HTML과 JavaScript 파일을 전송하고, 클라이언트에서 JavaScript를 사용해 동적으로 페이지를 구성하는 방식이다.
과정
1. 클라이언트 요청 : 사용자가 웹 페이지를 요청한다.
2. 서버 처리 : 서버는 최소한의 HTML과 JavaScript 파일을 클라이언트로 전송한다.
3. JavaScript 실행 : 클라이언트는 받은 JavaScript를 실행하여 필요한 데이터를 서버로부터 요청하고, 이를 사용해 동적으로 HTML을 생성한다.
4. 브라우저 렌더링 : 브라우저는 JavaScript에 의해 생성된 HTML을 화면에 렌더링한다.
장점
- 인터랙티브성 : 사용자와의 상호작용이 빠르다.
- 서버 부하 감소 :초기 요청 시 서버의 부담이 줄어든다.
단점
- SEO 문제 : 검색 엔진 크롤러가 JavaScript를 실행하지 못하면 페이지 내용을 인덱싱하기 어렵다.
- 초기 로딩 속도 : JavaScript 파일을 다운로드하고 실행하는 데 시간이 걸리기 때문에 초기 로딩 시간이 길어질 수 있다.
예시
<!DOCTYPE html>
<html>
<head>
<title>CSR Example</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script>
const rootElement = document.getElementById('root');
ReactDOM.render(
React.createElement('div', null, 'Hello, Alice!'),
rootElement
);
</script>
</body>
</html>
SSR과 CSR의 선택은 프로젝트의 요구사항, 성능, 사용자 경험 등의 여러 요소를 고려해야한다.
각각의 장단점과 적합한 상황을 이해하여 사용해야 한다.
SSR의 경우 SEO가 매우 중요한 경우 ( 블로그, 뉴스 사이트 등 ) , 초기 로드 시간이 중요한 경우, 서버 리소스가 충분하고 서버 부하를 감당할 수 있는 경우 주로 사용된다.
CSR의 경우 SEO가 크게 중요하지 않은 경우 ( 내부 도구, 관리 대시보드 ) , 사용자 인터페이스가 매우 동적이고 복잡한 경우, 서버 리소스를 절약하고 클라이언트 측에서 더 많은 작업을 처리하고 싶은 경우 주로 사용된다.
'공부할 것 !' 카테고리의 다른 글
| 컴파일 오류와 런타임 오류 이해하기 (0) | 2024.05.27 |
|---|---|
| 메모리 구조 이해하기 (0) | 2024.05.12 |
| 자바 컴파일 과정 이해하기 (0) | 2024.05.12 |
| URL과 URI의 차이점 이해하기 (0) | 2024.05.12 |
| HTTP 상태 코드 이해하기 (0) | 2024.05.12 |