TIL-24.05.19

 

 

React

React는 UI 라이브러리로, 동적인 사이트를 구축하는 데 주로 사용됩니다. React를 사용하면 클라이언트 사이드에서 상태를 관리하고, 실시간 데이터 업데이트, 사용자 상호작용 등을 효율적으로 처리할 수 있습니다.

Gatsby

 Gatsby는 정적 사이트 생성기(Static Site Generator)로, 정적 콘텐츠 중심의 사이트를 만드는 데 특화되어 있습니다. 블로그, 마케팅 페이지, 포트폴리오 사이트와 같은 정적 콘텐츠가 많은 사이트에서 뛰어난 성능을 발휘합니다. 그러나 실시간 데이터 처리나 빈번한 업데이트가 필요한 동적 사이트에는 다소 부적합할 수 있습니다.

Next.js

Next.js는 React 기반의 프레임워크로, 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 모두 지원합니다. 이를 통해 정적 콘텐츠와 동적 콘텐츠를 혼합한 사이트를 효율적으로 구축할 수 있습니다. Next.js는 다음과 같은 장점을 갖추고 있습니다:

정적 사이트 생성(SSG): 빌드 시점에 정적 페이지를 생성하여 빠른 초기 로딩 속도와 SEO 최적화를 제공합니다.
서버 사이드 렌더링(SSR): 요청 시 서버에서 페이지를 렌더링하여 실시간 데이터와 사용자 맞춤형 콘텐츠를 제공합니다.
클라이언트 사이드 렌더링(CSR): 클라이언트 측에서 데이터를 가져와 렌더링할 수 있습니다. 이를 통해 동적인 사용자 상호작용을 처리할 수 있습니다.
API Routes: 서버리스 함수로 API 엔드포인트를 쉽게 정의할 수 있어 서버 로직을 처리할 수 있습니다.

 

 

 

 

요약

React: 동적인 사이트 제작에 적합, 클라이언트 사이드에서 상태 관리와 실시간 데이터 처리에 강점.
Gatsby: 정적인 사이트 제작에 적합, 빠른 로딩 속도와 SEO 최적화에 유리.
Next.js: 정적 사이트와 동적 사이트 모두에 적합, SSG와 SSR을 모두 지원하여 유연하고 강력한 웹 애플리케이션 구축 가능.
Next.js는 React와 Gatsby의 장점을 결합하여 다양한 요구 사항을 충족할 수 있는 다목적 프레임워크입니다. 정적 콘텐츠와 동적 콘텐츠가 혼합된 사이트나, 실시간 데이터 처리가 필요한 애플리케이션에서 특히 유용합니다.