📋 Next.js란?
며칠 전 SPA와 MPA, CSR과 SSR을 비교하는 글을 작성했다.
그 중 SSR을 쉽게 구현할 수 있도록 해주는 Next.js라는 프레임워크가 있다고 하는데 이 Next.js가 정확히 무엇이고, 왜 사용하는지에 대해 알아보자.
📌 1. Next.js 소개
Next.js is a flexible React framework that gives you building blocks to create fast web applications. - nextjs.org
Next.js는 React의 프레임워크이다.
공식 문서에 따르면 Next.js는 빠른 웹 애플리케이션 을 만들기 위한 빌딩 블록을 제공 하는 유연한 React 프레임워크라고 소개하고 있다.
최신 웹 애플리케이션을 구축할 때 다음과 같은 고려해야 할 사항이 몇가지 있다.
- User Interface - how users will consume and interact with your application.
- Routing - how users navigate between different parts of your application.
- Data Fetching - where your data lives and how to get it.
- Rendering - when and where you render static or dynamic content.
- Integrations - what third-party services you use (CMS, auth, payments, etc) and how you connect to them.
- Infrastructure - where you deploy, store, and run your application code (Serverless, CDN, Edge, etc).
- Performance - how to optimize your application for end-users.
- Scalability - how your application adapts as your team, data, and traffic grow.
- Developer Experience - your team’s experience building and maintaining your application. - nextjs.org
이와 같은 애플리케이션의 각 부분에 대한 솔루션을 직접 구축할 지, 아니면 라이브러리나 Next.js와 같은 프레임워크같은 다른 도구를 사용하지 결정해야 한다.
여기에 있어 Next.js를 사용하는 것은 좋은 해답이 될 수 있다.
📌 2. Next.js를 사용하는 이유
Next.js를 사용하는 가장 큰 이유는 얼마 전에 작성한 글에서 소개한 SSR(Server Side Rendering)이다.
Next.js는 SSR과 CSR을 혼합하여 사용하여 운영환경에서 최적의 퍼포먼스를 낼 수 있도록 해준다.
작동 방식은 다음과 같다.
- 사용자가 서버에 페이지 접속을 요청하면 서버에서 렌더링 될 웹 페이지를 보낸다. (SSR)
- 브라우저에서 JavaScript를 다운로드하고 React를 실행한다.
- 사용자와 페이지가 서로 상호작용하여 다른 페이지로 이동할 땐, SSR이 아닌 CSR 방식으로 브라우저에서 처리한다.
SSR은 이전 글에서 작성했듯이 SEO적으로 유리하다는 장점이 있다.
Next.js를 사용하는 이유는 이 뿐만아니라 다양하지만 또 다른 이유 중 하나를 소개하자면 Next.js는 풀스택 프레임워크라는 점이다.
Next.js를 사용하면 Node.js 코드를 이용해서 React 프로젝트에 쉽게 백엔드 API를 추가할 수 있다.
이처럼 다양한 장점을 가지고있는 React 프레임워크인 Next.js에 대해 더 자세히 공부해보고 싶다.
