인프런 커뮤니티 질문&답변
작성한 질문수
렌더링에서 말하는 서버란 무엇인가요?
해결된 질문
작성
·
164
·
수정됨
2
안녕하세요. 예전부터 궁금했던게 있습니다.
이번 사전렌더링 강의에서 계속 설명하는
유저-브라우저-서버 개념 에서 서버란 무엇인가요?
단순히 csr은 서버에서 빈껍데기를 먼저주고,
초기접속속도가 느리고, ssr은 빈껍데기가아니라 이미 렌더링된 html을 서버에서 받아서 그대로 렌더링하고...
이런 개념들은
CSR과 SSR 차이만 검색해도 수많은 블로그와 개념이 나오고, 항상 많이 들어왔고 면접준비했을때도 수없이 외워서 알겠습니다만
여기서 항상 의문이 있었는데요. 여기서 말하는 서버란 대체 무엇인가요?
제가 알고있던 서버라는것은 백엔드서버였는데, 이 서버라는 개념이 어려웠습니다.
답변 2
1
안녕하세요 이정환입니다.
서버(Server)라는것은 일반적으로 네트워크 상으로 서비스를 제공하는 컴퓨터 또는 프로그램을 말합니다.
따라서 네트워크를 통해 이미지를 제공하는 서버는 "이미지 서버" 라고 부르고, 웹 서비스를 제공하는 서버는 "웹 서버"라고 부르고, 질문에 언급하신 것 처럼 API를 통해 데이터베이스에 등록된 데이터를 사용할 수 있게 해주는건 "백엔드 서버"라고 보통 부릅니다.
여기서 중요한 건 백엔드 서버는 서버의 한 유형일 뿐이라는 겁니다. 서버는 앞서 말씀드렸듯 네트워크상으로 서비스를 제공하는 컴퓨터나 프로그램을 말합니다. 이때 제공되는 서비스는 이미지가 될 수도, 웹 문서(HTML, CSS, JS)가 될 수도, JSON 형태의 데이터가 될 수도, 심지어는 비디오 파일이 될 수도 있죠
한가지 예를 들어볼까요? 인프런에 접속하는 상황을 가정해보겠습니다. 우리가 브라우저의 주소 창에서 www.inflearn.com 이라는 주소를 입력하고 엔터를 누르면, 해당하는 주소를 갖는 서버에게 접속 요청을 보내게 됩니다. 이때 이 주소를 갖는 서버는 인프런 웹 서버입니다. HTML, CSS, JS로 이루어진 인프런의 웹 사이트를 제공하는 서버라는거죠
이렇듯 웹서버는 브라우저에서 접속 요청을 보냈을 때, 해당하는 웹 페이지의 HTML, CSS, JS를 응답하는 기능을 합니다. 그런데 이때 그렇다면 인프런 데이터베이스에 등록된 수 많은 강의 데이터는 어떻게 어디로부터 불러오는걸까요? 이런 데이터들은 보통 백엔드 서버로부터 불러오게 됩니다. 이때 이렇게 데이터베이스에 등록된 특정 데이터를 응답하는 서버는 백엔드 서버라고 부릅니다.
따라서 질문해주신 "유저 -> 브라우저 -> 서버" 관계에서 "서버"가 의미하는 것은 Next.js 웹 서버를 말한다고 이해하시면 되겠습니다. 참고로 SSR, CSR 개념에 등장하는 서버 역시 Next.js 웹 서버나 React.js 웹 서버같은 웹 서버입니다 (백엔드 서버 아닙니다)
npx create-next-app 으로 생성하신 Next.js 앱이 곧 Next.js 서버입니다. 이 서버를 우리는 npm run dev 라는 명령어로 개발 모드로 가동하는것입니다.
그러므로 Next.js 앱을 내 컴퓨터에서 가동하던, Vercel 같은 클라우드 환경에서 가동하던 웹 서버는 내 컴퓨터도 Vercel도 아닙니다. 그저 가동된 Next.js 앱이 웹 서버라고 이해하시면 됩니다.
이때 어디서 동작시키던 같은 웹 서버임에도 Vercel에 배포하는 이유는 24시간 365일 정상적으로 가동되어야 하는 웹 서버의 요구사항을 내 PC 환경에서는 이뤄내기 어렵기 때문입니다. 간헐적인 정전이나 인터넷 회선 또는 보안과 관련된 문제로 인해 홈 PC로 서버를 가동하는 것은 그닥 권장되지 않습니다.
따라서 이런 웹 서버를 보다 안정적인 환경에서 가동시키기 위해 사용하는게 바로 Vercel 등의 클라우드 플랫폼 인 것 입니다.
0
안녕하세요, 인프런 AI 인턴입니다. 타루님.
타루님의 질문에 답변드리겠습니다. 여기서 설명되는 “서버”란 일반적으로 웹 서버를 의미합니다. 웹 서버는 HTTP를 통해 사용자(브라우저)의 요청을 받고, 그에 맞는 응답(HTML, CSS, JavaScript 파일 등)을 반환하는 역할을 합니다. 이는 프론트엔드와 백엔드를 연결하는 주체로서, 클라이언트(사용자 브라우저)로부터 요청을 받아 서버의 응답을 돌려주는 기반이 됩니다.
서버와 프론트엔드 렌더링의 관계
CSR (Client-Side Rendering):
- 클라이언트가 빈 HTML 페이지를 받은 후, 필요한 데이터를 비동기로 로드하여 클라이언트(browser)에서 렌더링을 완료하는 방식입니다.
- 클라이언트 제어 하에 있음으로, 서버는 기본적인 HTML 파일과 자바스크립트 파일을 제공하고, 이후 렌더링은 브라우저에서 수행됩니다.
- 클라이언트가 빈 HTML 페이지를 받은 후, 필요한 데이터를 비동기로 로드하여 클라이언트(browser)에서 렌더링을 완료하는 방식입니다.
SSR (Server-Side Rendering):
- 서버가 전체 HTML 페이지를 렌더링하여 클라이언트에 전달하는 방식입니다. 초기 콘텐트가 포함된 상태로 전송되므로, 사용자에게 더 빠르게 초기 페이지가 보여질 수 있습니다.
- 여기서 “서버”는 주로 프론트엔드 애플리케이션 서버를 지칭하며, 백엔드에서 필요한 데이터를 가져와 HTML을 생성합니다.
- 서버가 전체 HTML 페이지를 렌더링하여 클라이언트에 전달하는 방식입니다. 초기 콘텐트가 포함된 상태로 전송되므로, 사용자에게 더 빠르게 초기 페이지가 보여질 수 있습니다.
요약
- 서버: 일정 데이터 처리 및 API 호출을 담당할 수 있는 백엔드 서버와 프론트엔드 리소스를 서빙할 수 있는 웹 서버를 모두 포함하는 개념입니다. 그러나 컨텍스트에 따라 주로 CGI나 Express 서버와 같은 프론트엔드의 HTTP 요청을 처리하는 서버를 뜻할 수 있습니다.
- CSR vs SSR: 서버와의 상호작용 시점과 방법에 따른 클라이언트와 서버의 협력적 역할을 최적화하는 데 초점이 맞춰져 있습니다.
이전에 비슷한 질문과 답변을 통해 더 많은 정보를 얻을 수 있습니다. 관련 질문도 확인해 보세요:
- CSR과 SSR의 차이와 서버의 역할
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
그 next웹서버라는것은 어디에있나요? 내컴퓨터로 넥스트앱을 실행했을때는 내컴퓨터이고, 버셀같은걸로 배포했을때는 웹서버가 버셀인건가요??