Java Spring _ SSR(Server Side Rendering) ,CSR(Client Side Renderin

Server Side Rendering (SSR) 

---

서버 사이드 렌더링은 말 그대로 서버에서 웹 페이지를 렌더링 하는 방식입니다.

사용자가 요청한 페이지에 대한 HTML,CSS,JavaScript 파일을 서버에서 완전히 렌더링 한 후, 클라이언트(브라우저)로 전송합니다. 이 방식의 가장 큰 장점은 초기 페이지 로딩 속도가 빠르다는 것입니다.

왜냐하면 서버에서 이미 완성된 형태로 전달되기 때문입니다.

 

장점

• 초기 로딩 속도가 빠르다.
• 검색 엔진 최적화(SEO)에 유리하다.

단점

• 서버 부하가 크다.
• 전체 페이지를 다시 렌더링해야 하는 경우가 많다.

 

 

 

주로 사용되는 경우(SSR)

---

1. 검색 엔진 최적화 (SEO)가 중요한 경우 :

 

SSR을 사용하면 서버에서 렌더링된 완성된 페이지를 제공하므로 크롤러가 쉽게 콘텐츠를 수집할 수 있습니다. 이를 통해 사이트의 검색 순위를 높일 수 있습니다.

 

2. 초기 페이지 로딩 속도가 중요한 경우 :

 

사용자가 웹 사이트에 처음 방문했을 때, 서버에서 렌더링 된 완성된 페이지가 제공되기 때문에 초기 로딩 속도가 빠릅니다. 이는 특히 모바일 환경에서 중요할 수 있습니다.

 

3. 콘텐츠 중심의 웹 사이트 :

 

블로그, 뉴스, 미디어 웹 사이트와 같이 콘텐츠 중심의 웹 사이트에서는 SSR이 적합합니다. 이러한 사이트에서는 동적인 인터렉션보다는 콘텐츠의 가독성과 빠른 로딩 속도가 더 중요합니다.

 

ex)

 

 

Client Side Rendering(CSR)

---

클라이언트 사이드 렌더링은 웹 페이지의 렌더링 작업을 클라이언트(브라우저)에서 처리하는 방식입니다. 이 경우, 서버는 초기에 HTML, CSS, JavaScript  파일 등을 전송하고, 클라이언트에서 필요한 데이터와 뷰를 조합하여 웹 페이지를 생성합니다. 따라서 초기 로딩 시간이 길 수 있지만, 이후에는 동적으로 페이지를 구성할 수 있다는 장점이 있습니다.

 

장점

• 서버 부하가 상대적으로 적다.
• 사용자 경험(UX)이 뛰어나다.

단점

• 초기 로딩 속도가 느리다.
• SEO에 약할 수 있다.

 

 

주로 사용되는 경우(CSR)

---

 

1. 사용자 인터렉션 및 동적 콘텐츠가 많은 웹 애플리케이션:

 

CSR은 페이지 새로고침 없이 동적으로 콘텐츠를 업데이트하거나 변경할 수 있기 때문에 사용자 인터렉션이 높은 웹 애플리케이션에서 적합합니다.

 

2. 서버 부하를 최소화하고자 하는 경우: 

 

클라이언트에서 렌더링을 처리하므로 서버에 덜 의존하게 되고, 서버 부하가 상대적으로 줄어듭니다.

 

3. 사용자 경험(UX)을 중요시하는 웹 애플리케이션

 

CSR은 사용자가 웹 애플리케이션을 이용하는 동안 부드러운 경험을 제공할 수 있습니다.

 

ex) NETFLIX

 

 

 

SSR  vs CSR

---

SSR과 CSR은 웹 애플리케이션의 렌더링 방식에 따라 구분되며, 코드 작성 시에도 몇 가지 차이점이 있습니다.

 

1.SSR (Server Side Rendering)

 

• 웹 페이지의 HTML, CSS, JavaScript 등을 서버에서 완전히 렌더링 한 후 클라이언트로 전송합니다.
• 서버에서 동적 데이터를 가져와 템플릿과 결합한 후 완성된 HTML을 생성합니다.
• 서버에서 사용되는 프레임워크와 템플릿 엔진에 따라 코드 작성 방식이 달라집니다. 예를 들어, Node.js를 사용하는 경우 Express와 같은 웹 프레임워크와 함께 템플릿 엔진을 사용하여 SSR을 구현할 수 있습니다.
• 서버에서 렌더링된 HTML을 클라이언트로 전송한 후, 필요한 경우 JavaScript를 사용하여 동적인 기능을 추가합니다.

 

2. CSR (Client Side Rendering)

 

• 웹 페이지의 뼈대가 되는 HTML, CSS, JavaScript 파일을 서버에서 클라이언트로 전송하고, 브라우저에서 필요한 데이터와 뷰를 조합하여 웹 페이지를 생성합니다.
• JavaScript 프레임워크 또는 라이브러리를 사용하여 클라이언트에서 페이지를 동적으로 렌더링 합니다. 예를 들어, React, Angular, Vue.js와 같은 프레임워크를 사용할 수 있습니다.
• 웹 애플리케이션 로직이 클라이언트 측에서 처리되며, 필요한 데이터는 API를 통해 서버로부터 가져옵니다.
• 브라우저에서 JavaScript를 사용하여 웹 페이지의 동작을 제어하고, 웹 페이지를 조작하거나 변경합니다.

 

결론적으로, SSR과 CSR의 주요 차이점은 웹 페이지의 렌더링이 어디에서 이루어지느냐에 따라 달라지며, 이에 따라 사용되는 프레임워크, 라이브러리, 코드 작성 방식도 다르게 됩니다. 각 방식의 특징과 장단점을 고려하여 웹 애플리케이션의 요구 사항과 목적에 맞게 선택하면 됩니다.