MPA(SSR) 과 SPA(CSR) + Next.js
next.js를 이용해 웹 어플리케이션을 제작하기 전 next.js가 무엇인지 왜 사용되는지를 알아야겠다고 생각했다.
그러기 위해서는 SSR과 SPA의 차이와 특징을 살펴봐야한다.
🌿 MPA(SSR)
SSR방식은 전통적인 랜더 방식으로 사용자가 url을 클릭하면 브라우저가 html문서를 읽으며 해당하는 정보를 랜더한다. 그리고 새로운 페이지를 클릭했을때 해당하는 html 문서 전체가 다시 랜더되는 방식이다.
🌿 SPA(CSR)
SPA는 말 그대로 한개의 페이지가 랜더가 되고 그 안에서 해당하는 컴포넌트만 변경되는 것이다.
🌿 특징
MPA(SSR)
사용자가 페이지를 클릭했을때 상대적으로 빠르게 화면에 html문서의 내용을 보여줄 수 있다. 하지만 js파일을 초기 랜더 후에 받아오기 때문에 화면에 보여지는 것과 기능의 시간 차가 있을 수 있다.(TTI와 TTV의 차이 발생)
SPA(CSR)
리액트의 경우에는 모든 컴포넌트를 받아 온 후 랜더되기 때문에 사용자가 페이지를 클릭했을때 기다리는 시간이 필요할 수 있다. 기능과 함께 페이지가 랜더되기 때문에 보여지는 것과 기능의 시간적 격차가 없다(TTI와 TTV는 동일)
- TTI(Time to Interact)
- TTV(Time to View)
🌿 장단점
MPA(SSR)의 장점
- 브라우저에 상대적으로 빠르게 UI가 나타난다.
- SEO(Search Engine Optimazation)가 적절하다.
MPA(SSR)의 단점
- blinking 현상이 나타난다. 다른 페이지를 선택할 경우 화면 깜빡임 현상이 나타나 UX적인 불편함이 있다.
- 페이지 전체를 불러와야하기 때문에 서버의 과부하가 생긴다.
- 변함없는 정보까지도 새롭게 랜더하기 때문에 성능에도 좋지 않다.
- 모바일 어플리케이션 제작을 따로 새롭게 해야한다.
SPA(CSR)의 장점
- 페이지 전환시 blinking 현상이 없어서 UX의 편안함을 준다.
- 해당하는 컴포넌트만 업데이트 해주기 때문에 성능적으로 좋다.
- 모바일 어플리케이션을 제작하기 편하다.
SPA(CSR)의 단점
- html에 직접 문서작업이 돼있지 않기 때문에 SEO의 어려움이 있다.
- 리액트의 경우에는 모든 컴포넌트를 받아와야하기 때문에 UI가 늦게 나타날 수 있다.
🌿 Next.js
넥스트는 SSR방식으로 SPA의 단점을 보완하기 좋은 라이브러리이다.
초기 화면을 빠르게 볼 수 있도록 해주며, SEO문제도 해결해준다.
넥스트의 code splitting과 getInitialProps() 기능이 이러한 문제를 해결해 준다. 다양한 기능들이 있지만 특히 이 두가지 기능이 SPA 페이지의 단점을 보완시켜준다.
먼저, getInitialProps() 기능은 리액트의 모든 컴포넌트를 읽은 후 랜더되는 방식으로 초기 화면을 느리게 보여주는 일을 막아준다. 리액트는 먼저 render()함수를 보내주고 componentDidMount()를 통해 데이터를 받은 후 다시 render()함수와 함께 랜더된다. 2번의 랜더를 진행하는 반면, Next의 getInitialProps()는 먼저 데이터를 받고 render()함수를 데이터와 함께 실행시켜준다. 그래서 빠르게 랜더를 할 수 있도록 도와준다.
그리고 code splitting 방식 또한 이러한 문제를 해결하는데 큰 역할을 한다. 리액트의 초기 모든 컴포넌트를 받아오는 것을 pages로 라우터를 나누고 가장 먼저 보여주는 화면에 해당하는 컴포넌트를 받아와 실행시킨다. 모든 컴포넌트를 받아와서 실행시키는 기존의 리액트 SPA 방식에서 이러한 분리를 통해 빠르게 화면을 노출 시킬 수 있다.
이렇게 code splitting을 이용해 빠르게 첫화면을 보여주고 getInitialProps()를 이용해 SSR의 방식으로 html을 서버에서 그려서 보여주기 때문에 검색엔진의 문제도 해결된다.
🌳
이렇게 SPA 프로젝트를 진행하면서 Next.js를 사용해야하는 이유를 차근차근 공부했다. 어떤결과물을 만들어 내야하는지 만큼 내가 만들고 있는것이 어떤 기능과 장단점을 가지고 있는지를 잘 파악하고 있는 것이 중요하다고 생각한다.
