TIL-38, 빌드와 배포

우선 네트워크를 공부하며 배웠던 내용을 복습해보자.

SSR vs CSR

SSR (Server Side Rendering), 동적 웹사이트

→ 웹 페이지를 서버에서 렌더링한다.

CSR (Client Side Rendering), 정적 웹사이트

→ SSR의 반대. 웹 페이지를 클라이언트에서 렌더링한다.

웹 페이지의 골격이 되는 단일 페이지 템플릿을 클라이언트에 보내고,

JavaScrit 파일을 함께 보낸다.

SSR과 CSR의 주요 차이점

→ 페이지가 렌더링되는 위치.

SSR은 서버에서 렌더링하고, 다른 경로를 요청할 때마다 페이지를 새로고침 한다.

CSR은 브라우저(클라이언트)에서 렌더링하고, 다른 경로를 요청할 떄마다 페이지를 새로고침하지 않고, 동적으로 라우팅을 관리한다.

언제 사용하나?

SSR (동적)을 사용하는 경우

• SEO (Search Engine Optimization) 가 우선순위인 경우
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우
• 웹 페이지가 사용자와 상호작용이 적은 경우

CSR (정적)을 사용하는 경우

• SEO (Search Engine Optimization) 가 우선순위가 아닌 경우
• 사이트에 풍부한 상호작용이 있는 경우
• 웹 애플리케이션을 제작하는 경우

장단점

SSR의 장점

• CSR에 비해 초기 렌더링이 빠르다 (서버에서 렌더링 된 후 넘어오기 떄문)
• SEO에 최적화 되어있다.

SSR의 단점

• 페이지를 요청할 때마다 새로고침 된다 (페이지가 깜빡깜빡거리는 등 보기 불편)
• 요청이 많아지면 서버에 부담이 된다.

CSR의 장점

• 초기 요청을 제외하면 페이지 렌더링 속도가 빠르다
• 서버에 부담이 적다
• UX가 좋다

CSR의 단점

• 최초 렌더링 속도가 느리다
• SEO 최적화에 불리하다

기술면접에서 HTML이 어디서 조작되는지를 묻는 질문이 많다.

---

클라이언트 웹 앱 배포

배포란?

→ 웹 어플리케이션을 웹에 노출시키는 작업이다.

내 Local에서 만든 나만 볼 수 있던 어플리케이션을, 전세계 모두가 볼 수 있게 웹에 공개로 올리는것.

Vercel

빌드와 배포를 해주는 Vercel을 이용하자.

vercel.com 에 접속해 나의 git과 연결해주고,

원하는 repo를 import한 뒤 Deploy만 해주면

알아서 빌드와 배포를 해준다!

이 서비스의 가장 큰 장점으로는 한번 배포를 하고 난 뒤에는

수정사항 발생시 알아서 업데이트된 내용으로 배포를 해준다는 것이다.

배포가 완료되면 배정된 DOMAINS로 접속이 가능하다.

Vercel Error

error: command “npm install” exited with 1

Building중 위와 같은 에러가 떴었는데, package.json 파일의 “dependencies” 내용중에서

Vercel에서 지원하지 않는 외부의 submission-npm이 작성되어 있어서 발생한 에러였다.

해당 외부 npm 코드를 지운뒤 재시도하니 Building이 문제없이 완료됐다.