테크커런트

프론트엔드 개발을 하다 보면 반드시 마주치는 두 가지 렌더링 방식, 바로 CSR(Client Side Rendering) 과 **SSR(Server Side Rendering)**입니다.
각 방식은 성능, 사용자 경험, SEO 대응에 있어서 확연한 차이를 보입니다. 이 글에서는 CSR과 SSR의 특징과 차이점을 명확하게 정리해 드립니다.

✅ CSR (Client Side Rendering) 이란?

• 클라이언트에서 렌더링을 수행
• 서버는 HTML 틀과 JavaScript만 내려주고,
  브라우저가 JS를 실행하여 실제 콘텐츠를 렌더링
• 사용자 입장에서는 JS가 모두 실행되기 전까지 아무것도 보이지 않음

📌 특징 요약

• 서버는 HTML+JS 전달만 하고, 렌더링은 브라우저가 수행
• 첫 화면 진입 시 빈 화면이 잠깐 보일 수 있음
• **SPA(Single Page Application)**에 적합

✅ SSR (Server Side Rendering) 이란?

• 서버에서 HTML을 렌더링 완료된 상태로 전달
• 사용자는 JS가 실행되기 전에도 일부 내용을 볼 수 있음
• 검색 엔진이나 초기 로딩 속도에서 유리

📌 특징 요약

• 서버가 완성된 HTML을 내려주기 때문에 초기 콘텐츠 노출이 빠름
• JS 로딩은 이후에 수행되므로 사용자는 빠르게 피드백을 받음
• SEO에 더 친화적

🔍 CSR vs SSR 비교

🧠 요약 포인트

• 🔹 빠른 첫 화면이 중요하면 SSR
• 🔹 페이지 전환 속도가 중요하면 CSR
• 🔹 SEO에 민감한 페이지는 SSR 우위
• 🔹 서버 부하를 줄이고 싶다면 CSR 적합

✅ OSI 7계층(OSI 7 Layer Model) 개요

OSI (Open Systems Interconnection) 7계층 모델은 국제표준화기구(ISO)가 제정한 통신 시스템 간 상호 호환성 확보를 위한 표준 아키텍처입니다.

• 다양한 제조사의 시스템 간 네트워크 호환 가능
• 계층 구조 기반으로 기능을 분리하여 분업화(Divide & Conquer) 가능
• TCP/IP 4계층 모델의 한계를 보완하는 기술표준의 기반

🔹 OSI 7계층 요약표

🧠 각 계층별 특징 요약 (블로그 본문 연결 포인트)

• 1계층: 전기/광 신호로 비트 전달, 장비: 허브, NIC
• 2계층: MAC주소 기반 프레임 전송, 오류제어
• 3계층: IP 주소 기반 라우팅 및 최적 경로 설정
• 4계층: TCP/UDP로 신뢰성 있는 전송 보장
• 5~7계층: 사용자 응용과 직결된 상위 계층 (세션/표현/응용)

HTTP 요청 방식인 GET과 POST는 웹 개발자에게 매우 익숙한 개념이지만, 실제로 데이터를 어떻게 전달하는지 정확히 알고 계신가요? 이 글에서는 GET과 POST의 데이터 전달 차이점을 구조적으로 정리해 드립니다.

✅ 1. GET 요청 – 쿼리 파라미터 방식

• 형식:
  GET /url?username=kim&age=20
• 특징
  • 데이터가 URL에 포함되어 전송
  • 브라우저 주소창에 보임
  • 캐시 저장 가능, 북마크 가능
  • 전송 데이터 길이에 제한 있음
• 사용 예
  • 검색, 목록 필터링 등 조회 요청
  • 데이터 변경이 없는 요청

✅ 2. POST 요청 – HTML Form 방식

• Content-Type: application/x-www-form-urlencoded
• 형식:
  username=kim&age=20
  (HTTP Body에 담겨 전송)
• 특징
  • 주로 HTML <form> 태그에서 사용
  • URL이 아닌 메시지 바디에 데이터 포함
  • GET보다 보안성이 높음 (노출되지 않음)
• 사용 예
  • 회원가입, 로그인, 주문 등 사용자 입력 전송

✅ 3. POST/PUT/PATCH – HTTP API 방식 (JSON 전송)

• Content-Type: application/json
• 형식 예시:

{
  "username": "kim",
  "age": 20
}

• 특징
  • REST API, 비동기 통신(AJAX)에서 일반적
  • JSON 외에도 XML, TEXT 가능
  • 구조적이고 유연한 데이터 전송 가능
• 사용 예
  • 프론트엔드 → 백엔드 API 통신
  • 모바일 앱, SPA 등에서 서버로 데이터 전달 시

📚 요약 비교 표

🎯 결론

• 단순 조회는 GET
• 폼 전송은 POST (x-www-form-urlencoded)
• REST API 통신은 JSON 기반 POST/PUT/PATCH

요청 목적과 환경에 따라 적절한 방식을 선택하는 것이 중요합니다.