Next JS 기본개념 이해하기

특징

 

• pre-rendering
• SSR + SSG 지원
• 간편한 라우팅
• 코드 스플리팅
• Hot Code Reloading

 

 

1. pre rendering 사전렌더링

 

이 개념은 카테고리와 같이 큰 틀로 방식이라는 단어로 접근을 해야 이해하기 쉽다.

 

사전렌더링이 무엇이냐?

각 페이지마다 html을 미리 그려놓고(생성)

렌더 시에 최소한의 자바스크립트(스플리팅) 된 코드만 실행되어 페이지를 반응성 interactive, 인터랙티브) 있게 한다.

이런 과정을 hydration 이라고 함

 

쉽게 이야기해서 그려 둔, 또는 그려진 html 을 클라이언트로 내려준다.

리액트의 기본개념 spa, csr의 html 빈 걸 내려주고 거기에 js,css 를 입힌다는 개념과 상반됨.

 

next js 에서는 pre-rendering 의 개념으로 ssg, ssr의 2가지의 방식이 있음.

 

2. ssr ssg 지원

• ssg
• ssg
• csr

ssg 기본개념

 

npm run build 와 같이 빌드타임때 pag폴더들의 파일을 static 한 html 을 생성 후 렌더링 할 때 이 html 을 미리 보여줌

ssg 의 default 가 pre-rendering 임.

 

ssr 기본개념

 

서버사이드 렌더링은 서버에 요청을 할 때마다 렌더링 된 html 파일을 생성하여 내려주는 것

렌더링 된 html 을 내려주기 때문에 눈에 보이는 건 일단 빠르다고 느낄 수 있다.

하지만,

서버에 요청을 할 때마다라는 건 페이지 이동시에도 요청을 계속 한다는 것이고

그러면 페이지가 바뀔때 마다 html 을 갈아 끼우기 때문에

화면 깜빡임, 서버 요청에 대해서 서버에서의 부담, 데이터 손실? 까지 우려되지만

seo 라는 검색엔진에 대해서는 페이지마다 각기 다른 html 의 meta 정보들이 있기 때문에

유리하다고 볼 수 있다.

 

csr 기본개념

 

리액트는 spa 로써 csr 을 기본으로 하는데

처음에 빈 html 과 js, css 를 받아와 필요한 페이지마다 js와 css 를 입힘으로써 페이지를 렌더링 하는 것

초기에는 html 에 js css 모두 받아오기 때문에 느리다고 느낄 수 있지만

그 이후에는 모두 받아온 것으로 서버에 재요청 없이 클라이언트에서 바로바로 바꿔주기 때문에 

초기에만 느리지 그 이후에는 빠르다고 느낄 수 있다.

화면 깜빡임, 서버 부담도 덜하지만 검색에 노출되는 건 어렵다.

react-helmet 이라는 라이브러리를 사용하면 seo에 어느 정도 대응이 가능하다.

초기에 많이 받아오는 번들링에 대해서도 코드스플리팅은 Lazy Loading 으로 대응이 가능하다.

 

 

ssg, ssr 모두 클라이언트로 html 을 그려서 내려준다는 점에서 Pre-rendering방식이라고 이야기 할 수있다.

 

3. 간편한 라우팅

 

리액트에서 흔히 쓰는 react-router / react-router-dom 로 route 를 지정해서

해당 라우터에 맞는 컴포넌트들을 렌더 시켰다.

하지만 next 에서는 

page 폴더의 하위 폴더 들이 곧 url 이 되어 작동한다.

 

예를 들어 page/index.js 는 '/' 페이지

page/item/index.js 는 /item 페이지 가 된다.

 

그리고 동적페이지/url 도 가능하다.

page/[id]/index.js 또는 page/[id].js 로 id 값에 따른 동적 페이지/url 이 간편하게 가능하다.

 

4. 코드 스플리팅

 

리액트는 번들을 초기에 한번에 받아오기 때문에 성능저하를 우려할 수 있다.

초기에 번들을 많이 받아 올 수록 페이지는 빈 하얀색 화면만 보이는 시간이 길어지고

그럼 사용자는 새로고침이나 잘못됬나싶어서 그냥 나가는 경우가 있을 수 있다.

 

해결방법은 번들을 초기에 많이 안받아오면 된다.

그 방법으로 code spliting 인데 번들을 필요한 것만 가져오는 방법임.

 

next 는 기본적으로 html 을 페이지단위로 각기 생성하기 때문에

그 html 에 필요한 번들만 받아 올 수있다. (자동)

 

5. Hot code Reloading 

 

딱히 중요한 개념은 아닌데

그냥 개발모드에서 코드 수정 시 새로고침없이 자동으로 바껴있는 기능임.

리액트도 라이브러리를 사용하면 대응이 가능하지만

개발자 입장에서 케바케로 많이 불편하면 좋게 느껴질 수 있고 아니면 덤덤하게 느껴질 수 있을 것 같다.