🔸서버에서 사용자에게 보여줄 페이지를 모두 미리 구성한 뒤 페이지를 렌더링 하는 방식(데이터를 포함한 완전한 형태의 페이지를 전송한다) 🔸페이지를 이동할 때마다 서버에 새로운 페이지를 요청한다.(그래서 화면이 깜빡인다. 전송받은 새로운 HTML 파일을 렌더링 하기 위해 브라우저가 기존에 렌더링된 페이지를 지우고 새로운 페이지를 렌더링하기때문에)
🤔) 나는 CSR만 해봤기에 그러면 HTML,CSS 를 서버에서 어떻게 작성하지..궁금해졌다. chatGPT 曰 : 서버에서는 템플릿 엔진이나 서버측 렌더링 프레임워크를 사용하여 서버측 코드를 작성한다. 이러한 도구들은 서버에서 HTML,CSS 코드를 생성하는데 사용한다. React 에서는 Next.js 와 같은 프레임워크가 SSR을 지원한다.
🔸서버에서 전체 페이지(데이터가 없는 빈페이지)를 최초 렌더링하고 사용자가 요청할 때마다 데이터가 동적으로 채워져서 렌더링이 된다.
✅CSR 과 SSR의 장단점 요약
- 밑에 구체적인 글을 읽고와서 읽으면 이해하기 쉽습니다~!
✅SSR 동작 과정
1. 사용자가 브라우저 주소창에 url 을 입력하거나 링크를 클릭한다.
2. 클라이언트는 초기화면을 로드하기위해 서버에 페이지 요청을 보낸다.
3,4. 서버는 해당 페이지를 렌더링 하기 위해 필요한 데이터를 데이터 베이스에서 받아온다.
5. 서버는 데이터와 미리 구성된 정적파일(HTML,CSS)를 결합하여 렌더링 준비를 마친 완전한 HTML 문서를 생성한다. 생성된 HTML 문서를 클라이언트에게 반환한다.
6. 클라이언트는 바로 전달 받은 HTML 문서를 브라우저에 띄운다(렌더링).
7. 클라이언트는 필요한 JavaScript 파일을 다운로드 하고 실행한다. 클라이언트는 페이지 이벤트를 처리하고 추가적인 데이터 요청을 수정한다.
🤔) 데이터를 포함한 완전한 형태의 페이지를 전달한다는게 무슨말일까? - SSR 방식에서는 웹 페이지의 HTML과 데이터가 서버에서 미리 결합되어 완성된 형태로 클라이언트(브라우저)에 전달된다는 의미 - SSR에서는 웹 페이지 요청이 발생하면, 서버는 필요한 데이터를 데이터베이스에서 조회한 후에 해당 데이터를 사용해 HTML에 동적으로 삽입하고 완성된 형태의 페이지를 클라이언트에게 전송합니다. 이렇게 하면 클라이언트는 이미 데이터가 포함된 HTML을 받게 되므로 추가적인 데이터 요청이나 렌더링 작업이 불필요하게 된다.
클라이언트는 이미 데이터가 포함된 HTML을 받기 때문에, 추가적인 데이터 요청 없이 바로 페이지를 렌더링할 수 있다. 이 방식은 초기 렌더링 속도가 빠르다.
🤔) 만약 데이터가 중간에 변경된다면?
- 데이터가 변경될 때, 클라이언트와 서버간의 상호작용에 따라 달라진다. SSR 에서 초기 페이지 로드 시 서버에서 렌더링된 HTML 을 전송받지만, 이후 상호작용은 클라이언트에서 JavaScript를 통해 처리된다. SSR에서 데이터 변경에 대한 처리는 크게 2가지 방식이 있다.
1) 클라이언트 측 처리 SSR에서도 초기 로드 이후에는 클라이언트에서 JavaScript를 실행하여 상호작용을 처리한다. 데이터 변경이 필요한 경우, 클라이언트에서 AJAX 요청 등을 사용하여 서버로부터 필요한 데이터를 요청하고 받아온 후, JavaScript를 통해 웹 페이지의 DOM을 업데이트한다. 이 방식은 CSR(Client-Side Rendering)과 유사한 방식으로 데이터 변경이 이루어진다.
2) 서버 측 처리 페이지를 새로고침하거나 새로운 라우트로 이동하는 경우 등일 때 서버측에서 처리한다. 이러한 경우에는 클라이언트가 서버에 새로운 요청을 보내고, 서버에서 변경된 데이터를 포함하여 새로운 HTML 파일을 렌더링하여 클라이언트로 전송한다. 클라이언트는 전송받은 HTML 파일을 렌더링하고, 필요한 JavaScript 파일을 로드하여 상호작용을 처리한다.
✅CSR 의 동작 과정
1. 사용자가 주소창에 url 을 입력하거나 링크를 클릭한다.
2. 클라이언트는 HTML,CSS,JS 필요한 리소스를 서버에 요청한다.
3. 서버는 클라이언트 요청을 받아 HTML,CSS,JS 필요한 리소스를 클라이언트에 전송한다.
이때 초기 HTML 파일에는 뼈대만 있고 별도의 데이터는 포함되어있지 않다.
4. 클라이언트는 받은 리소스들을 통해, 브라우저에서 빈페이지를 렌더링한다. JS 파일은 웹페이지가 처음 로드 될때 JS 파일을 다운로드 한다.
5. 필요한 데이터가 있을 때 서버에 요청을 한다.
6. 서버는 데이터베이스에서 정보를 조회한다.
7. 데이터베이스는 서버 요청에 따라 적절한 데이터를 서버에 반환한다.
8. 서버는 클라이언트에 데이터를 전송한다.
9. JS를 사용해서 데이터를 동적으로 웹페이지에 렌더링한다.
🤔) 초기 HTML 파일에는 뼈대만 있고, 별도의 데이터는 포함되어있지 않다는 무슨말인가? 웹 페이지를 구성하는 기본적인 HTML 구조만 존재하고 실제로 페이지에 표시되는 데이터(예: 게시글, 댓글, 사용자 정보 등)는 포함되어 있지 않다는 의미
위 코드에서 보다시피 실제로 표시될 데이터는 포함되어있지 않고, 페이지의 뼈대만 존재한다. 이후 자바스크립트(app.js)가 로드되어 실행되면, 필요한 데이터를 서버로부터 요청하고 받아와서 웹페이지에 동적으로 렌더링 한다. 이 과정에서 'div' 태그에 id='content' 로 지정된 부분에 데이터가 채워지게 된다.
✅JavaScript 다운로드와 SSR, CSR 의 관계
1) CSR(Client-Side Rendering)에서 JavaScript의 역할: CSR에서 JavaScript는 웹 페이지의 동적인 부분을 처리하고, 데이터를 서버로부터 받아와 웹 페이지에 적용하는 주요 역할을 한다. 초기에 클라이언트가 받는 HTML 파일에는 데이터가 포함되어 있지 않기 때문에, JavaScript가 필수적으로 필요하다. 이를 통해 사용자 상호작용에 따라 실시간으로 웹 페이지가 업데이트 될 수 있다. JavaScript 파일은 웹 페이지가 처음 로드되는 시점에 다운로드되며, 이후 실행되어 필요한 데이터를 서버로부터 요청하고 렌더링합니다.
2) SSR(Server-Side Rendering)에서 JavaScript의 역할: SSR에서 JavaScript는 웹 페이지의 상호작용 부분을 처리하는 역할을 한다. SSR에서는 초기 렌더링에 필요한 데이터가 이미 서버에서 처리되어 전송되기 때문에, JavaScript가 데이터를 받아오는 역할은 상대적으로 줄어든다. 그러나 웹 페이지에서 발생하는 사용자 상호작용에 따른 동적인 변화를 처리하기 위해서는 여전히 JavaScript가 필요하다. SSR에서도 웹 페이지가 처음 로드되는 시점에 JavaScript 파일이 다운로드되며, 이후 실행되어 클라이언트 측에서 웹 페이지의 상호작용을 처리한다.
결론적으로, CSR 과 SSR 모두 웹페이지가 처음 로드 되는 시점에 JavaScript 가 다운로드된다. 그러나 두 방식에서 JavaScript의 역할이 조금 다르다. CSR에서는 초기 렌더링에 JavaScript가 중요한 역할을 하지만, SSR에서는 초기 렌더링에 대한 처리가 서버에서 이루어지고 JavaScript는 주로 상호작용 부분을 처리하는 역할을 한다.
✅TTV (Time to View) 와 TTI(Time to Interact)
🔸TTV와 TTI 는 웹페이지의 성능 지표로 사용된다.
1️⃣ TTV(Time To View) - 사용자가 웹브라우저에서 내용을 볼 수 있는 시간 (사용자가 화면을 보는 시점) - 페이지가 얼마나 빠르게 렌더링되어 사용자에게 보여지는지 측정하는 지표 2️⃣ TTI(Time To Interact) - 사용자가 웹브라우저에서 인터랙션 할 수 있는 시점(사용자가 실제로 서비스를 이용하는 시점) - 페이지가 완전히 로드되고, 사용자가 버튼 클릭이나 입력등의 동작을 할 수 있는 시점
🔸한줄 요약
- TTV : SSR > CSR
- TTI : SSR < CSR
1️⃣ TTV
1) CSR
- 초기 뼈대 HTML 만 받아오고, JavaScript를 실행하여 필요한 데이터를 서버로부터 요청하고 받아와 렌더링한다 이 과정때문에 TTV가 상대적으로 느릴 수 있다.
2) SSR
- 서버에서 데이터를 포함한 완전한 형태의 페이지를 렌더링하여 전송해서, 클라이언트는 별도의 데이터 요청 및 렌더링 작업 없이 페이지를 빠르게 렌더링할 수 있다. 따라서, SSR에서 TTV가 CSR에 비해 빠를 수 있다.
2️⃣TTI
1) CSR
- 초기 렌더링이 완료되면, JavaScript가 이미 로드되어 있어서 상호작용에 필요한 처리가 빠르게 이루어질 수 있다. 따라서 TTV 이후 상호작용이 빠르게 이루어질 수 있어 TTI 가 빠를 수 있다. TTV가 늦지만 늦은만큼 사용자 인터렉션이 렌더링 되자마자 빠르게 이루어질 수 있다.
2) SSR
- 초기 렌더링이 빠르게 이루어지지만, 상호작용에 필요한 JavaScript 파일이 로드되고 실행되는데 추가 시간이 소요될 수 있다. 즉, TTV와 TTI 간에 시간 간격이 존재한다는 것이다. 이미 페이지가 다 렌더링이 되어서 버튼을 클릭했는데, 버튼에서 아무런 반응이 없을 수도 있다는 것이다.(렌더링이 빠르게 된거에 비해서 로드되는데 시간이 걸리기 때문에)
✅검색 엔진 최적화(SSR > CSR)
SEO : 검색엔진이 웹을 크롤링 하면서 페이지에 컨텐츠 색인을 생성하는 과정
ssr
csr
초기 렌더링 시 완전한 형태의 HTML 문서를 서버에서 생성하고 클라이언트에 전달한다. 검색엔진 크롤러는 완전한 HTML 문서를 크롤하고 쉽게 인덱싱 할 수 있으므로, SEO에 유리하다.
초기 페이지를 빈 페이지로 우선 보여주기에 검색엔진 최적화에 불리하다.
✅그런데 현대 방식은...
- 전통적은 SSR 방식에서 서버는 요청마다 전체 HTML문서를 렌더링하여 응답한다. 하지만 현대 SSR은 새로운 데이터를 받을 때마다 항상 전체 페이지를 다시 렌더링 하지는 않는다.
1) 사용자가 웹 페이지에 처음 방문할 때, 서버에서 전체 페이지를 렌더링하여 제공(SSR). 2) 사용자가 페이지 내에서 특정 데이터나 섹션만 업데이트하고 싶을 때, AJAX나 Fetch와 같은 비동기 통신 방법을 사용해 서버에서 필요한 데이터만 받아옴. 받아온 데이터는 클라이언트 측에서 동적으로 렌더링(CSR)되어 해당 부분만 업데이트됨.
이런 방식을 통해 새로운 데이터를 받을 때마다 전체 페이지를 다시 렌더링하는 것을 피하면서, SSR의 장점(초기 페이지 로딩 속도 개선, SEO 최적화)을 활용할 수있다.
