git remote add 리모트명 깃허브주소
- React.js 를 더 편하게 사용할 수 있는 기능을 미리 제공
- Next.js는
웹 개발 프레임워크이다. (프레임워크는 미리 기능을 만들어서 제공함.) - React.js 는 그냥 js 라이브러리이다.
- 기능 구현의 주도권을 개발자가 가짐 : 라이브러리
- 기능 구현의 주도권이 개발자에게 제한적이다. : 프레임워크
- 오해하면 안됩니다. (개발 주도권이 개발자에게 있는 것이 좋지 않습니다.)
- 쓰고 싶은 기능을 개발자가 선택하는 자유가 있음.
- 개발의 결과물에 대해서 유지, 보수 가 개발자에게 한정됨.
- 대규모 프로젝트에서는 라이브러리 선택에 따라서 개발 진행 변경됨.
컨벤션 유지가 어렵다.
- Next.js 즉 프레임워크는 자유도가 낮다.
- 자유도가 낮은 대신에
거의 모든 기능을 기본적으로 제공한다. - 복잡한 기능을 기본적으로 제공해줌으로, 많은 부분이 해결되어져 있다.
- React.js 에 추가적인 기능을 보완했음으로 상당히 이해하기 수월하다.
- 자유도가 낮은 대신에
- 면접볼때 왜 Next.js 쓰는지 물어볼때 1순위로 추천
- 사전 랜더링이란
- 웹브라우저의 요청에 Server 에ㅓ 미리 랜더링 완료한 HTML 응답으로 제공함.
- React.js 는 CSR(Client Side Rendering) 으로 랜더링, 즉 화면에 HTML 출력 느림
- Next.js 는 사용자 요청이 들어오면 서버에서 컴포넌트들을 랜더링하고 그 결과물을 응답해줌.
SEO 에 최적화됨으로 인해서 검색노출에 유리함.
- js 로 html 을 즉시 생성하는 방식 :
- 리액트의 기본적인 랜더링 방식(Client Side Rendering)
- 랜더링 단계
- 1단계 : 사용자 > 웹브라우저 요청 > 서버에서
빈 껍데기 HTML응답 > 웹브라우저 출력 > 사용자 - 2단계 : 다시 서버에서 js 압축파일(JS Bundle) > 웹브라우저 응답
- 3단계 : 웹브라우저 JS Bundle 실행 > 웹브라우저 HTML 출력 > 사용자
- 1단계 : 사용자 > 웹브라우저 요청 > 서버에서
- 장점
- 페이지 이동이 상당히 빠르다는 장점
- 초기 접속 후 라우터 이동은 상당히 빠르다는 장점
- 서버에서 응답하는 JS Bundle 에 모든 기능관련 코드를 내려 받았으므로
- 단점
치명적으로 초기 랜더링이 느리다는 단점.- 접속 이후에 첫화면을 랜더링할때까지 시간이 많이 걸림
FCP(First Contentful Paint)가 느리다. (요청 후 첫 랜더링 되는 시간)- FCP 가 10초 이상이면 이탈율이 150% 이상임.
- Server Side Rendering 의 줄임말.
- Next.js 의 특징으로 CSR 의 단점을 보완함.
- 랜더링 단계
- 사용자 > 웹브라우저 요청 > 서버에서 JS 번들을 실행 > HTML 생성 > 웹브라우저 응답
- SSR 에서의 실제 랜더링은 2단계를 거침
- 1단계 : HTML 을 서버에서 JS 번들을 이용해서 HTML 생성 후 > 웹브라우저 랜더링
- 2단계 : 하이드레이션(Hydration)을 통해서 JS 의 상호작용기능을 적용함.
- FCP 개선 이후에 사용자 상호작용 가능한 시점을 말함.
- 이 상호작용 가능한 시점을 TTI 라고 합니다.
- 위의 내용은 면접에서 물어볼 수 있으며, Next.js 의 이해를 위한 상식
React App 의 단점인 FCP 를 개선하고 React App의 빠른 페이지 이동 활용