SPA...SSR...CSR..MPA..어디서 많이 들어봤지만 뭔지는 제대로 몰랐고 정리를 해보았다.
(개인 공부 내용을 정리한 글입니다.)
SPA (싱글 페이지 어플리케이션)
CSR(클라이언트 사이드 렌더링)방식으로 렌더링
쉽게 말해 1개의 페이지만 있는 어플리케이션을 말한다. 하나의 페이지에서 내용만 바뀌는것인데 웹 앱에 필요한 모든 정적 리소스를 최초에 한번만 다운로드 하는것, 이후 새로운 페이지가 요청 되면 페이지에 필요한 데이터만 받아 페이지를 갱신
주소에 따라 다른 뷰를 보여주는 것을 라우팅이라 하며 리액트에선 이 라우팅이 기본으로 내장되어있지 않기 때문에 react-router를 설치해서 구현한것
CSR의 장단점
장점
- 자연스러운 페이지 이동과 좋은 사용자 경험
- 필요한 리소스만 부분적으로 로딩
- 속도 향상
- 서버 요청이 적다
단점
- 초기 다운로드 속도가 느리다
- 좋지 않은 SEO
SEO (검색 엔진 최적화)-웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정 - 앱규모가 클수록 파일의 크기도 커짐
정리
서버사이드 스크립트 없이 초기 HTML파일에서 css, js등 리소스 파일과 모듈을 모두 로드해 페이지 이동없이 특정 영역만 새로운 모듈을 호출해 데이터를 바인딩하는 애플리케이션
MPA (멀티플 페이지 어플리케이션)
여러 개의 페이지로 구성된 어플리케이션.
MPA는 SSR(서버 사이드 렌더링) 방식으로 렌더링한다.
서버에서 완전히 만들어진 HTML파일을 받아 페이지 전체를 렌더링 하는 방식, 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다
SSR의 장단점
장점
- SEO 관점에서 유리(완성된 형태의 HTML파일을 서버로부터 전달받기 때문)
- 첫 로딩이 매우 짧다
단점
- 새로운 페이지를 이동할때 깜빡이는 현상 (전체 페이지를 다시 렌더링 하기 때문)
- 서버 렌더링에 따른 과부하
- TTV(Time To View)와 TTI(Time To Interact) 간에 시간 간격이 꽤 긴편
서버에서 이미 잘 만들어진 인덱스 파일을 받아오고, 사용자가 웹사이트를 볼 수있음, BUT 동적으로 제어할수 있는 JS파일은 받아오지 않아서 사용자가 클릭을 해도 아무런것도 처리할수 없음 최종적으로 JS파일을 서버에서 받아와야지 그때부터 인터렉션이 가능
Next.js
React 기반 프레임 워크
폴더 및 파일 기반 Routing을 지원하고, SSR 지원
즉, SEO 적용이 수월하다
아직 리액트 어플리케이션 사용에 능숙하지 않지만 호기심이 생겨 사용해보았다.
node.js와 npm 설치는 필수
npx create-next-app 원하는 프로젝트 이름
설치가 완료되면
http://localhost:3000 에 접속해 확인하여 해당화면이 잘 나오면 설치가 잘된것이다.
next.js는 별다른 설치가 없어도 라우팅이 지원된다.
pages 폴더에 About.js 파일을 만들었다.
export default function About() {
return <div>ABOUT</div>;
}
해당 url로 이동하면 자동으로 라우팅이 된다.
사용법은 기존 리액트와 크게 차이가 없었기에 유튜브 무료강좌를 보고 따라해보았다.
Next.js에는 두가지 중요한 기본 페이지가 있는데 _document와 _app 이다. 두개의 차이가 명확히 이해되지 않았고
https://merrily-code.tistory.com/154
https://velog.io/@cyranocoding/Next-js-%EA%B5%AC%EB%8F%99%EB%B0%A9%EC%8B%9D-%EA%B3%BC-getInitialProps
에서 차이점을 조금이나마 이해하였다.
https://github.com/boyfromthewell/hello-next-js 앞으로 조금씩 공부기록을 커밋할 예정
