1. SPA(Single-Page Application)
- 단일 페이지로 구성된 웹 어플리케이션을 말한다.
기존 어플리케이션 방식
- 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸린다.
CSR(Client-side rendering) 방식
- 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.
장점
- 하나하나 화면 전체를 렌더링 할 필요가 없기 때문에 화면 이동이 빠르다.
- 화면에 필요한 부분의 데이터만 받아서 렌더링 하기 때문에 처리과정이 효율적이다.
단점
- 유저가 실제로 방문하지 않을수도 있는 페이지의 렌더링과 관련한 스크립트도 불러오기 때문에, 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커져 초기 로딩 속도가 길어진다.
- 이는 Code Splitting 을 사용하여 라우트 별로 파일들을 나눠, 트래픽과 로딩속도를 개선 할 수 있다.
- 어플리케이션을 구현하는데 보다 시간이 걸리며 복잡하다.
도움이 된 정보들
react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG
SPA(Single Page Application)에 기초 개념
2. SSR(Server-Side rendering)
- User가 페이지에 처음 접근하였을때, 페이지를 서버측에서 먼저 간단하게 띄워주고, 완전하게 렌더링된 페이지를 클라이언트에게 다시 보내주는 기법이다.
- 사용자의 요청시(인터렉션이 있을 때)마다 새로고침이 일어나며, 서버에 새로운 페이지에 대한 요청을 한다.
장점
SEO (검색엔진 최적화)
-
리액트, 혹은 view 렌더링이 자바스크립트 위주로 돌아가는 프로젝트는, 자바스크립트 엔진이 돌아가지 않으면 원하는 정보를 표시해주지 않는다.
이렇게 클라이언트 렌더링만 될 경우엔 검색엔진 크롤러가 어플리케이션이 지닌 데이터들을 제대로 수집하지 못해 빈 페이지로 인식한다.
검색엔진에 제대로 노출이 되지 않으니 웹페이지에의 유입이 줄어드는 결과가 발생한다. -
구글 검색엔진은 크롤러에 자바스크립트 엔진이 내장되어 있어서 상관없지만 네이버, 다음 등의 검색엔진이 사이트를 제대로 크롤링 하게 지원해야 한다면, 서버사이드 렌더링을 따로 구현해야 한다.
-
SSR은 view를 서버에서 전부 렌더링해 내려주어 html에 모든 컨텐츠가 저장되어 있어 검색엔진에 최적화가 된다.
성능 개선
- 첫 렌더링된 html을 클라이언트에게 전달을 해주기때문에 view를 보기까지 초기 로딩속도가 빠르다.
JS파일을 불러오고 렌더링 작업이 완료되기 전에도 유저가 사이트의 컨텐츠를 이용 할 수 있어다.
JS파일을 전부 다운받기 전까지는 제대로 동작하지 않지만, 사용자는 빠르다 느낄 수 있다.
보안
- 사용자에 대한 정보를 서버 측에서 세션으로 관리를 해 CSR방식보다 안전하다.
단점
프로젝트의 복잡도
- 단순히 렌더링만 하는것은 그렇게 큰 문제는 아니지만, 리액트 라우터, 리덕스 등의 라이브러리와 함께 연동해서 사용하면서, 서버에서 데이터를 가져와서 렌더링을 해줘야하는 경우엔 조금 어려워질수도 있다.
성능 악화의 가능성
-
클라이언트의 초기렌더링을 서버측에서 대신 하여 클라이언트의 부담을 없애주기는 하지만, 렌더링을 위한 서버 자원을 사용해 불필요하게 트래픽을 낭비할 수 있다.
-
서버사이드 렌더링을 하게 될 때는,
ReactDOMServer.renderToString함수를 사용하게 되는데, 이 함수는 동기적으로 작동한다. 그래서, 렌더링하는동안은 이벤트루프가 막히게 된다.
그 뜻은, 렌더링이 되는 동안은, 다른 작업을 못한다는 뜻이다. -
만약 프로젝트를 렌더링하는데 250ms가 걸린다면 1초에 4개의 요청밖에 처리하지 못한다.
하지만 동일한 페이지를 특정기간 동안 캐싱하여 성능을 최적화 하거나, 써드파티 라이브러리를 통하여 비동기식으로 작동하게끔 코드를 작성하여 이에 대처할 수 있다.
도움이 된 정보들
react-router :: 3장. 서버사이드 렌더링 | VELOPERT.LOG
왜 서버 사이드 렌더링이 필요할까요?
서버 사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR)
가장 쉬운 방법으로 리액트에서 서버사이드 렌더링 이해하기
서버사이드렌더링(Server-Side-Rendering)
