Next.js 란 무엇인가?
프론트엔드 직군에 취업 준비를 위해 여러 JD를 보다보면 Next.js 보인다. 나는 이런 생각이 들었다. React를 처음 배울 때만해도 어려웠는데, 이제는 Next.js까지 배워야 하는 것일까?
그래서 Next.js에 대해 더 알아보고 그 필요성에 대해 제고해보기로 했다. 물론, 이 글을 작성하기 전 여러 번 시도해보았다. Next.js를 공부하기 위해…
하지만, 그 필요성이 느껴지지 않아 매번 그 시도는 무마되었다. 그래서 글을 통해 필요성을 정리해보고자 한다.
정의
Nextjs.org 공식 홈페이지에 가면 아래와 같이 나와 있다.
React를 위해 탄생한 프레임워크이다. React는 JS의 라이브러리에 지나지 않는다.
쉽게 말해 Next.js 는 React의 발전형, 강화형이라고 볼 수 있다. 그렇다면 Next.js는 React보다 어떤 점이 뛰어나길래? 등장했을까? 아니면 React가 어떤 점이 부족했기에 사람들은 Next.js를 개발했을까? 자연스럽게 생각해보게 되었다.
React는 페이스북(현 메타)에서 만들었다. React는 Angular, Vue 등과 함께 혁신의 바람을 일으킨 라이브러리였다. 하지만, React는 CSR(Client Side Rendering) 만 가능하다는 단점을 내포하고 있다. 이는 결국 SEO(Search Engine Optimization)에 영향을 끼친다.
여기서 SEO가 왜 중요할까? 라는 의문을 가질 수 있다. 당연하다. 필자도 그러했다. SEO, 검색 엔진 최적화 왜 중요할까? 우리가 웹페이지를 만드는 목적을 생각하면 쉽게 이해할 수 있다. 웹페이지를 만든다는 것은 결국 누군가에게 보여주기 위해서다. 그런데 웹페이지를 접속하기 위해서 우리는 어떤 행동을 하는가? Google, Naver와 같은 검색 포털 사이트에 검색을 한다. 그렇다. 즉, 검색 엔진에 더 잘 노출이 되고, 탐색이 되기 위해서는 검색 엔진 최적화는 필수 불가결한 요소인 것이다.
사용 목적
SEO를 위해 Vercel에서 만든 것이 Next.js 이다. Next.js를 사용하는 가장 큰 목적 중 하나는 Pre-rendering이다.
검색 엔진은 크롤링과 비슷하게 페이지에 내용을 읽어낸다. 그렇기에 CSR 기반의 React로 만들어졌다면 페이지를 실행해야 온전히 그 페이지에 대한 정보를 읽을 수 있다. 하지만, Next.js에서는 SSG, SSR 등을 통해 각각 빌드 시, 요청 시에 검색 엔진에게 데이터(정보)를 제공해준다.
- SSG(Server Side Rendering) | getServerSideProps
- 빌드 타임에 Pre-Render
- SSR(Static-Site Generation) | getStaticProps
- 요청 타임에 Pre-Render
서버 사이드 렌더링이 가능하므로, 이전에 React 환경에 익숙한 사람이라면 Spring이나 Node.js로 서버를 구동하지 않고, Next.js 자체만으로 서버를 구동할 수 있다는 사실이 정말 신기하게 느껴질 것이다. 필자는 아직 이 문법을 완벽히 이해하진 못했다.
물론 이 밖에도 Next.js는 다양한 특징을 가지고 있어, 많은 기업들이 사용하고 있다. 하지만, 본 글은 왜 우리는 Next.js를 배워야 할까에 초점을 두었으므로 가장 큰 특징만 다루고 글을 마치겠다. 이 글은 여기서 끝나지 않는다. 필자가 Next.js에 대한 학습을 거듭해 나가면서 React에 비해 뛰어난 점들을 하나씩 추가해 나가며 업데이트 하도록 하겠다.
자세한 내용은 이미 nextjs.org 공식 홈페이지에 이미 기재되어 있으므로, 학습이 빠르신 분들은 공식 홈페이지를 참고해주시길 바란다.
참고 사이트
'코딩 | 개념 정리 > Next.js' 카테고리의 다른 글
| husky error code 127 해결하기 (0) | 2024.02.26 |
|---|
