언제까지 React 쓸래?? 이제는 Next 사용해야지

혹시 웹 프론트엔드 분야를 하고 있는 개발자님들에게 궁금한 점이 있습니다. 혹시 프로젝트를 하실 때 리액트를

쓰시나요?? 아니면 Next를 사용하시나요?? 저는 Next가 아닌 React로만 프로젝트를 한번 해봤습니다. 그 이후

모든 프로젝트에서는 NextJs를 사용하면서 프로젝트 개발을 하고 있습니다. 근데 최근 들어서 제가 왜 React가

아닌 NextJs를 사용하는지에 대해서 잘 모르는 것 같아서 .. 이번 블로그를 통해서 요즘 트렌드가 React가 아닌

Next를 더 개발자들이 선호를 하는지 또 어떠한 장점이 있는지에 대해서 알아볼까 합니다.

 

NextJs vs ReactJS

 

Next.js

Next.js .. 한 번씩은 들어봤을 것 같은 개념이다.

맞다. NextJs는 React 라이브러리의 프레임워크이다. ➡️ 이건 또 뭔 소리야? React도 좋은데 왜 또 이런 게 나와??

먼저 내가 조사하면서 정말 실용적인 내용은 바로 SEO를 위한 SSR이 가능하기 때문이다. (이게 진짜 팩트)

 

React.js

혹시 여러분들은 기본적으로 React가 CSR인 거 아시죠??

위 그림을 보시다시피 웹 사이트를 요청을 할 때 빈 html을 가져와 script를 로딩합니다. 이러기 때문에 첫 로딩이 굉장히

오래 걸리고 SEO에 정말 취약하는 것이 단점입니다. 이러한 문제를 해결하기 위해서 나온 것이 Next.js!!!

 

Next.js

React.js와 다르게 Next.js pre-reloading을 통하여 미리 데이터를 저장을 하고 렌더링이 된 페이지를 가져와서 

화면을 보여주기 때문에 user들이 더 편하고, 검색 엔진에 더 잘 노출이 되도록 SEO가 최적화가 되는 것이다.

 

 

Next.js의 동작 방식으로는

 

초기에 서버에 먼저 페이지 접속에 대한 요청을 하게 된다면, SSR을 통해 렌더링이 될 HTML을 보내게 된다.

그러면 브라우저에서는 그 JavaScript를 다운로드하고 React를 실행시키게 되는 것이죠. 또 페이지와 상호작용을

하게 될 다른 페이지로 이동을 하게 된다면 서버가 아닌 브라우저에서 처리를 한다고 합니다.

 

그러면 React는 SSR이 아예 안 될까??

결론은 그건 아니다. 그냥 React를 사용해서도 SSR을 구현하는 방법은 존재한다. 

next.js를 사용하지도 않고 SSR을 구현하는 방법은 여러 가지가 있지만 나는 react-helmet이라는 방법이 생각난다.

하지만 Next가 존재하는 이유가 있듯이 React로만 SSR을 구현하게 된다면 리팩토링 과정이 매우 비효율적이며, 시간과

작업 비용도 많이 든다고 하여 개발자들이 사용을 안 한다고 한다.

 

react-helmet

이 위에 내용을 더 자세히 참고하기 바란다!! 조금 읽어보았는데 신기하더라 ㅎㅎ!!.. 그래도 역시 Next가 짱 👍🏻

 

Next.js 내가 생각하는 가장 큰 장점!!

• 초기 로딩 속도가 빠르다.
• 동적 임포트와 함께 코드 분할을 지원하여 번들 크기를 최적화하고 초기 로딩 속도를 향상할 수 있다.
• 라우팅이 편하다. (12 기준) 파일 시스템 기반의 라우팅 구조로 쉽게 페이지를 생성하고 관리할 수 있다.

진짜 라우팅이 정말 편한 것 같습니다. React를 사용할 때는 router 파일을 따로 만들고 사용을 하였는데 Next로 넘어오고

신세계를 느끼고 있답니다 .. 🥹

 

 

혹시 SSG라는 개념을 알고 있으신가요?!?

SSG

이 SSG가 아니구요!!

 

SSG

➡️ SSG(static site generation)라는 개념으로 사전에 페이지를 생성하고 만들어 static 페이지로 가지고 있게 됩니다.

그리하여 클라이언트에서 서버로 요청을 할 경우에는 그 페이지를 보이게 되는데 페이지를 사전에 생성하였기 때문에

클라이언트의 요청의 대한 응답이 매우 빠릅니다. 

 

 

느낀 점

솔직히 지금 Next.js를 통하여 프로젝트를 많이 하고 있는데 지금 다시 React만 사용하라고 하면 조금 불편할 것 같다.

아직까지 React와 Next를 사용하면서 엄청 큰 차이는 느끼지 못했다는 것은 사실이다. 하지만 더 많이 써보고 용도를 

잘 알면 더욱더 자세히 알게 되지 않을까 싶다. 또 Next에 3단 콤보라고 불리는 SSR, SSG, ISR이라는 개념이 있는데

ISR이라는 부분을 더 깊게 공부하고 내용을 추가하려고 한다. 공식 문서를 보니까 내용이 살짝 심화적인 내용인 것 같았다.

 

⬇️ ISR 더 자세히 알아보기!!!

Data Fetching: Incremental Static Regeneration (ISR) | Next.js

 

오늘도 즐거운 개발 하세요 ~^~⭐️