React typescript를 사용하는 프로젝트에서 반응형 관련 hook을 만들었다.
피그마를 보니 뷰가 5가지나 있어서 .. px 조건처리를 해주어야 했다.
효과적인 hook을 만들기 위해 구글링을 하다가 ssr일 때 따로 처리해주면 좋다고 해서 ssr이 머였지 ..? 하다가 이참에 공부하면서 정리해보려고 한다.
SSR
Server Side Rendering의 약자다.
즉, 서버에서 렌더링을 작업하는 것이다. 서버에서 html을 생성하여 클라이언트로 전송하는 방식이다. 동작 과정은 다음과 같다!!
요청 발생
사용자가 url에 접근하면 브라우저가 서버에 요청을 보낸다.
서버에서 html 생성
서버는 요청을 처리하면서 React 컴포넌트를 실행하여 html을 생성한다.
html 전송
서버에서 생성된 HTML을 클라이언트로 전송한다.
클라이언트에서 React 활성화
브라우저가 HTML을 받아 화면에 표시한 후, React가 클라이언트에서 “Hydration” 과정을 통해 상호작용을 활성화한다.
SSR 환경에서는 주로 Next.js 프레임워크를 사용한다.
Next.js는 React 기반의 SSR 및 정적 사이트 생성(SSG) 프레임워크로 SEO에 최적화된 웹 애플리케이션을 제작할 때 주로 사용된다.
SSR의 장점
빠른 초기 로드
브라우저가 완성된 HTML을 바로 받아서 렌더링하므로 초기 로딩 속도가 빠르다.
SEO 최적화
검색 엔진이 완성된 HTML을 읽을 수 있어, 검색 엔진 최적화(SEO)에 유리하다.
저사양 디바이스 지원
렌더링 작업을 서버에서 처리하므로, 클라이언트의 부담이 줄어든다.
SSR의 단점
서버 부하 증가
서버가 모든 요청에 대해 HTML을 생성해야 하므로 부하가 크다.
복잡성 증가
SSR과 클라이언트 사이드의 동작을 조화롭게 설계해야 하므로 코드가 복잡해질 수 있다.
데이터 전송 속도
서버에서 HTML을 생성하고 전송하는 데 시간이 걸릴 수 있다.
SSR을 언제 쓰는가?
1. SEO가 중요한 웹사이트: 블로그, 뉴스 사이트 등
2. 빠른 초기 화면 로드가 필요한 경우
3. 데이터가 자주 변경되는 경우: SSR은 매 요청 시 HTML을 생성하므로, 최신 데이터를 표시해야 하는 경우 적합하다.
SSR은 브라우저 객체(Window, document 등)를 바로 사용할 수 없기에 이를 해결하기 위한 코딩 방식이 필요하다.
typeof window === "undefined"를 통해서 ssr환경과 클라이언트 환경을 구분해 적절히 처리할 수 있다.
CSR
Client Side Rendering의 약자다.
초기 요청
사용자가 웹사이트에 접속하면 브라우저는 HTML 파일을 요청한다.
이 HTML 파일에는 주로 <div id="root"></div>와 같은 빈 컨테이너와 함께, JavaScript 파일을 로드하는 <script> 태그만 포함되어있다.
js 로드 및 실행
브라우저는 서버로부터 전달받은 JavaScript 파일을 다운로드하고 실행한다.
React, Vue와 같은 라이브러리가 클라이언트에서 DOM을 생성하고, 화면을 구성한다.
동작
이후에는 사용자의 상호작용(클릭, 스크롤 등)에 따라 브라우저가 동적으로 UI를 업데이트한다.
페이지 전환 시, 브라우저는 전체 페이지를 다시 로드하지 않고, 필요한 데이터만 요청하여 UI를 갱신한다. 이를 SPA라고 하는 것이다!
csr 장점
빠른 사용자 경험: 첫 로드 후, 페이지 전환이나 상호작용이 서버 요청 없이도 즉시 반응하여 빠르게 처리된다.
풍부한 UI: 클라이언트 측에서 로직을 실행하므로 더 풍부한 사용자 경험을 제공할 수 있다.
API와의 결합: 프론트엔드와 백엔드가 분리되어 API 통신을 통해 데이터를 동적으로 처리할 수 있다.
csr 단점
SEO 문제: 초기 HTML이 빈 컨테이너만 포함하므로, 크롤러가 제대로 콘텐츠를 인덱싱하지 못할 수 있다.
초기 로드 느림: 초기 페이지 로드 시, 브라우저가 JavaScript 파일을 다운로드하고 실행해야 하므로 초기 로드 속도가 느려질 수 있다.
자바스크립트 의존성: 클라이언트가 JavaScript를 비활성화한 경우, 페이지가 정상적으로 동작하지 않을 있다.
CSR을 사용하는 사례는 다음과 같다.
SPA: 페이지 전환이 자주 발생하고, 동적인 사용자 상호작용이 필요한 웹앱
SEO 중요도가 낮은 애플리케이션
CSR을 언제 사용하는가?
- SEO가 덜 중요하고, 동적인 사용자 경험이 중요한 경우
- 사용자가 자주 상호작용하는 웹 애플리케이션
- 백엔드와의 데이터 교환이 빈번한 경우
이미지 출처
