서버란?
클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템
즉, 유저에게 정보나 서비스를 제공해주는 콤퓨타인 셈이다.
흔히 HTML파일을 뿌려주는 웹서버를 생각해보면 편하다. 특정 경로로 들어오면, 만들어진 HTML파일을 뿌려준다.
이는 정적이며 단순히 저장된 웹의 리소스를 클라이언트에게 뿌려준다.
웹 서버 / static web server
이 글을 작성하게된 이유는 SSR때문이다.
SSR은 컴포넌트를 서버측에서 렌더링하여 클라이언트에게 전송해준다.
이때 서버라는 의미는, 어디일까?
맛보기였지만 잠시 접했던 node.js + express기반 백엔드에서는 express를 이용하여 루트경로로 접속시 index.html 파일을 반환한다. 요청이오면, 반환한다.
const express = require('express');
const app = express();
app.use(express.static('public'));이 과정이 웹 서버다. 즉, 접속했을때 HTML파일을 내려주는...
전통적인 웹서버 관점에서는 데이터또한 서버의 컴퓨터 파일시스템에 존재한다. 따라서 파일 입출력을 통해 클라이언트와 파일을 주고받는다.
그러면...Api통신을 위한 Api로직도 웹 서버일까?
app.get('/hello', (req, res) => {
res.send('Hello, World!');
});음?
웹 애플리케이션 서버(WAS) / dynamic web server
HTML파일을 내려주는것 처럼 정적인 서버가 웹서버다.
WAS는 DB조작 등의 동적인 로직을 조작하고 데이터를 반환하는 서버다.
// API 엔드포인트 정의
app.use(express.json());
app.get('/api/data', (req, res) => {
const data = {
id: 1,
name: 'Sample Data'
};
res.json(data);
});
app.post('/api/data', (req, res) => {
const newData = req.body;
// 데이터베이스에 새로운 데이터 저장 로직 추가
res.status(201).json(newData);
});
app.get('/dynamic', (req, res) => {
// 동적으로 생성된 HTML 반환
res.send(`<html><body><h1>${new Date()}</h1></body></html>예전에 맛보기로 제작했던 백엔드는 웹서버와 웹 애플리케이션 서버를 한 포트에서 동시에 구동했다.
하지만 돌이켜보니, 굉장히 불안한 행위였다. 웹 서버와 웹 애플리케이션 서버를 분리해서 돌리는 게 맞지 않을까?
한놈이라도 살아야하니 말이다.
Vercel은 웹서버다(당연하지만...)
그래 이제 웹 서버와 웹 애플리케이션 서버에 대해 알았다.
내가 example.com에 접속한다면, 웹 서버에서 준비된 정적 페이지를 먼저 건네주겠지.
예를들어 Vercel로 배포했다면, 어떠한 웹 서버에서 준비된 정적 페이지를 먼저 건네줄 것이다.
아하! Vercel같은 프론트엔드 배포 사이트는 사실 웹 서버(정적 서버)를 빌려주는 거구나?
지금까지 대충은 알고있었지만, 정확히 알지는 못했다. 그래서 더 헷갈렸겠지😥
그렇다면 Next.js로 만든 프로젝트를 Vercel에 배포하면, SSR(서버사이드 렌더링)은 Vercel이 만든 웹서버에서 진행되는걸까?
하지만 SSR은 동적인 행위니 웹 애플리케이션 서버에서 진행되는건가?😮
SSR은 어디서?
웹 서버다. 다만 정적 페이지를 제공하는게 아니라 서버 렌더링(컴포넌트를 리액트 트리화...)를 하여 직렬화된 JSON을 제공한다.
Next는 Node.js를 기반으로 한 HTTP웹서버를 구축하여 서버 렌더링을 해서 데이터를 건네준다.
Vercel같은경우 SSR은 Serverless function을 이용하여 서버측 렌더링을 완료한뒤 데이터를 건네준다.
느낀점
프론트엔드라고 해도 백엔드측 지식이 필요 없는 건 아니다. 오히려 알면 알수록 좋다. 특히 Next가 나온이후로 프론트엔드와 백엔드의 경계가 조금씩 희미해지는 느낌이다. 옛날 방식으로 돌아가는걸까?🙄
아무튼 이번시간에 웹서버,웹앱서버,SSR이 어디서 일어나는지에 대해 알게되었다. 원리를 파악한 뒤 기술을 배우게되면 버벅임이 줄어든다.
그동안의 고통과 인내는 감수해야하지만...어쨌든 빠른시일 안에 Next를 이용한 프로젝트를 진행해 볼 수 있을것 같다!
