서버(SSR)/클라이언트(CSR) 사이드 랜더링

웹 페이지나 애플리케이션에서 HTML, CSS, JavaScript 등의 코드를 실행하여 
화면에 내용을 표시하는 과정

추후엔 클라이언트를 앱으로 만들 것.
APP을 다운 받는 이유는 자바 등으로 만들어진 '그림 파일'을 다운받기 위해서다
그림과 데이터를 같이 받아야한다.

앱은 주로 RESTful API를 통해 서버와 통신하여 JSON 데이터를 주고받는다. 
이를 위해 앱은 @RestController 어노테이션을 사용하여 개발한다.
앱은 HTML이나 CSS로 화면을 구성하는 것이 아니라, 
받아온 JSON 데이터를 가공하여 화면에 표시하거나 다른 기능을 수행하기 때문

서버사이드 렌더링은 서버가 클라이언트에게 보여줄 화면을 구성하기 위해
뼈대와 데이터를 모두 가지고 있는 상태에서 클라이언트에게 전달하는 방식. 

서버는 클라이언트의 요청에 따라 데이터를 가져와 
뼈대에 직접 그려서 완성된 화면을 클라이언트에게 제공한다.

a가 b한테 그림을 달라고 요청 
> b는 그림의 뼈대만 있고(=탬플릿 있음), 세부 내용이 없는 상태...지만
  a가 그림을 달라고 하니까 안에 새랑 나무(데이터)를 직접 그려서 a한테 전달함

이게 서버 사이드 랜더링이다. 서버가 뼈대에 모든 것을 다 집어넣어서 클라이언트한테 주는 것

클라이언트 사이드 랜더링은 웹 애플리케이션의 화면을 동적으로 구성하는 방식. 

초기에 서버로부터 HTML, CSS와 같은 뼈대를 받아온다.
그리고 브라우저에서는 이 뼈대를 기반으로 화면을 구성하고, 필요한 데이터를 서버에 요청한다.
서버는 클라이언트의 요청에 따라 데이터를 JSON 형태로 응답한다.

클라이언트는 받은 데이터를 JavaScript를 사용하여 동적으로 처리하고, 
화면에 데이터를 채워넣는다.

클라이언트 사이드 랜더링을 사용하면
사용자는 화면을 보면서 필요한 데이터를 요청하고, 그에 따른 결과를 실시간으로 확인 가능함

TIP!

전체 리로드 -> SSR
부분 리로드 -> AJAX

댓글을 추가하면 서버에서는 문제가 없으면 OK만 응답한다.
댓글은 클라이언트 사이드 랜더링으로 추가해버림 

AJAX 통신 -> 부분 리로드
HTTP 통신 -> 전체를 다운 받음

부분 변경이 됐는데 전체를 다운 받을 필요가 없다. AJAX를 하자

1. 최초의 통신 : 클라이언트 측 렌더링(Client-Side Rendering, CSR)

- 비동기식
- 파일이 실행될 때, 즉 페이지가 로드될 때, 서버로부터 HTTP 요청을 통해 데이터를 다운로드
- 보통 HTML, CSS, JavaScript 및 기타 **정적 자산을 가져오는 것**을 의미
- 이 요청은 페이지의 초기 로드에 사용

2. 두 번째 통신 :** 서버 측 렌더링(Server-Side Rendering, SSR)

- 페이지가 로드된 후
  AJAX(Asynchronous JavaScript and XML)를 사용하여 내부적으로 서버와 통신

- 서버에서 초기 페이지를 렌더링하고 완전한 HTML 문서를 생성, 클라이언트에게 보냄
  서버가 HTML 문서를 생성하고 초기 데이터를 채워서 전송하기 때문

→ 클라이언트 측에서 AJAX 요청을 사용하여 데이터를 가져오는 것이 필요하지 않음

   ex) 사용자가 버튼을 클릭하거나 
       어떤 입력 페이지가 새로 고쳐지지 않고도 새로운 데이터를 가져오는 등

클라이언트 사이드 랜더링과 AJAX는 서로 다른 개념

* 클라이언트 사이드 랜더링은 웹 애플리케이션의 초기 로딩 시에 
  클라이언트에서 UI를 구성하는 방식

* AJAX는 클라이언트와 서버 간의 데이터 교환을 위한 기술