csr과 ssr의 차이점✍️
CSR
react는 CSR 방식으로 페이지를 렌더링 한다.
react는 SPA로 하나의 페이지안에서 모든 데이터를 주고 받으며,
react-router-dom 같은 라우팅 라이브러리를 사용해서 페이지 이동처럼 보이게 만들어준다.
하지만 실제로는 페이지가 이동하는것이 아닌, URL이 변경될때 보여지는 컴포넌트가 달라지는것 뿐이다.
그러므로 실제로 페이지가 이동되어서 다시 HTML과 자바스크립트를 받아오는 것이 아니다.
react에서는 맨 처음 유저가 웹에 방문하면 HTML을 받아오고 CSS와 자바스크립트를 불러와서
웹을 동작시키면 이후에 우리가 react안에 작성해놓은 코드들이 동작하는 것이다.
CSR의 장점은 사용자와의 상호작용이 매끄럽다는 장점이 있다.
그러나 검색 엔진 최적화(SEO)가 어려우며, 초기 로딩 시간이 길어지는 단점도 있다.
SSR
next.js는 미리 페이지(HTML을 여러개 생성)를 생성해놓는다.
그리고 유저가 웹을 들어오면 해당하는 URL의 HTML을 전달해준다.
SSR의 장점은 검색 엔진 최적화(SEO)가 용이하며 초기 로딩 속도가 빠르다는 장점이 있지만,
서버에서 페이지를 렌더링하기 때문에 서버의 부담이 크며, 사용자와의 상호작용이 불편할 수 있다.
어떤상황에서 CSR과 SSR 방식을 활용하면 좋을까?✍️
react와 같은 SPA에서는 웹 페이지를 불러오고 나서 데이터를 주고 받을 일이 많을 때 조금 더 유리하다.
next.js와 같은 프레임워크는 HTML을 미리 생성해놓는데, HTML을 불러오고 나서 HTML이 많이 바뀔거라면 굳이 미리 생성해놓을 필요가 없는것이다. 그래서 어드민 페이지 혹은 한 페이지에서 모든 일을 처리하는 웹과 같은 경우는 굳이 next.js와 같은 프레임워크를 사용할 필요가 없다.
반대로 HTML을 많이 생성해놓으면 유리한 웹들도 있다.
블로그나 공식문서와 같은 페이지들은 데이터가 자주 변할 일이 없기때문에 같은 HTML을 생성할거라면 굳이 유저가 웹페이지에 들어와서 HTML을 요청할 때 만들어주는게 아니라 미리 다 만들어놓고 만들어놓은 HTML을 단순히 전달해주면 된다.
그럼 왜 CSR을 사용하면 왜 검색 엔진 최적화가 어려울까? ✍️
CSR은 서버에서 클라이언트로 전송되는 초기 HTML에는 동적으로 생성되는 콘텐츠가 포함되어있지 않다.
검색 엔진 크롤러가 페이지를 수집할 때 동적으로 생성된 콘텐츠를 인식하지 못하고 검색 결과에서 노출되는 확률도 떨어지는 것이다.
또 CSR은 페이지 로딩이 자바스크립트 파일의 다운로드와 실행에 따라 지연될 수 있기 때문에,
초기 로딩 속도가 느릴 수 있는데 검색 엔진이 페이지의 초기 로딩 속도를 평가하는 데 중요한 요소 중 하나이며,
검색 엔진이 페이지를 빠르게 로딩할 수 없을 경우 페이지 노출이 낮아지는 원인이 될 수 있다.
내가 next.js를 선택한 이유✍️
a. 검색 엔진 최적화
-next.js는 검색 엔진 최적화를 위한 SSR(Server Side Rendering) 기능이 내장되어 있기 때문에,
검색 엔진 최적화가 필요한 교육 플랫폼 웹사이트를 제작하기에 적합하다고 생각했다.
교육 사이트는 교육 정보를 제공하는 것이 목적이기 때문에, 사용자들이 쉽게 원하는 정보를 검색할 수 있도록 하는 것이 매우 중요하고, 온라인 교육 플랫폼은 수업 콘텐츠, 강의 동영상, 강사 정보 등의 정보를 제공하기 때문에
검색 엔진에서 상위에 노출되어야한다고 생각했다.
(트래픽 증가와 매출 증대에 직접적인 영향을 미칠 수 있기 때문에)
next.js를 선택하면서 우려되었던 상황✍️
a. 초기 렌더링 속도 저하
서버에서 데이터를 가져오고 렌더링하므로, 초기 로딩 속도가 느려질 수 있는 문제.
b. 서버 부담 증가
서버에서 데이터를 가져오고 렌더링하기 때문에, 로딩속도가 빠르지만 서버 과부화 문제.
c.개발 생산성 저하
next.js 기술 적응 문제.
next.js는 검색 엔진 최적화를 위한 SSR 기능을 제공하므로 이를 활용하여 교육 플랫폼 웹사이트를 제작할때 적절하다고 생각했다.
그러나 초기 렌더링 속도 저하, 서버 부담 증가, 개발 생산성 저하 등의 문제점들도 존재한다.
꼭 최신기술을 사용해야하는건 아니고 각 방식은 상황에 따라 적합한 경우가 있으며,
'어떤 기술이 좋다' 라고 판단 할 수 없으므로 본인의 알맞게 고려해가면서 기술을 정하면 좋을 것 같다.