서버 사이드
서버 사이드 프로그래밍은 웹 서버에서 실행되는 코드를 작성하는 것을 의미. 코드는 클라이언트(사용자 브라우저)에서 요청을 받을 때 실행. 서버 사이드 스크립트는 데이터베이스에 접근하고 데이터를 처리하고 HTML 페이지를 동적으로 생성할 때 사용.
주요 언어
PHP, Python, Ruby, Java, Node.js
장점
- 중요한 로직과 데이터베이스 접근이 서버에서 처리되어 클라이언트 접근 불가.
- 데이터베이스 접근: 서버에서 직접 데이터베이스와 상호작용할 수 있어 데이터 처리와 저장이 용이.
- 호환성: 모든 클라이언트가 동일한 서버 측 코드를 실행하므로 브라우저 호환성 문제를 줄임.
단점
- 서버 부하: 모든 처리가 서버에서 이루어지기 때문에 서버의 부하가 증가.
- 응답 시간: 클라이언트가 요청을 보내고 서버가 응답할 때까지 시간이 걸림.
클라이언트 사이드
사용자의 브라우저에서 실행되는 코드를 작성하는 것을 의미. HTML, CSS, Javascript로 작성되며 사용자의 인터페이스를 조작하고 사용자와 상호작용
주요 언어 및 기술
HTML, CSS, JavaScript(React, Angular, Vue)
장점
- 빠른 응답: 서버에 요청을 보내지 않고 브라우저에서 바로 처리하므로 응답 속도가 빠름.
- 서버 부하 감소: 많은 작업을 클라이언트에서 처리함으로써 서버의 부담을 줄임.
- 향상된 사용자 경험: 애니메이션, 실시간 업데이트 등 사용자 인터페이스를 더욱 풍부하게 만듬.
단점
- 보안문제: 클라이언트 사이드 코드가 브라우저에 노출되므로 보안에 취약.
- 브라우저 호환성: 다양한 브라우저에서 동일하게 작동하도록 코드 작성이 어려움.
- 제한된 성능: 클라이언트 기기 성능에 따라 처리 속도가 달라짐
서버 사이드를 선택하는 경우
보안이나 데이터베이스, 복잡한 계산, 대량의 데이터 처리가 필요할 때 사용
클라이언트 사이드를 선택하는 경우
사용자와의 실시간 상호작용, 동적인 인터페이스, 애니메이션 실시간 업데이트 등이 필요하거나 서버 부하를 분산시키고자 할 때 사용.
SSR (Server-Side Rendering)
브라우저가 페이지를 요청하면 서버가 HTML을 완성해서 보내주는 렌더링 방식.
사용자는 완성된 HTML을 받기 때문에 첫 화면이 빠르게 보임.
Next.js, Nuxt.js 등이 대표적.
장점
- SEO 유리: 검색 엔진이 완성된 HTML을 바로 읽을 수 있어 검색 노출에 유리.
- 초기 로딩 속도: 첫 페이지 진입 시 완성된 HTML이 바로 표시되어 빠르게 보임.
- 저사양 기기 대응: 렌더링 작업이 서버에서 처리되므로 클라이언트 성능에 덜 의존.
단점
- 서버 부하: 요청마다 서버에서 HTML을 생성하므로 트래픽이 많을수록 서버 부담 증가.
- 페이지 전환 속도: 매 요청마다 서버에서 새 HTML을 받아오므로 페이지 간 이동이 느릴 수 있음.
CSR (Client-Side Rendering)
서버는 최소한의 HTML과 JavaScript 파일만 보내고,
브라우저가 JavaScript를 실행해서 직접 화면을 그리는 렌더링 방식.
React, Vue, Angular 등 SPA(Single Page Application)가 대표적.
장점
- 빠른 페이지 전환: 첫 로딩 이후에는 서버 요청 없이 클라이언트에서 화면을 교체하므로 전환이 매끄러움.
- 서버 부하 감소: 렌더링을 클라이언트가 담당하므로 서버는 데이터(API)만 제공.
- 풍부한 인터랙션: 실시간 업데이트, 애니메이션 등 동적인 UI 구현에 유리.
단점
- SEO 불리: 초기 HTML이 비어있어 검색 엔진이 콘텐츠를 읽기 어려움.
- 초기 로딩 느림: JavaScript 파일을 모두 다운로드하고 실행해야 화면이 보임 (흰 화면 시간 발생).
- 클라이언트 성능 의존: 기기 사양이 낮으면 렌더링이 느려질 수 있음.
SSR vs CSR 선택 기준
블로그, 뉴스, 쇼핑몰처럼 검색 노출이 중요하거나
첫 로딩 속도가 critical한 서비스 → SSR
관리자 대시보드, SNS 피드, 실시간 채팅처럼
로그인 후 사용하는 인터랙티브한 서비스 → CSR
