Next.js 란?
화면에 렌더링하는 방식은 서버사이드 렌더링과 클라이언트 사이드 렌더링이 있다. next.js 는 서버사이드 렌더링이다. 서버사이드 렌더링의 장점은 렌더링이 빠르다는 점이다. 서버사이드 렌더링은 클라이언트 사이드 렌더링과는 다르게 서버에서 javascript 와 css 파일을 완성시켜 클라이언트에 전달한다. 클라이언트는 별다른 작업을 수행하지않고 화면에 렌더링만하기 때문에 렌더링이 빠르다.
실행방법
Next.js npm run dev로 실행을한다. dev 말고도 build / start / lint 가 있다.
dev 개발모드일경우 build 는 실제 사용하기위함.
start 는 next.js 서버 실행.
lint 는 eslint 형태로 배치한다.
라우터
react 는 react-router-dom 라이브러리를 사용해서 라우터를 이용한다. next.js 의 라우터 방식은 조금 다르다.
next.js의 파일들은 pages directory 안에 생성되어져야하고 파일이름을 기준으로 라우터가 정해진다. 예를 들어 pages 안에 bout.js 파일을 생성하게 되면 라우터가 /about 이된다. 동적 라우터도 생성이 가능한데 만약 pages/posts/[id].js 파일을 생성하게되면 라우터는 'posts/1','posts/2'의 방식으로 접근 가능하다.
pre-rendering
next.js 는 모든 페이지를 pre-rendering 한다. 클라이언트 사이드 렌더링은 javascript 파일을 다운받아 HTML 을 완성하고 화면에 렌더링한다. 하지만 next.js (서버사이드렌더링) 은 html 을 미리 완성을 한후 클라이언트에 보내주고 브라우저가 렌더링이된후에 유저와 상호작용을 하기위해 javascript가 실행된다. (hydration 이라고한다.)
pre-redering은 두가지 방식으로 Static Generation 과 server-side rendering 방식이 있다.
1.Static Generation 은 파일이 build 되어질때 html 파일들이 모두 완성되어지고 요청이 들어올때 미리 완성되어진 html파일을 보내준다.
2.server-side는 매요청시마다 html 파일들이 생성되어지고 클라이언트에 전달한다. 사용자의 요청이 잦아지는 경우에는 좋지않은 방식이다. 