Web/슈퍼코딩

(2024.12.12(목요일)) 슈퍼코딩 (신입연수원) 3주차 Day 4 후기

유니얼 2024. 12. 12. 20:55
728x90

SSR과 CSR 분석 및 비교

1. SSR (서버 측 렌더링, Server-Side Rendering)

SSR은 웹 애플리케이션의 페이지를 서버에서 렌더링하여 클라이언트에게 전달하는 방식입니다. 클라이언트는 서버에서 렌더링된 HTML을 받게 되고, 페이지를 요청할 때마다 서버는 해당 페이지를 다시 렌더링합니다. 이 방식은 웹 페이지가 처음 로드될 때 클라이언트 측에서 별도의 렌더링 없이 즉시 콘텐츠를 볼 수 있게 해줍니다.

장점:

1, 빠른 초기 페이지 로딩: 서버에서 HTML을 미리 렌더링하여 전달하므로, 사용자는 페이지를 요청하자마자 콘텐츠를 빠르게 볼 수 있습니다.

2, SEO에 유리: 서버에서 페이지를 렌더링하여 검색 엔진이 페이지의 콘텐츠를 쉽게 인덱싱할 수 있습니다. 이는 SEO 최적화에 큰 도움이 됩니다.

3, 브라우저 호환성: HTML이 이미 서버에서 렌더링되므로, 다양한 브라우저에서 호환성 문제가 발생할 가능성이 적습니다.

단점:

1, 서버 부하: 서버에서 매번 HTML을 렌더링해야 하므로, 많은 트래픽이 발생할 경우 서버에 부담이 커질 수 있습니다.

2, 느린 상호작용: 페이지가 처음 로드된 후에도 클라이언트 측에서 JavaScript가 실행되어야 하므로, 후속 상호작용 속도가 느려질 수 있습니다.

2. CSR (클라이언트 측 렌더링, Client-Side Rendering)

CSR은 페이지의 렌더링을 클라이언트에서 담당하는 방식입니다. 클라이언트(즉, 브라우저)는 초기 HTML 파일을 요청받은 후, JavaScript를 통해 페이지의 콘텐츠를 동적으로 불러오고 렌더링합니다. 이 방식에서는 서버가 HTML을 전달하는 것이 아니라, 클라이언트가 데이터를 요청하고 처리하여 페이지를 생성합니다.

장점:

1, 빠른 후속 페이지 로딩: 한 번 페이지가 로드된 이후에는 서버 요청 없이, 클라이언트 측에서 데이터를 불러와 빠르게 페이지를 변경할 수 있습니다.

2, 서버 부하 절감: 서버는 데이터만 제공하고 렌더링을 클라이언트 측에서 처리하므로 서버 부하가 적습니다.

3, 동적이고 상호작용이 풍부함: CSR 방식은 페이지 간 전환 시 사용자가 기다리는 시간이 적고, 동적인 UI와 실시간 업데이트가 가능합니다.

단점:

1, 초기 로딩 시간: 처음 페이지를 로드할 때 HTML, JavaScript, CSS 파일을 모두 로드해야 하므로 초기 로딩이 느려질 수 있습니다.

2, SEO 불리함: JavaScript로 콘텐츠를 렌더링하므로, 검색 엔진 봇이 페이지를 인덱싱하는 데 어려움을 겪을 수 있습니다. SEO 최적화를 위해서는 추가적인 설정이 필요합니다.

3, 브라우저 호환성: 클라이언트 측에서 JavaScript가 실행되지 않으면 페이지가 제대로 표시되지 않을 수 있습니다.

3. SSR과 CSR 비교

특징 SSR(서버 사이드 렌더링) CSR(클라이언트 사이드 렌더링)
초기 로딩 시간 빠름 (서버에서 렌더링된 HTML 전달) 느릴 수 있음 (JavaScript 로드 후 렌더링 시작)
SEO 우수 (서버에서 HTML 렌더링으로 SEO 최적화) SEO에 불리함 (JavaScript 렌더링으로 검색엔진 최적화 어려움)
서버 부하 높음 (서버에서 매번 렌더링해야 하므로 부하가 크다) 낮음 (서버는 데이터만 제공)
후속 페이지 전환 느림 (서버 요청 후 렌더링되어야 하므로 속도 느림) 빠름 (클라이언트 측에서 빠르게 페이지 전환 가능)
개발 복잡도 복잡 (서버와 클라이언트 모두 고려해야 함) 상대적으로 간단 (클라이언트에서만 처리)

4. 일일 보고 양식

 

  • 부족한 점: SSR과 CSR의 SEO 최적화 차이에 대해 더 깊이 있는 분석이 필요합니다.
  • 스스로 시도해본 것들: SSR과 CSR의 장단점을 비교하고, 각 렌더링 방식이 어떻게 다른 상황에서 유리한지 분석했습니다.
  • 알게 된 점: CSR은 빠른 페이지 전환과 서버 부하 절감을 제공하지만 초기 로딩 시간이 느릴 수 있습니다.
  • 회고: 각 렌더링 방식의 특징을 이해하고, 프로젝트에 적합한 방식을 선택하는 데 필요한 요소를 고려해야 함을 깨달았습니다.

 

반응형