렌더링

✅ 렌더링(Rendering)이란?

**렌더링(Rendering)**은 웹 페이지를 화면에 표시하는 과정을 의미해.
쉽게 말하면, 브라우저가 HTML, CSS, JavaScript를 해석해서 우리가 보는 웹 페이지로 변환하는 과정

---

🎨 렌더링의 종류

렌더링 방식에는 크게 **CSR(Client-Side Rendering)**과 SSR(Server-Side Rendering) 두 가지가 있다.

1️⃣ 클라이언트 사이드 렌더링 (CSR)

• 웹 브라우저(클라이언트)에서 JavaScript를 이용해 화면을 그리는 방식
• 주로 React, Vue.js, Angular 같은 프론트엔드 프레임워크에서 사용
• 장점: 서버 부하가 적고, 동적인 UI 구현이 용이
• 단점: 초기 로딩 속도가 느릴 수 있음 (첫 화면이 빈 화면일 수도 있음)

💡 예제:
사용자가 웹사이트에 접속하면, 처음에는 빈 HTML 파일이 전달되고, JavaScript가 실행되면서 데이터를 가져와 화면을 완성하는 방식.

---

2️⃣ 서버 사이드 렌더링 (SSR)

• 서버에서 HTML을 완성한 후, 클라이언트에게 보내는 방식
• 예전부터 사용된 방식으로, PHP, JSP, Django 같은 서버 기반 프레임워크에서 주로 사용
• 장점: 첫 화면이 빠르게 표시됨 (SEO에도 유리함)
• 단점: 서버 부하가 커질 수 있음

💡 예제:
사용자가 웹사이트에 접속하면, 서버가 HTML을 완성해서 보내주기 때문에 브라우저가 바로 화면을 보여줄 수 있음.

---

🔥 렌더링 최적화 방법

1. Lazy Loading(지연 로딩): 필요한 부분만 로딩해서 속도 개선
2. 코드 스플리팅(Code Splitting): 불필요한 코드 로딩 방지
3. 캐싱(Caching): 반복 요청을 줄여 속도 개선
4. CDN(Content Delivery Network): 전 세계 여러 서버에서 콘텐츠를 제공해 속도 증가

---

💡 정리하면?

렌더링은 웹 페이지를 화면에 표시하는 과정이고, 방식에는 **CSR(클라이언트 측 렌더링)**과 **SSR(서버 측 렌더링)**이 있어.
어떤 방식을 선택하느냐에 따라 **속도, 성능, SEO(검색 엔진 최적화)**에 영향을 주니까 프로젝트 특성에 맞게 선택하는 게 중요!