[React/Next] NextJS의 장점

 

저는 next.js 환경에서 개발을 하고있는데요!
처음에는 그저 부트캠프에서 배운게 next라서, 그리고 ssr에 용이하다 해서 사용했어요!

 

근데 지금 시점에서 돌아보면 부트캠프에서 배워서 라는 말은 말도 안되고..

react18 버전 부터 SSR도 자체적으로 지원하는데 왜 사용해야 될까요?

 

next.js의 장점

 

1. 직관적인 라우터 구조

NextJS 는 React와는 다르게 내장되어있는 라우터를 사용하게 됩니다.

/pages폴더 하위폴더로 만들어진 폴더명에 따라 페이지의 path를 부여해주기 때문에

react router dom 을 사용 하는것에 비해 더욱 직관적으로 라우터를 관리할수 있습니다.

* react와 다르게 pages폴더가 src폴더 외부에 있는 이유입니다.

 

 

2. 라우터 구조에 따른 다이나밍 라우팅의 용이성

위에서 언급한 내용처럼 NextJS는 보다 강력한 자체 라우터를 사용하는데요,

이는 다이나믹 라우팅에 용이성을 가져옵니다.

예를 들자면 특정 게시물을 보여주고 싶을때엔 게시물의 ID를 다이나믹 라우팅 해주어 접근하게 되는데 /pages/document/[documentID] 이런식으로 작성하여

게시글의 ID를 라우터에 넣어주게 됩니다.

 

 

3. Code Splitting

NextJS는 번들을 여러조각으로 나누어 페이지의 랜더링시 가장 먼저 필요한 부분부터 전송해주는 방식을 이용해

어플리케이션의 로드시간을 단축시켜줍니다.

 

4. router

1. next/Link
   Next/Router에서도 react-router-dom 처럼 Link를 이용한 정적라우팅을 지원합니다.
2. next/router
   가장 많이 사용하는 방식으로 NextJS의 라우터 객체를 이용한 방법입니다.

5. Pre-rendering

NextJS는 모든 페이지를 사전 렌더링 하게 되는데요! 이때 두가지 방식을 이용합니다.

• static side generation (ssg)
  정적 생성의 경우 프로젝트가 빌드되는 시점에서 html 파일이 생성됩니다.
• Server side rendering (ssr)
  ssr의 경우는 매 요청마다 html 파일을 생성합니다.

 

---------------------------------------------------------------------   

next.js 13버전 업데이트 이후 위 내용에서 변경된 내용이 상당부분 존재합니다. 

변경된 내용에 대한 글은 빠른 시일내로 업데이트 하겠습니다! 

 

 

* 함께 보기

 

[Next] Next13에서 app dir 과 Colocation의 도입해보기!

https://takd.tistory.com/entry/Next-Next13%EC%97%90%EC%84%9C-app-dir-%EA%B3%BC-Colocation%EC%9D%98-%EB%8F%84%EC%9E%85%ED%95%B4%EB%B3%B4%EA%B8%B0