포스트 읽기 - 프론트엔드 개발자 면접 정리
면접 중 잘 모르는 것이 있었을 때
면접이 끝난 후 질문 or 바로 질문
면접 질문
기술
CSR과 SSR의 차이점은?
추가적인 페이지 요청
Client Side Rendering은 브라우저에서 페이지에 대한 자바스크립트를 실행함으로써 페이지를 부분적으로 변경하며 렌더링하여 서버에 추가적인 페이지 요청이 필요 없는 방식이고 Server Side Rendering은 페이지가 필요 할 때마다 서버에 페이지를 요청해서 만들어진 페이지를 응답받아 보여주는 방식이어서 추가적인 페이지 요청이 있습니다.
초기 로딩 속도
초기 로드하는 자바스크립트 코드의 양이 Client Side Rendering이 더 많기 때문에 Server Side Rendering에 비해서 초기 로딩 속도가 느리고 이후 동작에 있어서는 새로운 페이지를 서버에 요청하는 Server Side Rendering 보다 Client Side Rendering이 동작 속도가 더 빠릅니다.
SEO
검색엔진들은 static하게 존재하는 페이지들을 파싱하는데, SSR은 페이지들이 각각 static하게 존재하기 때문에 각각의 페이지 별로 검색엔진최적화를 할 수 있는 반면에 CSR은 첫 페이지만 static하게 존재하고 이후 자바스크립트를 통해 동작하기에 각각의 페이지마다 검색엔진최적화를 하기 어렵다는 단점이 있습니다.
CSR의 이런 단점을 보완하기 위해 react-helmet이라는 라이브러리가 존재하지만 이것 역시 앱 실행 중 자바스크립트로 title, description을 변경하는 정도의 역할을 수행하고 빌드되어있는 페이지는 여전히 첫 페이지 하나이기 때문에 static한 페이지를 읽는 검색엔진에 대한 최적화를 완전하게 할 수는 없는 한계가 있습니다.
결국 컨텐츠가 공개적이고 많은 유입을 기대하는 웹 사이트라면 pre-rendering된 페이지들이 검색엔진최적화에 더 유리하고 React SSR 프레임워크인 Next.js를 사용하는 것이 추천됩니다.
요약
추가적인 페이지 요청 여부, 초기 로딩 속도, SEO에서 차이가 있습니다.
