웹 렌더링
CSR(Client-Side Rendering)
CSR은 브라우저에서 JavaScript를 실행해 화면의 내용을 구성하는 렌더링 방식입니다.
쉬운 설명
내 신청 내역 같은 화면에서 데이터를 불러온 뒤 목록이 나타나는 상황을 볼 수 있어요. CSR에서는 브라우저가 코드를 실행하고 필요한 데이터를 받아 화면 내용을 구성할 수 있어요. 서버가 필요 없다는 뜻은 아니에요. 코드 파일을 받거나 신청 정보를 조회하는 과정에서 서버와 통신할 수 있어요.
이런 상황에서 만나요
스터디 신청 내역 화면에서 “불러오는 중”이 보이다가 목록으로 바뀌는 구성을 생각해 볼게요. 아래는 브라우저가 API에서 정보를 받은 뒤 목록을 만드는 예시예요.
데이터를 받은 뒤 목록으로 바뀌는 화면이에요
내 신청 내역
불러오는 중…
GET /api/my-applications
응답 예시: [{"title":"AI 스터디"}]내 신청 내역
AI 스터디
- 1데이터를 기다리는 상태를 사용자에게 보여 줘요.
- 2조회 결과를 받아 화면에 반영하는 예시예요.
- 3브라우저가 데이터를 이용해 목록 내용을 구성했어요.
목록이 나타나지 않으면 브라우저의 코드 오류와 데이터 요청 결과를 확인해요. 로딩 중 표시가 계속되는 것인지, 실패했는데 안내가 없는 것인지도 구분해요. 화면 변화만 보고 앱 전체가 CSR이라고 단정할 수는 없어요.
헷갈리기 쉬운 점
React나 클릭 가능한 화면은 모두 CSR인가요?
아니에요. React 화면도 서버에서 HTML을 만들 수 있고, 처음에는 서버가 내용을 보내고 이후 변경은 브라우저가 처리할 수도 있어요. 클릭 기능이 있다는 사실보다 초기 내용을 어디서 구성하는지 확인해요.
데이터를 기다리는 동안의 표시, 요청 실패 안내, 빈 목록 상태를 함께 준비해요. 중요한 권한 검사는 브라우저의 버튼 숨김만으로 처리하지 않고 서버에서도 확인해야 해요.
왜 알아야 할까요?
빈 화면이 나올 때 코드 로딩과 API 응답, 화면 상태 처리를 나누어 확인할 수 있어요. AI에게도 “요청은 성공했는데 목록이 표시되지 않는다”처럼 문제를 구체적으로 전달할 수 있어요.
조금 더 자세히
CSR은 Client-Side Rendering의 줄임말입니다. 브라우저에서 JavaScript를 받아 실행하고 화면 내용을 구성합니다. 데이터 요청이 추가로 필요하면 코드 로딩과 데이터 응답 시간 모두 표시 시점에 영향을 줍니다.
CSR과 SSR은 앱 전체에 하나만 선택해야 하는 규칙이 아닙니다. 페이지나 부분별로 섞어 사용할 수 있습니다. 공개 콘텐츠의 초기 전달 방식과 로그인 후 상호작용 등 필요한 동작을 함께 고려합니다.
직접 사용할 때 확인해 보세요
- 브라우저 JavaScript 오류를 확인한다
- 데이터 요청의 성공 여부와 응답 내용을 확인한다
- 로딩·실패·빈 상태의 표시를 확인한다
관계 지도
