SPA...SSR...CSR..MPA..어디서 많이 들어봤지만 뭔지는 제대로 몰랐고 정리를 해보았다.
(개인 공부 내용을 정리한 글입니다.)
CSR(클라이언트 사이드 렌더링)방식으로 렌더링
쉽게 말해 1개의 페이지만 있는 어플리케이션을 말한다. 하나의 페이지에서 내용만 바뀌는것인데 웹 앱에 필요한 모든 정적 리소스를 최초에 한번만 다운로드 하는것, 이후 새로운 페이지가 요청 되면 페이지에 필요한 데이터만 받아 페이지를 갱신
주소에 따라 다른 뷰를 보여주는 것을 라우팅이라 하며 리액트에선 이 라우팅이 기본으로 내장되어있지 않기 때문에 react-router를 설치해서 구현한것
서버사이드 스크립트 없이 초기 HTML파일에서 css, js등 리소스 파일과 모듈을 모두 로드해 페이지 이동없이 특정 영역만 새로운 모듈을 호출해 데이터를 바인딩하는 애플리케이션
여러 개의 페이지로 구성된 어플리케이션.
MPA는 SSR(서버 사이드 렌더링) 방식으로 렌더링한다.
서버에서 완전히 만들어진 HTML파일을 받아 페이지 전체를 렌더링 하는 방식, 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다
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 앞으로 조금씩 공부기록을 커밋할 예정