[컴퓨터 정보] SSR 의 정의와 권장

📙 SSR 에 대한 게시글 이므로 CSR 내용은 다소  부족할 수 있습니다 :)

 

1. SSR (Server Side Rendering) 란?

:  서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식

 

 

1. User 가 Website에 요청을 보낸다.

2. Server는 'Ready to Render' 즉 즉시 렌더링 가능한 html을 만든다.

( 리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다)

3. 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어 있기 때문에 HTML 은 즉시 렌더링 된다.

그러나 사이트 자체는 조작 불가능 하다 ( javascript 가 읽히기 전이다.)

4. 클라이언트가 자바스크립트를 다운 받는다.

5. 다운 받아지고 있는 사이에 유저는 컨텐츠를 볼 순 있으나 사이트를 조작할 수 없다. 이때의 사용자 조작을 기억하고 있는다.

6. 브라우저가 javascript 프레임 워크를 실행한다.

7.  JS 까지 성공적으로 컴파일 되었기  때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호 작용이 가능해진다.

 

 

서버에서는 이미 ' 렌더 가능한' 상태로 클라이언트에 전달되기 때문에 , JS가 다운로드 되는 동안 사용자는

무언가를 보고 있을 수 있다.

 

 

 

2. SSR은 언제 사용하는게 좋을까?

 

1. 네트워크가 느릴때 😂 ( CSR은 한번에  모든 것을 불러오지만 SSR은 각 페이지마다 나눠 불러오기 때문이다.)

2. SEO(serch engine optimization : 검색 엔진 최적화)가 필요할 때

3. 최초 로딩이 빨라야 하는 사이트를 개발 할 때

4. 메인 스크립트가 크고 로딩이 매우 느릴 때 CSR은 메인스크립트가 로딩이 끝나면 API 데이터 요청을 보낸다.

하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다.

5. 웹 사이트가 상호작용이 별로 없을때.

 

 

3. CSR의 방식은 어떻게 구현될까?

대표적인  예시의 사진이다. 위 에 SSR과 비교 해봤을때 확연한 차이가 난다.

 

1. 웹페이지를  로딩하는 시간

 

• 첫  페이지 로딩 시간

CSR의 경우 HTML,CSS와 모든 스크립트를 한번에 불러온다.

반면 SSR은 필요한 부분의 HTML과  스크립트만 불러오게 된다. 따라서 평균적으로 SSR이 더 빠르다.

 

• 나머지 로딩시간

첫 페이지를 로딩한 후,  사이트의 다른 곳으로 이동하는 식의 동작을 가정하자

CSR은 이미 첫 페이지 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.

반면 ,SSR은 첫 페이지를  로딩한 과정을  정확하게 다시 실행한다. 그래서 더 느리다.

 

2. SEO 대응 

 

✅ 여기서 SEO란? 검색엔진 최적화다. : 웹사이트가 유기적인(무료)검색 방식을 통해 검색엔진에서 상위로 노출 될 수 있도록 최적화 하는 과정을 말한다.  비즈니스 유형이 어떤것이든 SEO는 가장 중요한 마케팅  유형중 하나 이다.

 

검색엔진은 자동화된 로봇인 '크롤러'로 웹사이트를 읽는다. 

 

✅ 자동화된 로봇인 '크롤러' 란? 자동화 로봇 '크롤러'는 코드를 스캔하여 웹페이지에  표시되는 텍스트,이미지,동영상을 수집하여 가능한  모든정보를 얻고 검색자에게 유용하다고 판단하면 해당 페이지를  색인에 추가 (본질적으로 검색엔진이 잠재적인 검색자에게 제공하기 위해 저장한 모든 가능성) 

 

CSR는 자바스크립트를 실행시켜 동적으로 컨텐츠가 실행되기 때문에 자바스크립트가 실행되어야 meatadate가 바뀌었다.

SSR은 애초에 서버 사이드에서 컴파일 되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.

 

3. 서버 자원 이용

 

SSR이 서버 자원을 더 많이 이용한다. 매번 서버에 요청 하기 때문이다.

반면 CSR은 클라이언트에 일감을 몰아주기 때문에 서버 부하가 적다

 

 

 

 

---