인프런 커뮤니티 질문&답변

그리고 SSR로 배포할때, 일반적으로 Node.js 서버를 DMZ 영역에 구성하는지 아니면, WAS처럼 내부망에 구성하는지도 궁금합니다.

인프라 구성은 회사나 환경에 따라서 많이 다를것 같습니다. ~

Next.js가 WAS (Web Application Server)의 역할을 하죠. 그런 Next.js는 node.js 이구요. DMZ영역에 넣을지 말지는 인프라에 따라 다를텐데요.

k8s 환경을 사용하고 있어서 외부 트래픽을 LoadBalancer(LB)로 받아서 nginx + next.js + logger + 등등 으로 구성된 Pod로 트래픽을 보내고 있습니다.

• *MZ 방식으로 클러스터링을 구성합니다.

• *Pod의 숫자를 Scale in-out 가능한 환경입니다.

안녕하세요! ( 답변이 늦어서 죄송합니다.!)

보통 React로 csr을 만들어 배포하는데 next.js로 SSR 페이지 없이 CSR app을 만들어 웹서버(NGINX)에 배포할 수 있는지 궁금합니다.

가능합니다.

React로 CSR의 환경을 구축하기 위해서는, 빌드를 해야하죠. 빌드한 결과물들은 정적 파일들이 됩니다.

next.js를 쓰는 이유는 SSR을 위해서 입니다. 물론 CSR를 포함하고 있죠. next.js를 이용해서 완전 정적 빌드를 하면 됩니다.

공식문서 : https://inf.run/MSesp 를 꼭 읽어보세요.!

• 완전히 CSR를 위한 환경을 구축하려면 서버사이드에서 처리하는 기능들( 대표적으로 api router handler, 서버 액션, ssr )을 포기 하고요.

(문서 요약은 아래 gpt 답변 참고 바랍니다.)

네, 가능합니다. Next.js를 완전히 정적인 HTML 파일로 빌드하려면 next export 기능을 사용하면 돼요.

이렇게 하면 Next.js 앱을 정적 파일들(HTML, CSS, JS)로 변환해서 별도의 서버 없이도 호스팅할 수 있어요.

✅ 완전 정적 빌드 (Static HTML Export) 방법

1. next.config.js 설정

module.exports = {
  output: 'export', // Next.js 13 이상에서는 이렇게 설정
};

✅ next build 후 next export 실행 시 필요했던 설정을 간소화했어요.

✅ output: 'export'을 설정하면 next export가 자동 실행돼요.

2. 빌드 및 정적 파일 생성

npm run build

• 빌드가 끝나면 .next/out 폴더가 생성돼요.

• 이 폴더 안의 파일들을 정적 서버(Nginx, Vercel, Netlify, GitHub Pages 등)에 업로드하면 돼요.

🔹 제한 사항

• 서버 사이드 기능 (getServerSideProps) 지원 안됨

→ getStaticProps와 getStaticPaths만 사용해야 해요.

• API 라우트 (/api/*) 지원 안됨

→ 백엔드 API가 필요하면 별도 서버가 필요해요.

• 동적 라우팅 (Fallback 없는 getStaticPaths) 제한

→ getStaticPaths를 사용하면 빌드시 미리 생성된 페이지만 제공돼요.

✅ 추천 사용처

• 블로그, 문서 사이트, 랜딩 페이지 등 변경이 적은 웹사이트

• CDN을 통해 빠르게 배포하고 싶은 경우 (Vercel, Netlify, S3 등)

서버 기능 없이 정적 페이지만 필요한 경우 next export를 쓰면 가볍고 빠르게 배포할 수 있어요! 🚀

안녕하세요, 인프런 AI 인턴입니다. lovelove님.

React로 CSR을 사용하여 배포하는 것은 주로 클라이언트 측에서 모든 렌더링을 처리한다는 의미입니다. 그러나 Next.js는 서버 측 렌더링(SSR)을 지원하면서도 CSR로만 구성된 애플리케이션을 배포할 수 있는 유연성을 제공합니다. Next.js에서 기본적으로 제공하는 기능인 next export 명령어를 통해 정적 HTML 파일을 생성하여 CSR 전용 앱으로 배포할 수 있습니다. 이러한 정적 파일은 웹 서버(NGINX 등)를 통해 서비스될 수 있습니다.

다음으로, SSR을 활용한 배포와 관련하여 Node.js 서버의 위치에 대한 질문에 대해 알아보겠습니다. 일반적으로 SSR에서는 Node.js 서버를 통해 페이지를 동적으로 생성하여 클라이언트에 제공합니다. 이 과정에서는 보안상 이유로 일반적으로 WAS처럼 내부망에 숙주하는 것이 일반적입니다. DMZ 영역은 보통 외부 접근이 가능한 영역으로 공개 서버(예: 웹 서버)가 위치합니다. 따라서, Node.js 서버가 외부 접근을 제공하는경우 DMZ에 위치할 수 있지만, 내부 보안에 신경써야 한다면 내부망에 위치시키는 것이 좋습니다.

관련하여 자세한 설명과 예시를 아래 링크에서 확인해 보세요:
- “React에서 ‘use client’ 사용하는 이유와 서버/클라이언트 사이드 렌더링의 차이”
- “SSO에서 SSR과 CSR의 병행 사용 방법”

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.