Next.js 소개 및 환경설정

1. Next.js 소개

1.1 Next.js 란?

- Vercel이 만든 React Framework (for production)

1.2 SSR 이란?

- Server Side Rendering

- 클라이언트로 전달될 HTML 파일 내용(일부를) 미리 그려서 내려주는 것.

- 크라이언트 랜더링의 속도를 빠르게 하여, 사용자 체감 속도 증진

- 검색 엔진이 JavaScript를 실행하지 않고 크롤링 가능 SEO

- 개발자도구에서 disable javascript 선택시 아무것도 보이지 않으면 CSR이다.

 

1.3 그 외 주요 기능

- 각종 Optimization (폰트나 이미지)

- Hot Code Reloading

- Automatic Routing

- Automatic Code Splitting

- Prefetching

- Dynamic Components Import

- Static Exports

1.4 node.js 설치

 

2. 환경설정 및 프로젝트 생성

2.1 CSR과 SSR비교

- CSR : javaScript가 브라우저에서 돌아가지 않으면 아예 되지 않음 크라이언트에서 돌아감 API 호출까지도

- SSR : SSR에서 API호출 하고 data를 props로 전달하면 그것을 페이지로 미리 그려서 사용자에게 전달.

- Next.js로는 둘다 가능

 

2.2 Pre-rendering

- SSG (Static Generation)

  getStaticProps  : build되는 시간에 데이터를 미리 받아오고 화면을 그린다.

 

- SSR

  getServerSidePops :  요청이 서버로 갈 때마다 받아온다.  

 

=> 두가지를 콘솔로 확인함.