SSR, CSR

1. SSR(Server Side Rendering)

• 웹 페이지(HTML)를 서버에서 렌더링한다. (브라우저가 아닌..)
• 브라우저가 서버의 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일(HTML)을 브라우저로 전송한다. 그리고 서버의 웹페이지(HTML)가 브라우저에 도착하면 완전히 렌더링 된다.
• 서버에서 웹페이지(HTML)를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering이라고 한다.
• 웹페이지(HTML)의 내용에 데이터베이스의 데이터가 필요한 경우, 서버는 데이터베이스의 데이터를 불러온 다음 웹페이지(HTML)를 완전히 렌더링 된 페이지로 변환한 후에 브라우저에 응답으로 보낸다.
• 만약 웹페이지를 보던 사용자가 브라우저의 다른 경로로 이동하면, 다른 경로로 이동할 때마다 서버는 이 작업을 다시 수행한다.

2. CSR(Client Side Rendering)

• CSR은 SSR과는 반대로 클라이언트에서 페이지를 렌더링한다. 웹개발에서 사용하는 대표적인 클라이언트는 웹브라우저이다.
• 브라우저의 요청을 서버로 보내면, 서버는 웹페이지(HTML)를 렌더링하는 대신, 웹페이지(HTML)의 골격이 될 단일 페이지를 클라이언트에 보낸다. 이때 서버는 웹페이지(HTML)와 함께 JavaScript 파일을 보낸다.
• 클라이언트가 웹페이지(HTML)를 받으면, 웹페이지와 함께 전달된 JavaScript 파일은 브라우저에서 웹페이지를 완전히 렌더링 된 페이지로 바꾼다.
• 웹페이지(HTML)에 필요한 내용이 데이터베이스에 저장된 데이터인 경우에는, 브라우저는 API를 사용하여 데이터베이스에 저장된 데이터를 가져와서 웹 페이지(HTML)에 렌더링 한다.
  브라우저가 다른 경로로 이동하면 브라우저는 브라우저가 요청한 경로에 따라 페이지를 다시 렌더링하는데, 이때 보이는 웹페이지(HTML)의 파일은 맨 처음 서버로부터 전달받은 웹페이지 (HTML)파일과 동일한 파일이다.

3. Static Website

• HTML파일(코드) 자체로 배포되는 사이트
• 일반적으로 CSR 방식으로 웹사이트가 구성된다.

4. Dynamic Website

• 서버에 의해 HTML 파일이 동적으로 생성되는 사이트
• 일반적으로 SSR 방식으로 웹사이트가 구성된다.

5. Build

• 소프트웨어 빌드는, 소스코드를 실행 가능한 결과물로 변환하는 작업을 의미한다.
• 대표적인 빌드툴
  • web pack: 모듈 번들러
  • babel: TypeScript, JSX 등과 같이 브라우저가 지원하지 않는 언어를 JavaScript로 바꿔주는 컴파일러
  • ESLint: 자바스크립트 Code convention 및 문법 검사기
  • Sass, less: CSS Preprocessor

6. 호스팅

• 웹 서버라고 하면 웹 서비스를 제공하는 모든 종류의 서버가 웹 서버일 수 있으나, 특별히 정적 파일을 제공할 수 있도록 서버의 공간을 대여해주는 서비스를 호스팅 서비스라고 한다. - 호스팅 서비스는 단순 파일을 웹에서 접근가능하게 만들어주며, 동적 웹사이트나 (express 등을 사용한) API 서버를 제공하려면, 별도의 클라우딩 컴퓨팅 서비스가 필요하다.