SPA와 MPA
SPA : single page application
하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 방식의 웹 어플리케이션
한 페이지에 머무르면서 필요한 데이터를 서버에서 받아와 부분적으로 업데이트 하는 것
MPA : multiple page application
사용자가 페이지를 요청할 때 마다, 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션
전통적 방식을 이용한다면 SPA가 사용하는 렌더링 방식은 CSR이고, MPA가 사용하는 렌더링 방식은 SSR이다.
전통적인 방식을 벗어나 SPA에서도 적절히 SSR을 구현할 수 있고 그때의 장점과 이유를 알아보자.
CSR
react.js, vue.js 가 대표적인 CSR 방식이다.
client side rendering 방식으로 렌더링이 클라이언트 쪽에서 일어난다. (화면에 보여줄 내용을 클라이언트에서 생성하기 때문에 클라이언트 사이드 렌더링)
브라우저가 서버에 html과 js 파일을 요청하고 이후 서버로 부터 html와 static 파일을 받아오고 나면, 사용자의 요청에 따라 js를 이용해서 동적으로 렌더링하는 방식이다.
즉 서버에서 처리 없이 클라이언트로 보내주기에 js가 모두 다운로드 되고 실행이 끝나기 전까지는 사용자는 볼 수 있는 것이 없다.
👍 장점 :
- 첫 로딩만 기다리면 동적으로 빠르게 렌더링이 되기 때문에 사용자 경험이 좋다
- 서버에 요청하는 횟수가 적기 때문에 서버의 부담이 덜하다.
👎 단점 :
- 처음에 화면이 로딩되는 속도가 다소 느림(html, css 와 모든 스크립트를 한꺼번에 불러옴)
- 검색 엔진의 검색 봇이 html 파일에서 데이터를 크롤링을 하는데 어려움을 겪기 때문에 검색엔진 최적화(SEO)의 문제가 있다
- 구글 봇의 경우 JS를 지원하지만, 다른 검색 엔진의 경우 그렇지 않기 때문에 문제- 맨 처음 html이 비어있어 구글을 제외한 검색엔진에서 데이터를 수집할 수 없음
SSR
next.js, nuxt.js 가 대표적인 SSR 방식이다.
server side rendering 방식으로 서버 쪽에서 렌더링 준비를 마친 후에 클라이언트에 전달하는 방식이다.
브라우저가 페이지에 요청할 때마다 해당 페이지에 관련된 html, css, js 파일 및 데이터를 받아와 렌더링 한다.
유저가 서버에 요청을 보내면 서버는 즉시 렌더링이 가능한 html 파일을 만든다. 클라이언트에 파일이 전달되는 순간 html은 즉시 렌더링 된다.(단 사이트 자체는 조작이 불가능 하다. js가 읽히기 전)
이후 클라이언트가 js를 다운받고, 조작은 불가능 하지만 다운이 받아지고 있는 사이에 유저는 컨텐츠를 볼 수 있다. 단 이때의 사용자 조작을 기억한다.
브라우저가 js를 실행하고 이후 성공적으로 컴파일 되면 기억하고 있던 사용자 조작이 실행된다.
👍 장점 :
- 첫 로딩 시간이 빠르다(필요한 부분의 html과 스크립트만 불러옴)
- js를 이용한 렌더링이 아니기 때문에 검색엔진 최적화가 가능하다.
- 초기 데이터를 수집하고 있어 크롤러가 데이터를 수집하기 적합.
👎 단점 :
- 매번 페이지를 전환할 때 마다 새로고침 되기 때문에 사용자 경험이 좋지 않다.
- 서버에 매번 요청을 하기 때문에 서버의 부하가 커진다.
- 시용자 클릭 시 전체적인 웹 사이트를 서버에서 다시 받아오는 것과 동일 -> 깜빡임 issue
CSR, SSR를 각각 사용하는 경우
CSR을 사용하는 경우
- 네트워크가 빠를 때
- 서버의 성능이 좋지 않을 때
- 사용자에게 보여주어야 하는 데이터의 양이 많을 때 (로딩창을 띄울 수 있음)
- SEO에 상관 없을 때
- 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 떄 (아예 렌더링 되지 않아 사용자의 행동을 막는 것이 유리)
SSR을 사용하는 경우
- 네트워크가 느릴 때 (CSR은 한번에 모든 것을 불러오지만, SSR은 각 페이지 마다 불러오기 때문)
- SEO(검색엔진 최적화)가 필요할 때
- 최초 로딩이 빨라야 하는 사이트를 개발할 때
- 웹 사이트가 상호작용이 별로 없을 때
Next.js 사용한 이유
pages 폴더 아래에 폴더 및 파일을 구성하면 자동으로 라우팅 처리가 되어 개발에 편리하고 처음 웹 페이지 로드시에 SSR로 SEO를 최적화하며, 클라이언트와 상호작용할 때에는 CSR 방식으로 필요한 데이터만 요청할 수 있기 때문에 SSR과 CSR의 장점을 모두 적용할 수 있다.
next.js 작동 원리 (CSR + SSR)
- 서버에 페이지 접속을 요청하면 SSR 방식으로 html을 렌더링
- 브라우저에 js를 다운로드하고 리액트를 실행 ( 초기 로딩 성능 개선, 이미 콘텐츠 포함 된 상태라 SEO 가능)
- 사용자가 상호작용하면서 다른 페이지로 이동할 떄엔 SSR이 아닌 CSR 방식으로 브라우저에서 처리
