[Next.js] Next.js란?

🤔 Next.js란 무엇인가?

• React를 위해 만든 오픈소스 JS 웹 프레임워크
• SSR, SSG, ISR과 같은 기능들을 제공한다.
• 확장 가능하고 유지 보수가 쉬운 웹 애플리케이션을 위한 여러 가지 방법을 제공한다.

🎞️ Next.js의 탄생 배경

• 과거의 웹 페이지들은 대부분 SSR 기반으로 동작했으며 페이지가 여러 개로 구성된 Multi-page-form을 사용했다.
• 하지만 스마트폰의 등장으로, 모바일에 최적화된 형태의 웹 페이지의 필요성이 대두되었다.

CSR이 가능한 SPA의 등장!

• SPA는 기존의 웹 페이지와는 다르게 한 개의 페이지에서 여러 동작이 이루어지는 방식으로 동작한다.
  • 모바일 앱과 비슷한 형태로 구성되어 Header 영역은 고정되고, Main 영역만 변경된다.
  • SPA, CSR, SSR에 대해 자세히 알아보기
• SPA를 지원하는 React, Angular, Vue와 같은 최신 JS 프레임워크들의 등장으로 동적 웹 애플리케이션 개발 분야는 변화의 급물살을 타기 시작했다.
• 그 중에서도 React는 웹, 앱, 네이티브 앱 개발, VR 구현 등 다양한 목적으로의 사용이 가능하여 가장 인기 있는 JS 라이브러리가 되었다.

하지만

React는 기본적으로 Client-Side에서만 작동한다는 문제점이 있었다.

• 기본적으로 React는 사용자의 웹 브라우저에서만 실행(CSR)되므로 React를 사용한 웹 애플리케이션은 SEO의 효과를 보기 어렵다.
• 첫 화면에 웹 애플리케이션을 제대로 표현하려면 애플리케이션 실행 초기에 성능 부담이 생긴다.
  • 브라우저가 전체 웹 앱 번들 다운로드 ➡️ 다운로드한 내용 분석 ➡️ 코드 실행 ➡️ 결과 도출하는 과정이 필요하다.
  • 아주 큰 웹 앱의 경우 첫 화면 렌더링에 수 초가 소요되기도 한다.
• 물론 React에서 SSR의 구현이 아예 불가능한 것은 아니지만, 굉장히 복잡한 과정을 필요로 한다.

이를 해결하기 위해 Next.js가 탄생하게 되었다.

• 웹 앱을 서버에서 미리 렌더링해두는 방법에 대한 연구의 결과로, Vercel이 Next.js를 만들었다.
  
  

🧐 React를 기반으로 하는 Next.js에서 어떻게 SSR을 구현할 수 있을까?

🌟 Next.js의 작동 원리

1. 사용자가 처음 서버에 페이지 접속을 요청하면, SSR 방식으로 렌더링 될 HTML 전송
2. 브라우저에서 JS 파일을 다운로드하고, React를 실행
3. 사용자와 클라이언트가 서로 상호작용하며, 다른 페이지로 이동 시 서버가 아닌 CSR의 방식으로 브라우저에서 처리

🤔 Next.js, 왜 사용할까?

🔎 Next.js에서의 검색 엔진 최적화 (SEO)

• Next.js를 사용하는 가장 큰 이유 중 하나가 SSR의 구현이고, SSR은 SEO에 중요한 역할을 한다.
• 즉, SEO가 Next.js를 사용하는 큰 이유라고 볼 수 있다.

🧐 SEO, 왜 필요한가!

• 단순 블로그 포스팅부터 대규모 온라인 쇼핑몰까지, 페이지를 열심히 만든다고 해도 사용하는 사람이 없으면 무용지물일 것이다.
• 브라우저에 페이지의 노출 빈도를 높여야 사용자 수를 증가시키고, 더 많은 수익 창출을 기대할 수 있다.
• 즉, 서비스나 마케팅적인 측면에서 검색 엔진에 대한 최적화를 할 수 있는 SEO는 반드시 고려해야 할 사항이다.

🧐 SEO, 왜 SSR에서 더 잘 작동하나!

• 사이트의 데이터를 크롤링할 때, 검색 엔진 봇들은 JS 파일을 해석할 수 없어 HTML 파일에서 크롤링을 하게 된다.
  • 크롤링: 웹 페이지를 그대로 가져와서 데이터를 추출해내는 행위
• CSR 방식은 클라이언트 측에서 페이지를 구성하기 전까지 HTML에 아무 것도 존재하지 않으므로 데이터를 수집할 수 없고, 이 때문에 검색 엔진에 노출이 어려워진다.
• SSR 방식은 서버 측에서 화면을 그려서 보내주기 때문에 HTML 안에 이미 컨텐츠들을 포함하고 있는 상태이므로, 크롤러 봇들의 데이터 수집이 용이해진다.

🧐 그렇다면 Next.js는 왜 좋은거지?

• Next.js는 사용자의 접속 요청을 받으면, 서버에서 초기에 SSR 방식으로 렌더링 될 HTML을 보내고, 브라우저에서는 이를 JS 파일로 다운로드 받아 React에서 실행하기 때문에 SEO의 원활한 적용이 가능하다.
• 이에 덧붙여 페이지 이동 시에는 CSR의 방식으로, 서버가 아닌 브라우저에서 데이터를 처리하므로 SPA로서의 장점도 유지할 수 있다!

👾 Next.js에서 제공하는 다양한 기능들

코드 분할

• 일반적인 React SPA에서는 초기 렌더링 시 모든 컴포넌트를 내려받는다.
  • 이는 규모가 커지고, 용량이 커지면 로딩 속도가 지연되는 문제를 발생시킬 수 있다.
• Next.js는 필요에 따라 파일을 불러올 수 있도록 여러 개로 파일을 분리하는 코드 분할을 통해 이러한 문제를 개선하였다.
• 다시 말해, Next.js는 웹 페이지의 첫 화면 로딩 시 JS payload 번들 덩어리를 보내는 것이 아니라 여러 부분으로 조각내여 처음에 가장 필요한 부분만 전송해주는 방식을 사용한다.
• 이를 통해 어플리케이션 로딩 타임을 줄일 수 있다.
• webpack, parcel 등의 모듈 번들러에서도 지원하고 있는 기능이지만
  next.js 사용 시 별도의 설정이 없더라도 자동으로 프로젝트에 적용된다.
• dynamic import를 통해 모듈이 호출될 때만 해당 모듈이 import 되게 한다.

(이미지 출처)

• 위의 예시 이미지에서, pages 폴더 안에는 각 page에 대한 라우트가 들어간다.
• components 폴더에는 React 컴포넌트들이 들어간다.
• 이러한 구조를 통해 브라우저가 실행되고 사용자가 처음 페이지에 접속하는 상황에서는 index page만, 다른 페이지로 이동 시 해당 페이지만 불러오게 할 수 있다.

pre-reloading

• Next.js는 pre-rendering을 통해 미리 데이터가 렌더링된 페이지를 가져올 수 있다.
• 이를 통해 UX를 개선하고, SEO에도 특화된 사이트를 만들 수 있다.
• 다른 문서에서 더 자세히 다루겠지만, SSR, SSG를 가능하게 하고, 심지어는 SSR과 CSR의 혼합 사용도 가능케한다.

Next.js에서의 SSR, SSG 자세히 알아보기

Next.js에서의 CSR 자세히 알아보기

파일 기반 라우팅

• 직관적인 페이지 기반 라우팅 시스템을 제공한다.
• 프로젝트의 가장 바깥 폴더에서 컴포넌트 export 시 폴더명이 페이지의 route가 된다.
  • 예_1: /pages/index.tsx ➡️ /
  • 예_2: /pages/components/buttons ➡️ /components/buttons
• dynamic route를 지원한다.

Next.js의 라우팅 시스템 자세히 알아보기

그 외의 장점들

TS에 대한 기본 지원, 자동 polyfill 적용, 이미지 최적화, 성능 분석
built-in-css, fast refresh, API routes 등등.

🤖 Next.js와 비슷한 프레임워크

• Next.js 외에도 JS 영역에서 SSR을 지원하는 프레임워크들이 존재한다.

Gatsby

• 정적 웹 사이트 생성만을 지원하는 프레임워크
• 모든 페이지를 빌드 시점에 미리 렌더링하여 정적 콘텐츠 형태로 만든다.
• 어떤 콘텐츠 전송 네트워크로도 제공할 수 있다.
  • CDN: 데이터 사용량 많은 앱의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크
  • 지리적으로 분산된 여러 개의 서버로, 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높일 수 있다.
• 정적 웹 사이트만을 지원하므로 동적 서버 사이드 렌더링을 지원하는 프레임워크들에 비해 성능이 뛰어나지만, 데이터에 따라 동적으로 변하는 복잡한 웹 사이트 개발에는 사용할 수 없다는 단점이 있다.

Razzle

• SSR이 가능한 JS 앱을 만들 수 있는 프레임워크
• CRA를 쉽게 사용하면서도 서버와 클라이언트의 복잡한 앱 설정을 단순하게 추상화할 수 있다.
• 사용할 프레임워크에 관한 지식이 없어도 사용할 수 있다.
  • React, Vue, Angular, ... 어떤 프레임워크든 사용 가능하다.

Nuxt.js

• Vue를 사용한 웹 앱 개발에서 React의 Next.js에 해당하는 프레임워크

Angular Universal

• Angular을 사용한 웹 앱 개발에서 React의 Next.js에 해당하는 프레임워크

🔎 References

참고 자료 모음