[Vue] Node.js, 렌더링방식

[ Node.js ]

JavaScript 런타임 환경으로, 서버 측에서 JavaScript를 실행할 수 있는 환경을 제공. (Java의 JVM처럼)

서버 사이드 렌더링(SSR), API 서버 개발, 파일 업로드, 데이터베이스 연동 등 다양한 서버 측 작업을 수행.

---

* 웹 애플리케이션의 렌더링 방식 * 

 

[ 클라이언트 사이드 렌더링 (Client-Side Rendering) ] _ CSR

 

렌더링 위치: CSR에서는 웹 애플리케이션의 초기 HTML은 비어 있거나 미리 정의된 고정 템플릿을 포함하고 있다. 이후 브라우저에서 JavaScript가 로드되고 실행되면, JavaScript가 동적으로 화면을 생성하고 업데이트.

 

서버 역할: 서버는 주로 데이터 API를 제공하며, 클라이언트는 이 API를 사용하여 데이터를 가져와 화면을 렌더링.

 

장점:

사용자 경험과 상호작용을 풍부하게 제공, 

초기 로딩 후에는 애플리케이션을 캐싱하고 재사용할 수 있어 빠른 전환 및 상호작용 가능.

 

단점:

검색 엔진 최적화(SEO)가 어렵고, 초기 로딩 성능이 SSR에 비해 떨어진다.

초기 HTML이 비어 있거나 제한적일 수 있어 소셜 미리보기 및 공유 링크에서 문제가 발생할 수 있다.

---

[ 서버 사이드 렌더링(Server-Side Rendering) ] _ SSR

 

렌더링 위치: SSR에서는 서버에서 초기 HTML을 생성하고 렌더링한 후, 이를 클라이언트에게 전달한다. 클라이언트에서는 이 초기 HTML을 받아서 렌더링하고, 그 후에 JavaScript를 로드하고 초기화.

서버 역할: 서버는 초기 HTML을 생성하는 역할을 담당하며, 이 과정에서 데이터를 가져와 초기 렌더링을 수행.

장점:
SEO를 개선할 수 있고, 검색 엔진은 초기 HTML을 쉽게 색인화할 수 있다.
초기 로딩 성능이 CSR에 비해 우수하며, 소셜 미리보기 및 공유 링크에서 초기 HTML을 사용할 수 있다.

단점:
복잡한 상호작용 및 렌더링이 필요한 페이지에서는 추가적인 서버 리소스가 필요할 수 있다.
초기 렌더링 시간이 길어질 수 있으며, 사용자 경험과 성능이 서버 부하에 영향을 받을 수 있다.

CSR과 SSR은 각각의 장단점이 있다. 예를 들어, 컨텐츠 중심의 정적 사이트의 경우 CSR이 적합할 수 있고, 동적 데이터와 SEO가 중요한 경우 SSR을 고려할 수 있다. 또한, Universal SSR이라고 불리는 중간 형태도 존재(초기 로딩 성능을 향상시키면서 SEO도 지원하는 방식)

---