💋 Clienct-Side Rendering
✔️ 개념
- 브라우저가 UI 만드는 작업을 ‘모두’ 담당한다.
- 페이지의 초기 로딩을 위해 서버가 제공하는 정적인 HTML, CSS 및 JavaScript 파일을 받아오고, 이후에 클라이언트 측에서 동적으로 페이지를 렌더링하는 방식
- 초기 페이지는 정적 콘텐츠만을 담은 HTML 파일을 받아와서 렌더링되며, 이후 JavaScript 파일을 로드하고 실행하여 동적 데이터를 가져오고 화면을 갱신한다.
✔️ React의 CSR
- React를 사용해서 만든 애플리케이션은 CSR 방식을 사용한다.
- 브라우저는 실질적으로 비어있는
div만 존재하는 HTML을 받아 초기에는 빈 화면이지만, 자바스크립트를 해석해서 모든 user view를 만들어낸다. - 브라우저에 자바스크립트 비활성화하기를 설정하면, React 앱은 빈 화면만 띄우게 되는 것으로 확인할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<!-- React 애플리케이션의 빈 화면 -->
<div id="root"></div>
<!-- React 애플리케이션은 JavaScript 파일을 해석해 view를 생성한다. -->
<script src="path/to/your/bundle.js"></script>
</body>
</html>
- React의 렌더링 순서
- root html (빈 화면) ⇒ React JS 로딩 ⇒ 초기 화면 출력 및 스크립트 동작
✔️ 검색 엔진 최적화(SEO)가 어렵다
CSR은 초기 페이지에는 적은 양의 정적 콘텐츠만 포함하고, 동적 데이터는 JavaScript를 통해 불러오기 때문에 검색 엔진이 크롤링하는 데 어려움을 겪을 수 있다.
이 문제를 해결하기 위해 서버 사이드 렌더링(SSR)이나 프리렌더링 등의 기술을 사용할 수 있다.
✔️ 브라우저의 성능에 의존적이다.
모든 로직이 브라우저에서 실행되므로, 브라우저의 성능에 의존한다. 특히, 느린 네트워크 연결이나 낮은 성능의 장치에서는 초기 로딩 시간이 길어질 수 있다.
또한 CSR은 클라이언트 측에서 로직을 처리하기 때문에 브라우저의 자원(CPU, 메모리) 소비도 고려해야 한다.
특히, 초기 로딩 시에 모든 자원을 다운로드하고 렌더링해야 하므로, 느린 네트워크 또는 낮은 성능의 기기에서는 사용자 경험이 저하될 수 있다.
CSR은 특히 대규모의 동적 웹 애플리케이션에서 유용하지만, SEO 및 초기 로딩 속도 등의 고려 사항이 있으므로 상황에 맞게 SSR과 혼합해서 사용하는 것이 일반적이다.
💋 Server-Side Rendering
✔️ 개념
- 서버 측에서 페이지의 초기 렌더링을 수행하고, 클라이언트에 완전한 HTML을 전달한다.
- 사용자가 페이지에 접근하면 서버에서 필요한 데이터를 가져와서 HTML을 생성하고, 이를 클라이언트로 전송한다.
✔️ Next의 SSR
- Next.js는 Server Side Rendering (SSR)을 기본적으로 지원하는 React 프레임워크다.
Next.js에서 SSR을 구현하려면 pages 디렉토리 안에 페이지 파일을 생성한다. 이 페이지 파일은 React 컴포넌트를 포함하고, 서버 및 클라이언트에서 공통으로 사용된다.
// 예: pages/index.js
import React from 'react';
const HomePage = ({ data }) => {
return (
<div>
<h1>Hello, Next.js!</h1>
<p>{data}</p>
</div>
);
};
export async function getServerSideProps() {
// 서버 측에서 실행되는 코드
const data = 'Data from Server';
return {
props: { data },
};
}
export default HomePage;
브라우저는 아래와 비슷한 형태로, 모든 HTML 컴포넌트가 포함된 HTML 파일을 받게 된다.
- Next의 렌더링 순서
- pre-render된 정적 페이지의 초기 화면 HTML (스크립트는 동작하지 않음) ⇒ React JS 로딩 ⇒ 동적 초기 화면 렌더링 (스크립트 동작함)
✔️ 검색 엔진 최적화(SEO)를 적용할 수 있다.
SSR은 초기 로딩 시에 서버에서 완전한 HTML을 생성하므로 검색 엔진이 콘텐츠를 크롤링하고 인덱싱할 수 있다.
✔️ 초기 로딩 성능 개선
사용자는 초기 페이지 로딩 시에 이미 서버에서 렌더링된 HTML을 받아볼 수 있으므로, CSR에 비해 초기 로딩 속도가 빠르다. 또한 스크립트를 불러오는데 실패하더라도, HTML 컴포넌트는 사용자에게 보여줄 수 있어서 사용자 경험 향상에도 좋은 영향을 줄 수 있다.
✔️ 서버 부하 증가
SSR은 매 요청마다 서버에서 페이지를 렌더링하므로, 서버 부하가 증가할 수 있다. 캐싱 등을 통해 이를 완화할 수 있지만, 트래픽이 많은 경우 주의해 사용해야 한다.
이를 완화하기 위해 캐싱 기술을 사용하거나 CDN(Content Delivery Network)을 활용하여 전 세계에 분산된 서버에서 콘텐츠를 제공할 수 있다.
✔️ 보안 강화
중요한 로직이나 데이터를 클라이언트에 노출하지 않아 보안 강화에 도움이 되기도 한다.
도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟
비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!
'WEB' 카테고리의 다른 글
| [WEB] 웹 서비스 구조와 발전 과정 (0) | 2023.11.29 |
|---|---|
| [WEB] JWT Token를 저장할 가장 안전한 곳은? Session Storage VS Local Storage VS Cookie (2) | 2023.11.09 |
