Next.js 왜 씀?

❓Next.js란...

React 기반의 오픈소스 JavaScript 웹 프레임워크
리액트의 확장판 = 리액트 + 페이지 라우팅 + 빌트인 최적화 기능 + 다양한 렌더링 전략

✨React와의 차이

리액트로 충분한 것 같은데 Next가 왜 나왔을까? 비교를 해보자.
Next.js는 검색 엔진 최적화, 렌더링에 중점을 둔 웹사이트에 특히 적합하다.

📍렌더링 방식

• React: 클라이언트 측 렌더링(CSR)을 사용하여 페이지 전환이 부드러워지지만, 초기 로딩 속도가 느리고 SEO에 불리하다.
• Next.js: 서버 측 렌더링(SSR)을 사용하여 초기 로딩 속도를 높이고 SEO 친화적인 웹 애플리케이션을 구축할 수 있다.

[🔥CS 뽀개기] - 렌더링 사형제 CSR, SSR, SSG, ISR

렌더링 사형제 CSR, SSR, SSG, ISR

 

📍개발 생산성

• React: 개발자가 직접 라우팅, 빌드 설정 등을 구현해야 한다.
• Next.js: 라우팅, 빌드 설정 등 많은 기능을 기본적으로 제공하여 개발 생산성을 높일 수 있다.

📍백엔드 개발 지원

• React: 주로 프론트엔드 개발에 사용된다.
• Next.js: 백엔드 개발도 가능한 풀스택 프레임워크다.

📍TypeScript 지원

• React: TypeScript 지원을 위해 별도의 설정이 필요하다.
• Next.js: TypeScript를 기본적으로 지원하여 정적 타입 검사와 개발도구를 지원한다.

📍라우팅

• React: 개발자가 라우팅(라우트, 링크, 페이지 전환 등)을 구현해야 한다.
  (react-router-dom)
• Next.js: 파일 기반 라우팅을 제공해 자동으로 라우팅 기능을 제공한다.
  ( 컴포넌트, usePathname() 훅 등을 제공 + 동적 import를 통한 자동 코드 분할 기능으로 애플리케이션 성능 향상)

그럼 Next는 어떻게 작동되는 걸까?

✨Next.js의 SSR을 실행하는 과정

1. 사용자 요청
   사용자가 웹 브라우저에서 Next.js 애플리케이션의 특정 페이지를 요청한다.
2. 서버 측 렌더링
   Next.js 서버가 요청받은 페이지를 렌더링한다.
   이때 필요한 데이터를 가져와 완성된 HTML 페이지를 생성한다.
3. HTML 전송
   렌더링된 HTML 페이지를 사용자의 웹 브라우저로 전송한다.
4. 클라이언트 측 하이드레이션
   웹 브라우저가 받은 HTML 페이지를 로드하고, 클라이언트 측 JavaScript를 실행하여 페이지를 완전히 렌더링한다.
   (이 과정을 hydration이라고 함.)

❓hydration

• 서버에서 렌더링된 HTML 문서와 클라이언트 측 JavaScript 코드를 연결하는 과정
• 클라이언트가 받은 "빈 껍데기" HTML에 JavaScript 코드를 연결하는 과정 - HTML 동작에 필요한 JS가 포함X
• 빠른 초기 로딩 속도

❓FCP(First Contentful Paint)

• 사용자가 페이지를 요청한 후 첫 번째 콘텐츠 요소가 렌더링되는 시간을 측정하는 지표
• 서버에서 페이지를 미리 렌더링하여 HTML을 전송하면, 클라이언트에서 빠르게 첫 번째 콘텐츠를 표시할 수 있다.

❓TTI(Time to Interactive)

• 사용자가 페이지와 상호 작용할 수 있게 되는 시간을 측정하는 지표
• Next.js의 코드 분할 기능을 통해 TTI 성능이 향상된다.
• 코드 분할을 통해 필요한 JavaScript 파일만 로드하여, 페이지가 빠르게 상호 작용 가능한 상태가 된다.