HTML + CSS + Vanilla JS vs React vs NextJS 차이점

HTML + CSS + Vanilla JS:

• 기능: 작은 프로젝트나 간단한 웹 페이지에 적합하며, 정적 사이트를 손쉽게 구성할 수 있음.
• 한계: 단일 페이지 애플리케이션(SPA)을 구축하거나, 동적인 기능이 많은 대규모 프로젝트에 사용하기 어려움. 상태 관리, 데이터 바인딩, UI 업데이트가 수동으로 처리되어야 하므로 비효율적임.
• 결과물: HTML + CSS + JS로 이루어진 정적 파일.
• 장점: 가벼워서 가장 빠르게 동작함. 브라우저에서 모든 기능이 기본적으로 지원되기 때문에 추가적인 러닝 커브 없이 간단한 웹 페이지 구축 가능.
  • 단점: 큰 프로젝트 개발이 어렵고, 유지보수가 매우 힘듦. 모듈화된 컴포넌트나 상태 관리를 구현하기가 어려움.

React:

• SPA (Single Page Application): React는 단일 페이지 애플리케이션을 만들기에 적합한 라이브러리로, Angular, Vue, Svelte와 함께 최신 프론트엔드 개발 트렌드를 이끌고 있음.
• JavaScript 라이브러리: 페이스북에서 만든 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 개발하는 데 주로 사용됨. 컴포넌트 기반으로 모듈화가 잘 되어 있어 유지보수와 재사용성이 뛰어남.
• 언제 사용?:
  • SEO 상관없는 인터랙션이 많은 웹: 어드민 대시보드, B2B 페이지, Gmail, 지도 앱 등 클라이언트 사이드에서 복잡한 상호작용을 요구하는 경우.
• 결과물: JS 정적 파일 (+HTML, CSS). React 앱은 브라우저에서 모든 로직이 실행되며, 클라이언트 사이드에서 렌더링을 수행함.
• 장점:
  • 웹에서 앱처럼 사용자 경험을 제공할 수 있으며, 복잡한 사용자 인터랙션도 처리 가능.
  • 컴포넌트 단위의 재사용 및 상태 관리의 용이성으로 개발 생산성이 높음.
  • Hook 등을 이용하여 상태 및 생명 주기를 효율적으로 관리할 수 있음.
  • 커뮤니티가 매우 활발하며, 다양한 서드파티 라이브러리를 쉽게 사용할 수 있음.
• 단점:
  • SEO 불리: 클라이언트 사이드 렌더링 방식으로 인해 초기 페이지 로딩 시 HTML에 콘텐츠가 없어서 SEO에 불리함. 검색 엔진이 제대로 크롤링하기 어려움.
  • 초기 JS 로딩 지연: 초기 JavaScript 번들이 커질 경우, 첫 로딩 시간이 느리고, 사용자가 빈 화면을 보는 시간이 길어질 수 있음.

Next.js:

• MPA (Multiple Page Application): Next.js는 MPA 방식을 기본으로 하면서, SPA의 장점도 제공하여 상황에 따라 유연하게 활용 가능.
• 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG): React 기반의 서버 사이드 렌더링을 지원하여 SEO 최적화가 가능하며, 정적 사이트 생성도 지원하여 성능을 향상시킬 수 있음.
  • SSR: 서버에서 HTML을 미리 렌더링해서 클라이언트에 전달함으로써 검색 엔진 크롤링에 유리하고, 초기 로딩 속도가 빠름.
  • SSG: 빌드 시 정적인 HTML 파일을 생성하여 제공. 정적 콘텐츠는 매우 빠르게 로딩되므로 성능이 우수함.
• 언제 사용?:
  • SEO 최적화가 중요한 경우: 전자상거래 웹사이트, 블로그 등에서 중요.
  • 초기 로딩 속도 향상이 필요한 경우: 서버에서 미리 렌더링을 수행하므로, 콘텐츠가 빠르게 보이고 사용자 경험이 향상됨.
  • B2C 웹사이트: 소비자에게 빠른 반응성과 SEO가 중요한 웹사이트.
• FullStack 가능: API 라우트 기능을 통해 서버 API 및 DB 조회 등 백엔드 로직을 직접 구현 가능. 별도의 백엔드 서버 없이도 간단한 CRUD를 포함한 서버 기능을 구현할 수 있음.
• 결과물: 서버 Application (+ HTML 정적 파일). 필요한 경우 서버와 클라이언트 양쪽 모두에서 코드를 실행하여 성능과 유연성을 동시에 가짐.
• 장점:
  • SEO 최적화에 유리하고, 초기 로딩 속도가 빠름.
  • 서버 사이드 API 라우트를 통해 간단한 서버 기능을 추가적으로 구현할 수 있어 Full Stack 개발을 지원.
  • CSR(클라이언트 사이드 렌더링), SSR, SSG 등 다양한 렌더링 방식을 유연하게 사용할 수 있음.
• 단점:
  • 복잡성 증가: SSR과 API 라우트를 활용하면, 웹 및 서버 전반의 지식이 필요함. 프론트엔드와 백엔드 모두 다뤄야 하므로 복잡성이 높아질 수 있음.
  • 서버를 운영해야 하기 때문에 서버 설정 및 유지보수의 부담이 추가됨.