본문 바로가기

기술면접

28_렌더링 방식(Server Side Rendering, Client Side Rendering, Static Site Generation)의 장단점

Server Side Rendering (SSR):

장점:
검색 엔진 최적화 (SEO): SSR은 서버에서 페이지를 완전히 렌더링하기 때문에 검색 엔진이 콘텐츠를 쉽게 색인화하고 검색 결과에 표시할 수 있습니다.

초기 로딩 속도: 사용자가 첫 번째 페이지를 요청할 때 서버에서 완전한 HTML을 반환하므로 초기 로딩 시간이 단축될 수 있습니다.

장치 호환성: SSR은 서버 측에서 작동하기 때문에 클라이언트 측 기기와 무관하게 콘텐츠가 제공될 수 있습니다.

단점:
서버 부하: 매 요청마다 서버에서 페이지를 완전히 렌더링하므로 서버 부하가 높을 수 있습니다.

빌드 복잡성: SSR은 서버 사이드와 클라이언트 사이드 렌더링을 모두 고려해야 하므로 빌드 프로세스가 복잡할 수 있습니다.

클라이언트 측 상호 작용 제한: 페이지가 서버에서 렌더링되므로 클라이언트 측 상호 작용이 제한될 수 있습니다.

Client Side Rendering (CSR):
장점:
빠른 페이지 전환: 페이지가 클라이언트에서 동적으로 렌더링되기 때문에 사용자 경험이 더욱 부드럽고 빠릅니다.

서버 부하 감소: 서버는 데이터만 제공하고 클라이언트에서 렌더링되기 때문에 서버 부하가 감소할 수 있습니다.

재사용 가능한 코드: CSR은 프론트엔드 프레임워크와 함께 사용되며 코드를 재사용하기 쉽게 만듭니다.

단점:

SEO 문제: 초기 페이지 로드 시 클라이언트에서 렌더링되므로 검색 엔진 최적화가 어려울 수 있습니다.

사용자 경험: 초기 로딩 시 빈 페이지가 표시될 수 있으며, 느린 네트워크 연결 또는 느린 클라이언트의 경우 사용자 경험이 저하될 수 있습니다.

보안 문제: 클라이언트 측에서 데이터가 렌더링되므로 보안 문제가 발생할 수 있습니다.

Static Site Generation (SSG):
장점:
빠른 로딩 시간: 사전에 페이지를 렌더링하여 서버로부터 즉시 전송되므로 초기 로딩 시간이 매우 빠릅니다.

보안: 정적 파일로 구성되므로 보안에 더욱 안전합니다.

비용 효율성: 서버 자원이 필요 없으므로 호스팅 및 유지 관리 비용이 절감됩니다.

단점:
동적 콘텐츠 관리: 동적 데이터가 있는 경우 매번 사전에 렌더링해야 하므로 관리가 어려울 수 있습니다.

SEO: CSR과 마찬가지로 초기 로딩 시 검색 엔진 최적화에 어려움이 있을 수 있습니다.

유연성 제한: 페이지가 미리 렌더링되므로 동적 요소를 추가하기 어려울 수 있습니다.

'기술면접' 카테고리의 다른 글

30_Event bubbling & capturing  (0) 2024.03.06
29_브라우저 렌더링 과정  (0) 2024.03.05
27_Lazy loading & Code splitting  (0) 2024.03.02
25_라이프사이클 메소드에 대해 설명해주세요.  (0) 2024.02.29
24_라이프사이클  (0) 2024.02.28