NextJS) Next.JS 왜쓸까?

사실 Next를 써야 한다해서 그냥 쓰지, 쓰다보니 기본적으로 제공되는 장점이나 무엇때문에 편했는지, 빨랐는지는 알지 못한 채 사용하는 경우가 있습니다.

저 또한 프로젝트에 투입될때 처음으로 Next를 경험했고, 이미 Next로 작성된 코드들을 수정하다보니 막상 뭐가 좋은지, 잘쓰고 있는건지 전혀 알지 못한채 사용 하고 있었습니다.

그래서 오늘은 Next를 사용함으로써 얻는 기본적인 장점들 및 기본 개념을 한번 살펴보려고 합니다.

---

① SSG(Static Site Generation) 과 SSR(Server-Side Rendering)

SSG와 SSR 모두 서버 사이드 렌더링 (SSR) 을 의미하긴 하지만, 약간 다른 개념이다.

 

SSG는 Next.js의 기능 중 하나로, 미리 정적인 HTML을 빌드 시점에서 만들고 미리 배포를 합니다.

이 정적 파일은 클라이언트 요청시에 서버에서 바로 제공되며, 렌더링의 결과물이 정적인 상태로 바로 전송됩니다.

이는 데이터가 자주 변경되지 않는 경우에 적합하고, 초기 로딩 속도 및 SEO에 매위 뛰어납니다.

 

SSR은 요청이 발생할 때마다 서버에서 동적으로 페이지를 렌더링합니다.

매 요청마다 서버에서 페이지를 렌더링 하므로 항상 최신의 데이터를 보여줄 수 있으며, 실시간 업데이트나 사용자 개인화 같은 기능에 적합합니다.

 

결국 두 가지 경우 다 서버 사이트 렌더링이라는 의미는 같지만, 약간은 다른 SSG와 SSR입니다.

 

② Next를 쓴다고 SSG나 SSR을 사용하고 있다고 할 수 있는가?

No. Next에서 getStaticProps나 getServerSideProps와 같은 데이터를 불러와 페이지를 사전 렌더링 하는  기능을 사용하지 않았다면 Next는 기본적으로 CSR 방식을 따르게 됩니다.

 

 

③ 그렇다면 SSG와 SSR을 모두 안썼는데, SEO가 안된 걸까요?

No. Next는 CSR을 사용하여도 일부 SEO를 제공 해줍니다.

페이지가 CSR로 렌더링될 때 HTML의 메타 태그와 데이터를 기반으로 서버 측에서 검색 엔진에 적절한 메타 데이터를 제공 해주기 때문입니다.

하지만 더 좋은 SEO를 위해서는 getStaticProps나 getServerSideProps를 활용하여 사전에 데이터를 가져오는 방식을 고려하는 것이 더 좋습니다.

 

④ 그 외의 Next의 눈에 띄는 장점은?

기본적으로 SSG와 SSR을 제외하고도 Next가 기본적으로 제공해주는 많은 장점들이 있습니다.

 

- 자동 코드 분할(Automatic Code Splitting)

   Next의 자동 코드 분할은 페이지별로 필요한 컴포넌트와 모듈을 동적으로 분할하여 각 페이지에 필요한 최소한의 코드   

   만 전달합니다. 이로 인해 초기 로딩 속도는 줄고 페이지 로딩 속도는 빨라집니다.

 

- 핫 모듈 교체(HMR)

   개발 모드일때 코드 변경기 새로고침 하지 않고도 수정된 코드를 즉시 적용할 수 있게 해줍니다. 

    ?? React도 그냥 코드 변경하면 자동으로 바뀌던데요?

   React로 개발할때도 물론 코드가 즉시 변경되긴 한다. 하지만 이는 Next와는 달리 애플리케이션을 새로고침 하고, 변경  

   된 부분만 업데이트 하여 브라우저에 반영하는 것이다. (CRA로 만들었다면 설정이 되어있다) HMR은 전체 페이지를 새로고침 하지 않고도,

   수정된 모듈만 교체하여 렌더링 하기 때문에 어플리케이션의 로딩시간을 더욱 단축 시킨다.

 

- 자동 페이지 라우팅 ★

   이 부분이 저는 아마 next의 장점 중 가장 좋은 것 중 하나라고 생각합니다.

   Next는 파일 시스템 기반 라우팅 시스템으로, Pages 폴더를 기준으로 별도의 라우팅 구성이 없이도 라우팅 처리를 해줍     니다. 만약 pages/post/abc.js 파일이 있다면 /post/abc 의 경로로 매칭이 됩니다. 이는 React의 초기 개발 세팅을 위해 라   우팅을 설정하는 귀찮음(무지무지귀찮음)을 처리해 줌으로 아주 좋다고 생각합니다.

---

여기까지 기본적으로 Next에 대해서 조금(아주 조금이라면 조금) 알아 보았습니다.

다음 번엔 Next의 SSR와 Redux를 사용하는법을 공부해보도록 하겠습니다. 

정확하지 않은 정보나, 추가 의견이 있으시다면 댓글로 알려주시면 감사하겠습니다~^^