Next.js를 알아보자!

Next.js는 무엇이냐! 

1. React 라이브러리의 프레임워크로 Server side rendering (서버에서 HTML다 완성해서 보내주는 것)을 할 수 있다.

2. client side rendering으로도 할 수 있다.

3. 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR) 도 가능하다! 

Next.js를 쓰는 이유! 

SEO(Search engine optimization)를 위한 SSR(Server side rendering)

이전에는 React 나 vue같은 라이브러리를 써서 client side rendering (CSR)을 했었다.

그 이유는 화면이 부드럽게 렌더링 되고되고 특정 부분의 정보가 바뀌더라도 새로고침 되지 않아 사용자친화적이기 때문이다.

하지만 단점도 있다. SEO(검색엔진 최적화)에 불리하고 첫 페이지 렌더링이 느리다(js 파일 받아오기 때문)는 점이다. 그래서 이를 보완하기 위해 Next.js 를 쓰는 것이다! 

Next.js를 사용한 Server side rendering (MPA Multi Page application)의 장단점! 

장점! 

1. SEO에 유리하다. 

 SEO에 유리한 이유는 모든 데이터가 HTML에 담겨진채로 브라우저에 전달되기 때문에 크롤링이 빨리 되기 때문이다. (크롤봇이 일정시간이 지나면 크롤링을 안 한다)

2. 초기 렌더링이 빠르다. 

서버에서 HTML 파일이 완성돼서 오기 때문에 빠르게 렌더링 된다.

단점! 

1. TTV(Time To View)와 TTI(Time To Interact) 간에 시간 간격이 생긴다.

 사용자가 클릭을 해도 반응이 없을 수 있고 페이지 요청 때마다 새로고침이 일어나게 된다!

초기 렌더링이 빠른 장점에서 오는 단점이기도 하다.

2. 서버에 부화가 온다. 

 서버에서 페이지 렌더링에 필요한 리소스들이 전부 포함돼서 응답되기 때문에 서버가 힘들어한다!

3. 깜박인다. 

 새로운 요청마다 새로고침이 되기 때문에 깜박임이 생긴다. 

 

Next.js의 단점!

물론 Next.js의 단점도 있다. 

1. 폴더기반 라우팅으로 예약파일이 많아져서 프로젝트의 크기가 커진다면 복잡해진다! 

2. 클라이언트 컴포넌트와 서버 컨포넌트를 구분해서 코드를 짜야한다! 

3. wedSoket 이나 webRTC를 쓰고싶다면 다른 nodejs 서버에서 만들어야 한다! 

4. 서버 기능이 많지않다! 

 

다음시간에는 어떻게 사용하는지를 알아보쟈!