웹페이지 렌더링 방식(SSR vs CSR 비교)

1. 웹의 기본 원리와 DOM 트리

• DOM 트리의 중요성: 웹 페이지의 요소들이 객체 형태로 구성되어 있으며, JavaScript를 통해 이 요소들을 조작할 수 있습니다. 이를 통해 동적인 웹 페이지를 구현합니다.
• CSSOM의 역할: CSSOM은 CSS 규칙들을 객체 형태로 변환하여, JavaScript를 통한 스타일 조작을 가능하게 합니다. 이는 DOM과 병합되어 최종적인 렌더 트리를 형성하며, 이를 바탕으로 페이지가 화면에 표시됩니다.

 

2. 서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)

• SSR의 장점과 단점:
  • 장점: SEO 최적화, 빠른 첫 페이지 로딩, 초기 렌더링에 필요한 리소스가 적음.
  • 단점: 각 페이지 요청마다 서버 부하 증가, 사용자 인터랙션에 대한 반응 속도가 느릴 수 있음.
• CSR의 장점과 단점:
  • 장점: 사용자 인터랙션에 빠르게 반응, 페이지간 전환 시 서버 요청 감소, 풍부한 인터랙티브 경험 제공.
  • 단점: 초기 로딩 시간이 길 수 있음, 검색 엔진 최적화(SEO)에 불리할 수 있음.

 

3. SPA(Single Page Application)와 MPA(Multi Page Application)

• SPA의 구현: JavaScript를 사용하여 클라이언트 측에서 전체 페이지의 내용을 관리하고, 사용자와의 인터랙션에 따라 동적으로 내용을 변경합니다. 예를 들어, React, Angular, Vue.js 같은 현대적인 JavaScript 프레임워크와 라이브러리를 사용합니다.
• MPA의 특징: 각 페이지마다 별도의 HTML 파일을 가지고 있으며, 페이지 전환 시 전체 페이지가 새로 로드됩니다. 전통적인 웹사이트와 웹 애플리케이션에서 널리 사용됩니다.

 

4. React와 Next.js의 선택 기준

• React 사용 적합 상황: 대규모의 상호작용이 많은 사용자 인터페이스를 구축할 때 적합합니다. 컴포넌트 기반 개발로 코드 재사용성과 테스트 용이성을 높일 수 있습니다.
• Next.js 사용 적합 상황: SEO가 중요하고 초기 로딩 시간을 최소화하고자 할 때 유리합니다. Next.js는 서버 사이드 렌더링을 쉽게 구현할 수 있게 해주며, 정적 사이트 생성(Static Site Generation) 기능도 제공합니다.
•  정적 사이트 생성 (Static Site Generation, SSG)
  • 정적 사이트 생성은 웹 페이지의 HTML을 빌드 타임에 미리 생성하는 방식입니다. 이 방법은 동적으로 변화하는 데이터가 없는 웹사이트에 적합하며, 다음과 같은 이점을 제공합니다.
    • 속도와 성능: 정적 파일들은 CDN(Contents Delivery Network)을 통해 제공될 수 있으며, 이는 웹사이트의 로딩 속도를 크게 향상시킵니다
    • 보안: 서버사이드 코드 실행이 없기 때문에 보안 위험이 감소합니다.
    • 확장성: 정적 파일들은 쉽게 복제되어 다양한 서버에 분산될 수 있어, 높은 트래픽에도 안정적으로 서비스를 제공할 수 있습니다.
    • SEO 최적화: 정적 사이트는 검색 엔진이 쉽게 크롤링할 수 있어 SEO에 유리합니다.

예를 들어, Next.js와 같은 프레임워크는 SSG 기능을

지원하여, 프로젝트 빌드 시 정적 HTML 파일들을 생성합니다. 이렇게 생성된 파일들은 서버사이드 프로세스 없이도 서비스될 수 있습니다.

5. PWA(Progressive Web Apps)와 Service Worker

• PWA의 추가적인 이점: 설치 없이 앱과 유사한 경험을 제공합니다. 홈 화면에 추가, 푸시 알림, 오프라인 지원 등의 기능으로 사용자 경험을 향상시킵니다.
• Service Worker의 추가적인 기능: 네트워크 요청을 가로채 캐싱, 백그라운드 데이터 동기화, 푸시 알림과 같은 기능을 통해
  •  Service Worker는 웹 브라우저가 백그라운드에서 실행하는 스크립트로, 웹 애플리케이션과 네트워크 사이에서 중개자 역할을 합니다. 주로 다음과 같은 기능을 제공합니다.

1. 캐싱: Service Worker는 방문한 웹사이트의 자산(HTML, CSS, JavaScript 파일 등)을 캐시에 저장할 수 있습니다. 이를 통해 오프라인 상태에서도 웹사이트를 볼 수 있게 하며, 빠른 로딩 시간을 제공합니다.
2. 백그라운드 데이터 동기화: 사용자가 오프라인일 때 수행한 작업을 저장하고, 온라인 상태가 되면 서버와 동기화할 수 있습니다.
3. 푸시 알림: 웹 애플리케이션은 Service Worker를 통해 푸시 알림을 보낼 수 있습니다. 이를 통해 사용자가 웹 애플리케이션을 사용하지 않을 때도 사용자와 상호작용할 수 있습니다.