정적 웹과 동적 웹 차이점. CSR 은 정적 웹?

 

정적 웹과 동적 웹의 차이를 정리해보겠다.

 

정적 웹 ( Static Web )

서버가 이미 만들어진(정적인) html, css, javascript 파일을 클라이언트에게 제공하는 것.

더 자세히 말하면, 서버에는 단순히 html, css, javascript 파일들이 이미 만들어져 있고

서버는 라우터로 요청이 들어오면 그에 맞는 파일을 단순히 제공만 해주는 것이다.

 

동적 웹 (Dynamic Web )

서버가 직접 html, css, javascript 를 만들어서 클라이언트에게 제공하는 것.

요청이 들어오면 그 때 html, css, javascript 파일을 생성하여서 클라이언트에게 제공하는 것.

 

 

SPA  웹은 정적 웹 일까? 동적 웹 일까?

정적 웹이다. 해당 내용에 대해서 구글링을 해보면 많은 블로거분들이 SPA ( React, Vue, Angular 등으로 만들어진 ) 웹이 동적 웹이라고 이야기 하고 있는데, 이는 잘못된 정보이다. 물론 개발 서버로 페이지를 열면 동적 웹이긴 하나 ( 예를 들어 cra 프로젝트의 경우 npm run start 를 하면 http://localhost:3000 으로 동적으로 웹이 생성된다. ) 실제 SPA 의 배포는 그렇게 진행하지 않는다.

 

 필자는 React 개발자이기 때문에 React 로 설명을 자세히 해보겠다.

React 는 단순히 html, css, javascript 를 간편하게 만들어주는 빌드 라이브러리 이다.

실제 React 로 프로젝트를 배포하기 위해서는 build 과정이 필요하고 build 를 하고 나면 정적인 html, css, javascript 파일이 생성되게 된다. 이 파일들을 어떠한 스토리지에 올려두고, 서버는 요청이 들어왔을때 해당 파일들을 단순히 제공만 해주는 역할을 하면 된다.

 

 

---

 

프론트 개발자 입장에서 여담을 하자면 정적 웹으로 만들면 배포가 무료이다... netlify 나 github pages 를 이용해보길 바란다.

아 물론 Next.js 의 경우는 동적 웹이지만 Vercel 에서 무료 배포를 제공하는 것으로 알고 있다. ( 비상업적인 경우에서만.. ) 

 

끝! !