SSR / CSR
SPA : 단 하나의 HTML 문서로만으로 사용자의 요청에 따라 내용이 동적으로 바뀌는 웹사이트이다. 최초 페이지에 렌더한 후에 데이터만 변경하여 사용할 수 있는 웹 애플리케이션이다.
이전에는 대부분의 웹사이트들이 정적인 사이트였지만 요새는 데이터의 양이 많아지고 실시간으로 변경된 데이터를 유저에게 제공하기 위해 동적인 사이트로 바뀌는 추세이다.
동적인 사이트가 많아짐에 따라 렌더링(웹 페이지 접속시 그 페이지를 화면에 그려주는 것)방식이 SSR 과 CSR 으로 나뉜다. 제공하는 서비스가 최우선하는 방향에 따라 선택하여 사용한다.
SSR (Server Side Rendering)
대표적인 예: next.js
- 검색 최적화가 최우선인 경우
- 초기 구동이 빠르길 원할 경우
- 컨텐트들이 많은 유저 인터랙션이 필요하지 않는 경우
SSR 방식은 웹 페이지를 브라우저에서 렌더링하는 대신 서버에서 렌더한다. 유저가 처음 컨텐츠를 접하는 시점을 앞당길 수 있지만 유저의 인터랙션이 발생할 때마다 서버에 요청을 보내서 전체 페이지를 렌더하기 때문에 많은 시간이 소요된다.
CSR (Client Side Rendering)
대표적인 예 : React.js
- 검색 최적화가 최우선이 아닌 경우
- 많은 유저인터랙션이 있는 경우
- 웹 애플리케이션을 만들어야하는 경우
CSR 방식은 초기 렌더시 구동속도가 느리지만 최초 렌더 이후 발생하는 사용자의 행동에 따라 필요한 부분만 가져와서 렌더하기 때문에 빠른 인터랙션이 가능하다. CSR에는 치명적인 단점이 있는데 웹크롤러 및 봇들이 자바스크립트 파일을 실행하지 못하여 HTML파일에서만 콘텐츠를 수집하여 빈페이지로 인식하기 때문에 검색 엔진 최적화(SEO, Search engine optimization) 문제가 발생한다. (페이지의 컨텐트 부분은 js파일에만 있기 때문에) 또한 CSR 방식으로 만들어진 페이지는 사용자의 정보를 저장할 곳이 마땅치 않아 보안문제도 발생할 수 있다.
Next.js
리액트 앱이 SSR 방식으로 구동되도록 도와주는 프레임워크
