인프런 커뮤니티 질문&답변
작성한 질문수
유저의 요청으로 서버에서 "JS 실행(렌더링)"을 하는것에 관한 질문
작성
·
106
1
유저가 웹 앱에 진입을 하면서 서버에 요청을 보낼 때,
서버에서 JS를 실행하여 html을 채워준 뒤에 클라이언트로 보낸다고 이해하였습니다.
질문 1) 그렇다면, 서버에서는 node와 같은 자바스크립트 런타임 환경이 갖춰져 있어야 한다는 이야기일까요??
질문 2) 더 나아가서, 넥스트 프로젝트의 배포 방법이 리액트의 배포 방법과 차이가 많이 날까요??(vercel을 사용하지 않는다는 전제하에)
답변 2
0
안녕하세요 이정환입니다.
질문1) 네 맞습니다. Node.js로 실행된 Next.js 서버가 이 과정을 처리하게 됩니다.
질문2) 네 차이가 발생합니다. React.js의 경우 브라우저의 초기 접속 요청에 정적인 html, js만 보내준 이후 아무런 추가 동작이 필요하지 않습니다. 그러나 반면 Next.js의 경우 이후에 배우실 데이터 캐시, 풀라우트 캐시, 서버 액션, 라우트 핸들러 등의 웹 서버측의 동작이 추가로 존재합니다.
결론적으로 쉽게 정리하자면 React.js 서버는 정적인 HTML, JS 파일만 브라우저에게 보내주면 되지만 Next.js 서버는 백엔드 서버의 역할까지 포함해 훨씬 더 많은 역할을 수행해야 하기 때문에 배포 과정과 방법이 달라질 수 있습니다.
일례로 리액트 배포 도구로 자주 사용되는 firebase hosting 기능의 경우 정적인 자료만 제공할 수 있으므로 Next.js 앱의 배포는 어려운 걸로 알고 있습니다
0
안녕하세요, 인프런 AI 인턴입니다. learn2.dosystem님.
Next.js의 동작 방식과 관련하여 두 가지 질문을 해주셨네요. 이에 대해 간단히 설명드리겠습니다.
질문 1: 서버의 JavaScript 실행 환경
Next.js는 React로 작성된 코드를 서버에서 미리 렌더링하여 HTML로 변환한 뒤 클라이언트에 전달합니다. 이 과정에서 서버는 Node.js와 같은 JavaScript 런타임 환경을 사용하여 React 코드를 실행합니다. 따라서, 서버에는 이러한 JavaScript 런타임을 지원할 수 있는 환경이 요구됩니다. Node.js는 이러한 환경을 제공할 수 있는 대표적인 플랫폼입니다.
질문 2: Next.js와 React 배포 차이
Next.js의 배포는 일반적으로 서버 측의 사전 렌더링을 고려해야 하기 때문에, 전형적인 React 애플리케이션 배포와 차이가 있을 수 있습니다. Vercel을 사용하지 않는 경우, Next.js 애플리케이션은 다음과 같은 일반적인 배포 단계를 거칠 수 있습니다:
Node.js 서버 배포: Next.js는 서버에서 실행되는 Node.js 환경이 필요하기 때문에, 이를 지원하는 호스팅 서비스가 필요합니다. 서버에서 Node.js를 설정하고, 애플리케이션을 배포하여 실행할 수 있습니다.
빌드 및 최적화: Next.js는
next build명령을 사용하여 애플리케이션을 빌드하고 최적화된 정적 파일과 서버 측 렌더링 파일을 생성합니다. 생성된 파일은 서버에서 제공할 준비가 되어야 합니다.서버 설정: Node.js 기반 서버(예: Express.js)를 설정하여 Next.js의
next start명령을 사용해 앱을 실행하거나, Docker와 같은 컨테이너 기반 배포 방법을 사용할 수도 있습니다.
추가적으로 참고할 링크
Next.js와 관련된 기술적 세부사항 및 유사한 배포환경 마련에 대해 더 알아보고 싶으시다면 다음 링크를 참고해 보세요:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.