#기본기12_클라이언트 사이드 랜더링 / 서버사이드 랜더링

 

1. 랜더링이란?

Rendering 사전적으로는 '표현', 기본적으로 시각적인 결과물을 생성하는 과정을 나타낸다.

 

웹개발에서 랜더링이라 함은 HTML, CSS, JavaScript를 사용하여 웹페이지를 생성하고

브라우저에 표시하는 과정을 의미한다. 이 과정에서 클라이언트 사이드 / 서버 사이드 랜더링이 나뉘게 된다.

 

2. 클라이언트 사이드 랜더링은 무엇인가?

Client-Side Rendering, CSR은 브라우저에서 JavaScript를 사용하여 동적으로 웹 페이지를 생성하는 방식이다.

초기 HTML은 비어 있거나 간단한 마크업만 포함하고, 페이지가 로드된 후에 JavaScript가 실행되어 페이지를 동적으로 구성하고 랜더링 한다. 

 

3. 서버사이드 랜더링은 무엇인가?

서버에서 HTML코드를 생성하고 브라우저에 보냄으로 웹페이지를 표시하는 방식이다.

클라이언트가 페이지를 요청할 때마다 서버는 요청된 데이터를 사용하여 HTML을 생성하고 브라우저에 반환합니다.

 

4. 이 둘의 차이(장단점)는 무엇인가?

 

CSR

• 장점

  - 사용자의 반응에 따라 페이지가 동적으로 랜더링 되므로 사용자 친화적이다.

  - 초기 구성화면이 간단하므로 서버에 부담을 덜 주게 된다.

 

• 단점

  - 초기 구성화면이 간단하다가 이후 내용이 그려지므로 초기 로딩 속도가 느릴 수 있다. 

  - 웹크롤러 봇이 사이트 정보를 수집할 때 HTML이 비어있기 때문에 SEO(검색엔진초적화)에 불리하다는 단점이 있다.

   검색사이트에 노출이 잘 안될 수 있다는 뜻이다.

  * 구글 크롤러 봇은 자바스크립트를 실행할 줄 알아서 CSR도 SEO가 일부 이루어 지는 듯 하다.

 

SSR

• 장점

   - 완전한 HTML를 반환하기 때문에 SEO에 유리하다.

   - 서버에서 완전한 상태의 데이터를 보내주기 때문에 초기 로딩속도가 빠르다

 

• 단점

   - 페이지마다 서버에 요청을 하기 때문에 서버 부하가 있을 수 있다.

 

5. 짬짜면이 있다던데  Universal Rendering

서버 측 랜더링과 클라이언트 측 랜더링의 장점을 결합하여 최상의 사용자 경험을 제공합니다.

 

복잡한 부분

Universal Rendering을 구현하는 데에는 몇 가지 고려해야 할 사항이 있습니다. 예를 들어, 서버 측 랜더링을 위해 서버 측 코드와 클라이언트 측 코드를 통합해야 하며, 서버와 클라이언트 간의 데이터 흐름을 관리해야 합니다. 또한, 코드의 복잡성과 성능에 대한 영향을 고려해야 합니다.

 

ex) 특정 페이지에서는 React를 사용하고, 다른 페이지에서는 Next.js를 사용하여 SSR 또는 CSR을 구현할 수 있습니다.

 

5. 이 둘을 구현하는 방법은 무엇인가?

잘나와 있는 사이트 참고

https://sonicce99.github.io/csr-ssr/

동수의 로그북

 

 

참고사이트 출처 : gpt,  https://dev-ellachoi.tistory.com/28

이제는 알아야겠다! CSR과 SSR의 차이점과 장단점 (SPA, MPA, SSG, Universal Rendering 까지)