SSR / SPA

#React #React Native

 SSR과 SPA에 대해 간략하게 정리를 해보려 한다.

 SPA(Single Page Application)란 말 그대로 하나의 페이지를 가진 어플리케이션이라는 의미이다. SPA는 어플리케이션 생명 주기 중 단 한 번만 리소스를 렌더링 한 뒤 이후에는 필요할 때만 서버에 요청을 보내 데이터를 받아온다. 클라이언트 관점에서 보면 최초로 화면이 로딩된 뒤에는 리로딩 없이 필요한 부분의 데이터만 서버로부터 전달받아 부분적으로 화면을 생신하는 것이다. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 화면 흐름과 사용자 경험을 제공한다. 이 때문에 최근 많은 기업들이 이와 관련된 React, Angular, Vue 등을 애용하고 있다.

 장점을 정리해보면, 네이티브에 가까운 자연스러운 사용자 경험(UX), 컴포넌트별로 개발이 용이함, 서버와 클라이언트 분업화에 용이함, 필요한 것들만 부분적으로 리렌더하기 때문에 효율적임 등이 있다.

SSR(Sever Side Rendering)은 화면을 이동할 때마다 서버에 새로운 화면에 대한 요청을 하는 것이다. 서버에서 렌더링을 끝낸 뒤, 데이터가 결합된 HTML 파일을 내려준다. 새로운 화면으로 이동할 때마다 서버에 요청해서 받아와야 하기 때문에 그동안 깜빡거림 등의 현상이 발생할 수 있다.