노마드 코더 NextJS 시작하기 강의를 수강하고 강의 내용을 바탕으로 작성한 글입니다.
NextJS 시작하기 – 노마드 코더 Nomad Coders
The React Framework for Production
nomadcoders.co
1. 라이브러리 vs. 프레임워크
1.1. # 라이브러리
: 개발자로서 사용하는 것
- 개발자가 라이브러리를 불러와서 라이브러리를 사용해서 무언가를 함
1.2. # 프레임워크
: 개발자의 코드를 불러옴
- 코드를 적절한 위치에 넣기만하면 코드를 불러와서 동작하게 함
2. CSR vs. SSR
2.1. # CSR (Client Server Rendering)
: 브라우저가 자바스크립트를 가져와서 클라이언트의 자바스크립트가 모든 UI를 생성함
- 브라우저가 HTML을 가져올 때는 빈 div를 가져옴
- 네트워크가 좋은 환경이 아닐 때는 UI를 가져오는 데 매우 많은 시간이 걸릴 수 있음
=> 개인정보 데이터를 기준으로 하거나, 보다 나은 UX를 제공하고 싶거나, 상위노출보다는 고객의 데이터 보호가 더 중요한 경우에 사용
2.2. # SSR (Server Side Rendering)
: 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링하는 방식
- 클라이언트 (브라우저)가 초기화면 로드를 위해 서버에 요청을 보내면 서버가 화면에 표시하는데 필요한 데이터를 얻어와 모두 삽입하고 css까지 적용해서 렌더링 준비를 마친 HTML과 JS코드를 브라우저에 응답으로 전달함
- 브라우저는 전달받은 페이지를 띄우고 브라우저가 JS코드를 다운로드하고 HTML에 실행시킴
- 장점
- 모든 데이터가 이미 HTML에 담겨진 채로 브라우저에 전달되기 때문에 SEO( 검색 엔진 최적화) 에 유리
- 서버로부터 화면을 렌더링하기 위한 필수적인 요소를 먼저 가져오기 때문에 CSR에 비해 초기 로딩 속도가 빠름
- 단점
- 매번 페이지를 요청할 때마다 새로고침되어 깜빡임이 생기면서 TTV(Time To View)와 TTI(Time To Interne) 간 시간 간격이 존재하게 되어 UX가 다소 떨어짐
- 페이지를 요청할 때마다 서버에서 페이지를 구성하는 모든 리소스를 준비해서 응답하므로 서버 부담이 증가함
=> 상위 노출이 필요하거나, 누구에게나 동일한 내용을 노출하거나, 페이지마다 데이터가 자주 바뀔 때 사용
2.3. # React vs. Next.JS
: React app은 CSR, next.JS app은 SSR 방식이다.
- next.js가 백엔드 상에서 react.js를 돌리고 있고, next.js가 페이지를 pre-generate(사전 생성)하면 HTML 페이지가 되어 유저가 페이지를 들어갔을 때 HTML을 볼 수 있게 됨
- 유저가 모든 js를 다운로드 하면 react.js가 주도권을 가져와서 프론트엔드에 나타나 react.js처럼 동작함
3. Next.JS
3.1. # Next.JS
: React 라이브러리의 프레임워크
- React + Exress + React-Router-DOM + SSR이 내제화되어 있음
3.2. # Next.JS 프로젝트 시작하기
- 프로젝트 시작 ( 프로젝트 폴더 이름에는 대문자 들어갈 수 없음 )
| $ npx create-next-app . --typescript |
- 개발환경 실행
| $ npm run dev |
- 배포파일 생성
| $ npm run build |
- 서비스 시작
| $ npm run start |
3.3. # Next.JS 특징
- Next.JS의 pages 폴더는 라우터의 기능을 함
- pages 폴더 내 파일이름을 url 경로와 같고, export default 해주어야 함
- pages 폴더 내 함수의 이름은 중요하지 않음
- 예외적으로 메인 홈 화면만 index.tsx 파일에서 라우팅 됨
