nextjs 와 react 그리고 AWS

Next.js와 React는 둘 다 프론트엔드 웹 개발을 위한 인기 있는 라이브러리/프레임워크이지만, AWS 인프라를 구성할 때 몇 가지 중요한 차이점이 있습니다. 특히 서버 사이드 렌더링(SSR) 지원 여부와 배포 방식이 AWS 구성에 영향을 미치는데, 여기서는 두 가지 측면에서 AWS 인프라가 어떻게 달라지는지 설명드리겠습니다.

1. 서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)

Next.js (SSR 지원)

Next.js는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 풀스택 프레임워크입니다. AWS 인프라를 구성할 때, Next.js의 SSR 기능이 큰 차이를 만듭니다.

• SSR의 특징:
  • 페이지 요청 시 서버에서 HTML을 생성하여 클라이언트에게 반환합니다.
  • 동적 콘텐츠가 많거나 SEO가 중요한 애플리케이션에서 주로 사용됩니다.
• AWS 구성 시 SSR에 필요한 서비스:
  • AWS Lambda 또는 AWS App Runner: 서버 사이드 렌더링이 필요한 경우, 서버에서 실시간으로 HTML을 생성해야 하므로 Lambda@Edge 또는 App Runner와 같은 서버리스 컴퓨팅 서비스를 사용하여 서버 사이드 로직을 처리할 수 있습니다.
  • API Gateway: Lambda와 결합하여 HTTP 요청을 처리하고 Next.js의 SSR 요청을 처리하는 데 사용할 수 있습니다.
  • AWS Elastic Beanstalk: Next.js를 완전히 서버 기반으로 동작하게 하려면 EC2 인스턴스를 활용하는 Elastic Beanstalk 같은 서비스도 고려할 수 있습니다.
  SSR은 추가적인 서버리스 컴퓨팅 계층이나 API 호출을 필요로 하므로, 일반적인 S3 + CloudFront 배포로는 충분하지 않으며, 컴퓨팅 리소스가 필요하게 됩니다.

React (CSR 전용)

React 자체는 서버 사이드 렌더링 기능이 없으며, 기본적으로 **클라이언트 사이드 렌더링(CSR)**을 지원합니다. 즉, 초기 HTML 파일을 클라이언트에게 보내고, 클라이언트가 모든 자바스크립트를 다운로드한 후 브라우저에서 렌더링이 이루어집니다.

• CSR의 특징:
  • 애플리케이션이 초기 로딩 속도가 느리며, SEO에 불리할 수 있습니다.
  • 정적 자산을 제공하는 경우에 최적화되어 있습니다.
• AWS 구성 시 CSR에 필요한 서비스:
  • AWS S3 + CloudFront: React는 빌드된 정적 파일을 S3에 업로드하고, CloudFront를 사용해 CDN을 통해 전 세계에 배포하는 구조를 많이 사용합니다. 서버리스 방식으로 매우 간단하게 배포할 수 있습니다.
  • 서버에서 실시간으로 HTML을 생성하지 않기 때문에 컴퓨팅 리소스는 필요하지 않고, 정적 호스팅으로 충분합니다.

React 애플리케이션은 클라이언트 사이드에서 모든 렌더링이 처리되기 때문에, AWS에서는 S3와 CloudFront만으로도 충분히 빠르게 콘텐츠를 배포하고 제공할 수 있습니다.

2. 배포 및 호스팅 방식

Next.js (정적 + 동적 배포)

Next.js는 **정적 사이트 생성(SSG)**와 **서버 사이드 렌더링(SSR)**을 모두 지원하기 때문에, 혼합된 배포 방식이 가능합니다.

• 정적 페이지는 S3에, 동적 페이지는 Lambda 또는 EC2에서 처리할 수 있습니다.
• Next.js에서 SSG 페이지는 빌드 타임에 미리 생성되며, 이를 AWS S3에 정적으로 배포하고 CloudFront를 통해 CDN으로 제공할 수 있습니다.
• SSR 페이지는 요청 시 서버에서 생성되어야 하므로, Lambda@Edge, App Runner 또는 Elastic Beanstalk 같은 서버 기반 서비스로 배포해야 합니다.

배포 시에는 Next.js의 빌드 출력물을 정적 자산과 서버 자산으로 나누어 AWS 인프라에서 구성하는 방식으로 이뤄지며, 복합적인 인프라 구성이 필요할 수 있습니다.

React (정적 배포)

React는 정적 웹 애플리케이션이기 때문에, 빌드 후에 정적 파일만 생성됩니다.

• AWS S3와 CloudFront에 정적 파일을 업로드하여 배포할 수 있습니다.
• Next.js처럼 SSR이나 API 호출을 위한 별도의 컴퓨팅 리소스는 필요하지 않으므로, 매우 간단하고 저렴한 인프라 구성이 가능합니다.

React 애플리케이션을 S3와 CloudFront를 통해 배포하면, 사용자가 요청할 때 전 세계적으로 빠르게 콘텐츠를 제공할 수 있습니다.

요약

	Next.js	React
렌더링 방식	서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 지원	클라이언트 사이드 렌더링(CSR) 전용
AWS 컴퓨팅 리소스	Lambda@Edge, App Runner, Elastic Beanstalk 등 컴퓨팅 리소스 필요	S3 + CloudFront만으로 충분
배포 방식	정적 자산(S3 + CloudFront) + 동적 자산(서버리스 컴퓨팅) 혼합 배포	정적 자산(S3 + CloudFront) 배포
SEO	서버 사이드 렌더링으로 SEO 최적화 가능	SEO에 불리 (기본적으로 CSR)
구성 복잡도	서버 리소스를 포함한 복잡한 인프라 구성 필요	간단한 정적 파일 배포로 구성

결론

• SEO가 중요하거나 동적 페이지를 많이 사용해야 한다면, Next.js가 더 적합하며, AWS 인프라에서는 Lambda@Edge 또는 App Runner와 같은 서버리스 컴퓨팅 리소스를 포함하는 구성을 추천합니다.
• 정적 웹사이트 또는 SPA(Single Page Application) 중심의 간단한 프로젝트라면 React가 더 적합하며, AWS에서 S3와 CloudFront만으로 쉽게 배포할 수 있습니다.