SSR(Server Side Rendering)
- 대부분 전통적인 웹은 SSR
- 서버에서 계속 데이터를 받아와서 그려줘야 한다.
- 데이터가 모두 있는 페이지로 보이기 때문에 검색 엔진 최적화 SEO에 좋다.
- js가 모두 실행되어야 그려지는 웹이 아니라, html만 먼저 그려주어서 빠르다.
- 페이지를 서버에서부터 렌더링하여 가져오기 때문에 서버에 부담을 준다.
CSR(Client Side Rendering)
- SPA는 CSR
- 변경된 데이터만 받아와서 그려준다.
- js로 구동되기 때문에 네이버, 다음같은 검색엔진에서는 데이터가 없는것처럼 보인다.
- 구글은 js엔진이 내장되어있어 SPA에도 검색결과가 잘 적용된다.
SSR
- 페이지를 이동할 때 마다 각 페이지를 다운받아서 렌더링한다. => 새로고침이 일어난다.
CSR
- 페이지를 이동해도 view의 바뀐 부분만 데이터를 요청해서 렌더링한다. => 새로고침이 일어나지 않는다.
알아본 이유
새로운 웹 프로젝트를 만들어보고 싶어서 React.js를 찾아봤는데, 공식 사이트에서 서버사이드 렌더링을 하고싶다면 Next.js를 시도해보라고 해서 알아보았다. SPA와 서버사이드 렌더링을 같이..?
Velopert님의 글에 따르면 Universal 리액트 어플리케이션의 서버렌더링을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크. 라고 하셨다.
Universal이란 어디서든 작동한다는 의미이고, 서버에서 미리 사전 작업을 하고, 클라이언트에게 줘서 클라이언트가 나머지 작업을 하는 방식.
Next.js
따라서 이걸 알아보게 된 계기, Next.js를 사용하는 이유는 SSR으로 첫 페이지를 빠르게 받아오고, CSR으로 이후 페이지들을 필요한 컴포넌트만 로딩하는 방식으로 SSR과 CSR의 장점을 모두 취해보겠다는 욕심을 가지고 만들었고, 사용한다. 는게 조사 결과이다.