웹 어플리케이션을 만드는 패턴
MPA
Multiple Page Application
사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다. 사용자가 사소한 요청을 하더라도 매번 전체 페이지를 렌더링 해줘야 한다.
장점
SEO(Search Engine optimization, 검색엔진 최적화) 관점에서 유리하다.
MPA는 완성된 형태의 HTML 파일을 서버에서 전달받기 때문에 검색엔진이 페이지를 ✔️크롤링하기에 적합하다.
✔️ 크롤링
Web Scraping이 정식명칭으로, 컴퓨터 소브트웨어 기술로 웹 사이트들에서 원하는 정보를 추출하는 것을 의미한다.
단점
매번 페이지 전체를 새로 불러와서 렌더링하기 때문에 화면에 깜빡이는 등의 성능상 이슈가 발생한다.
프론트와 백이 밀접하게 연관되어 있기 때문에 개발 복잡도가 증가한다.
SPA
Single Page Application
하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션이다. 처음 한 번만 정적 리소스를 다운받고, 그 이후 새로운 요청이 들어왔을 때는 필요한 부분의 데이터만 부분적으로 바꿔준다.
장점
사용자 경험 측면에서 좋으며, 성능이 우수하다.
서버 없이도 개발이 가능하며 디버깅이 상대적으로 쉽다.
로컬 데이터를 효과적으로 캐시(cache) 할 수 있다. 처음에 받은 데이터를 모두 로컬 캐시에 저장해 놓아서 오프라인에서도 사용할 수 있다.
단점
초기 구동 속도가 느리다. 초기에 웹 어플리케이션에 필요한 모든 정적 리소스를 한 번에 다운받기 때문이다.
SEO(Search Engine optimization, 검색엔진 최적화) 관점에서 불리하다.
렌더링 방식
SSR
Server Side Rendering
서버사이드 렌더링 방식은 서버에서 정적인 페이지로 렌더링되어 사용자에게 내려오는 것을 의미한다. 따라서 초기 로딩 속도가 빠르며(JS 파일을 다운로드하고 적용하기 전에 이미 브라우저에서 보여지기 때문) SEO에 사용되는 meta 태그들이 미리 정의되어 있어 SEO에 유리하다.
CSR
Client Side Rendering
클라이언트 사이드 렌더링은 브라우저가 자바스크립트를 받아와서 동적으로 렌더링한다.
첫 로딩시에 모든 리소스를 다운받기 때문에 필요한 파일의 크기는 크지만(HTML, JS, 그 외 리소스 모두 포함), 다 받기만 하면 동적으로 빠르게 렌더링 되어서 사용자가 느끼는 UX에 유리하다.
SSR과는 다르게 하나의 HTML 파일로 모든 페이지를 구성하여서 meta 태그 정의에 약점이 있으며, SEO에 불리하다.
MPA = SSR, SPA = CSR ???
일반적으로 MPA를 SSR, SPA를 CSR이라고 하지만 엄밀히 보면 이 표현은 옳지 않다. 정확히는 MPA가 주로 SSR을 사용하는 것이고, SPA가 주로 CSR을 사용하는 것이다.MPA/SPA는 사용하는 페이지가 여러개 or 한 개인지에 대한 개념이고, SSR/CSR은 렌더링을 서버에서 하는지, 클라이언트에서 하는지에 대한 개념이다.
SPA가 1)
최초 접속시 서버로부터 페이지(정적 리소스)를 받아오고, 2)이후에는 동적으로 DOM을 구성해 렌더링 되는 화면이 바뀌게 되는데여기서 2)에 대한 개념이 CSR인 것이다.
SPA에서 SSR을 사용하는 경우도 있는데 위 문장에서 1)에서 가져온 리소스를 SSR로 렌더링하는 것이다.
SEO
Search Engine Optimization
검색엔진 최적화는 웹페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해 검색 결과의 상위에 나올 수 있도록 하는 작업을 의미한다.
CSR과 SSR에서의 SEO
일반적으로 검색 엔진의 크롤러들은 데이터를 긁어올 때 웹페이지의 JS를 해석해 노출시키기 때문에 크롤링을 할 수 없는 시점에서는 검색 엔진에 데이터를 노출시키지 않는 것이다.
따라서 CSR을 사용하면 View를 생성하기 위해서 JS가 필요하고(그 전까지는 빈 페이지이기 때문에 View가 완성되지 않기 때문), View를 생성하기 전까지는 검색 엔진 크롤러의 데이터 수집이 제한적이기 때문에 상대적으로 검색 엔진이 이해하는 정보가 부족해 SEO에 유리하지 않게 된다.
반면에 SSR은 View를 서버에서 렌더링해 제공하기 때문에(=View를 먼저 그림) 상대적으로 SEO에 유리한 것이다.
SSR vs CSR
전통적인 SSR은 초기 로딩 속도가 빠르고 SEO에 유리하지만, View 변경(화면 전환) 시 계속적으로 서버에 요청해야 하기 때문에 서버에 부담이 크다.
CSR은 초기 로딩 속도가 느리고 SEO에 대한 문제가 있지만, 초기 로딩 이후에는 View를 서버에 요청하는 것이 아닌 클라이언트에서 직접 렌더링하기 때문에 화면 전환이 매우 빠르다는 장점이 있다.
현업에서는 두 가지 렌더링 방법을 적절하게 사용해 첫 페이지 로딩시에는 SSR을 사용하고, 그 후 모든 페이지 로드에는 CSR을 활용하는 방법을 많이 사용한다고 한다.
SPA에서 SEO를 어떻게 해야 할까?
React에서는 Next.js, GatsbyJS 등의 라이브러리를, Vue에서는 Nuxt.js 등의 라이브러리를 통해 SPA에서 SEO을 할 수 있도록 도와준다.
Next.js의 경우에는 전통적인 SSR이 아닌 SPA에서 SEO에 유리하기 위한 SSR을 도입하고, 그 외에도 개발자들이 직접 노드에서 환경설정을 해주지 않고도 익숙한 툴(Babel, Webpack..)을 이용해 설정할 수 있게 지원해 주어서 React 개발자들이 선호한다.
또는 CSR에서 메타 태그를 정의해주는 라이브러리를 사용하는 것도 방법이다. 대표적인 라이브러리로 react-helmet이 있다. 동적으로 SEO에 필요한 메타 태그들을 쉽게 변경할 수 있도록 도와주는 라이브러리로, JSX 또는 TSX 내부에서 메타 태그를 관리할 수 있다.
SSR과 CSR MVC 구조
참고
