Next.js : 리액트 말고 나 써라.

Next.js는 어떤놈이야?

• Next.js는 오픈 소스이며, 프레임워크로 리액트와 함께 빠르고 사용자 친화적인 웹 앱 및 정적 웹 사이트를 개발할 수 있다.
• 뒤에 소개할 다양한 기능들을 이용해 리액트 애플리케이션을 효율적으로 구축 및 성능을 최적화 할 수 있다.

리액트와 Next의 차이는?

---

🔖 서버 사이드 렌더링(SSR)과 정적 생성(SSG) 지원

• 초기 로딩 속도의 향상과 SEO 개선에 용이하다.
• 리액트의 클라이언트 사이드 렌더링(CSR) 또한 사용 가능하다.
• CSR에 비해 페이지 요청 시마다 더 빠른 성능을 제공한다.
• 또한 CSR도 사용 가능하다. (유도리 있는 친구)

🔖 라우팅 및 코드 분할

• 페이지 라우팅 및 앱 라우팅을 통해 동적으로 페이지를 생성하고 필요 시 코드를 자동 분할한다.
• 번들 크기를 줄이고 앱 성능 최적화에 도움을 주는 유용한 기능

🔖 API 라우팅 제공

• 서버리스 함수로 백엔드 엔드포인트를 손쉽게 구현 가능

🔖 자체 컴포넌트를 통한 최적화 및 성능 향상

• Image, Link 컴포넌트 등을 사용해 알아서 최적화를 시켜준다.
• 더불어 prefetch, lazy loading 등의 유용한 기능 또한 제공한다.

🔖 환경 설정 간소화

• 기본적인 설정(타입스크립트, config 등)이 제공되어 초기 세팅 시간이 줄어든다.

결론은?

---

🔖 리액트에 여러가지 유용한 기능을 추가한 맛돌이 프레임워크

• 물론 항상 Next가 리액트보다 좋은 것은 아니다.
• 복잡한 라우팅 및 데이터 중심 컴포넌트를 갖춘 대규모 웹 앱을 개발하는 경우 리액트가 적합하다.
• 정적 웹 사이트나 JAMstack 앱을 구축하는 경우 Next가 적합하다.

✅ 따라서, 1인 개발 및 애플리케이션의 프로토타입의 빠른 개발에 매우 용이하다. 하지만 사용자 경험(페이지 이동 시 깜박임)이나, 미완성 기술 등의 접목으로 리액트를 완벽히 커버하는 것은 아니다.

번외. Next.js에서 SSR를 실행하는 과정 및 Hydration

---

🔖 SSR 실행 과정

• 사용자가 브라우저에서 페이지 요청
• Next.js 서버가 해당 요청에 대해 라우팅 및 데이터 검색 처리
• 요청된 컴포넌트가 서버에서 렌더링, 서버 측에서 render 함수를 실행해 HTML 마크업 생성
• HTML 페이지를 브라우저로 전송

🔖 Hydration

• 브라우저가 서버로부터 받은 HTML 파싱, DOM트리 빌드
• JS 번들 다운로드 및 실행
• JS가 실행되며 리액트 컴포넌트 재생성, 서버의 HTML과 클라이언트의 리액트 컴포넌트가 일치하도록 조정(Hydration)

✅ 초기 요청 시 서버에서 미리 렌더링 된 HTML을 받아 볼 수 있어 속도의 향상과 사용자 경험 개선에 용이하다.