SSG ??
SSG는 "Static Site Generation"의 약어로, 웹 개발에서 사용되는 렌더링 방식 중 하나입니다. SSG는 정적인 HTML 파일을 미리 생성하여 웹 애플리케이션의 성능을 향상시키는 데 사용됩니다.
SSG의 작동 방식은 다음과 같습니다:
- 빌드 시 생성: SSG에서는 사전에 웹 페이지의 모든 콘텐츠를 가져와 정적인 HTML 파일로 변환합니다. 이 때, 데이터베이스 쿼리, API 요청 또는 다른 데이터 소스로부터 데이터를 가져와 미리 렌더링된 페이지를 생성합니다.
- 캐싱 및 배포: 생성된 정적 파일은 서버나 CDN에 배포되고 캐싱됩니다. 이를 통해 동일한 콘텐츠에 대한 반복적인 요청을 최소화하고, 페이지 로딩 속도를 향상시킬 수 있습니다.
- 클라이언트 측 렌더링: 사용자가 웹 페이지에 접근하면 브라우저는 미리 생성된 정적 HTML 파일을 로드합니다. 그 후, 필요한 경우 클라이언트 측 자바스크립트를 사용하여 동적인 기능을 추가하거나 데이터를 가져와 화면을 업데이트할 수 있습니다.
SSG의 주요 장점은 다음과 같습니다:
- 빠른 로딩 속도: 정적 파일을 사용하기 때문에 초기 로딩 속도가 빠릅니다.
- SEO 최적화: 검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있도록 도와줍니다.
- 보안: 서버 사이드 처리가 없기 때문에 보안 취약점이 줄어듭니다.
- 확장성: 정적 파일을 서빙하는 작업은 서버에 부담을 주지 않아 확장성이 높아집니다.
SSG의 대표적인 사용 사례로는 Next.js와 Nuxt.js와 같은 프레임워크에서 제공하는 정적 사이트 생성 기능이 있습니다.
SSR ??
SSR은 "Server-Side Rendering"의 약어로, 웹 개발에서 사용되는 렌더링 방식 중 하나입니다. SSR은 웹 페이지의 초기 렌더링을 서버 측에서 처리하고, 클라이언트에게 완전히 렌더링된 HTML을 전달하는 방식입니다.
SSR의 작동 방식은 다음과 같습니다:
- 요청 시 서버에서 렌더링: 사용자가 웹 페이지에 접근하면 서버는 해당 페이지의 요청을 받아와서 서버 측에서 해당 페이지의 HTML을 미리 렌더링합니다.
- 데이터 가져오기: 필요한 경우 서버는 데이터베이스 쿼리, API 요청 또는 다른 데이터 소스로부터 데이터를 가져와 렌더링에 사용할 수 있습니다.
- 렌더링된 페이지 반환: 서버는 미리 렌더링된 HTML 페이지를 클라이언트에게 전달합니다. 이 때, 페이지에 포함된 동적인 부분은 이미 렌더링되어 있습니다.
- 클라이언트 측 렌더링: 클라이언트 측에서는 초기에 전달된 HTML을 받아들이고, 페이지에 추가적인 동적 기능을 부여하기 위해 필요한 경우 클라이언트 측 자바스크립트를 사용하여 화면을 업데이트합니다.
SSR의 주요 장점은 다음과 같습니다:
- SEO 최적화: 검색 엔진은 미리 렌더링된 HTML 페이지를 쉽게 인덱싱할 수 있습니다.
사용자 경험 개선: 초기 로딩 시간이 빨라져 사용자 경험이 향상됩니다. - 동적 콘텐츠: 서버에서 동적 데이터를 포함하여 페이지를 구성할 수 있습니다.
SSR의 대표적인 사용 사례로는 Next.js와 Nuxt.js와 같은 프레임워크에서 제공하는 서버 사이드 렌더링 기능이 있습니다.
CSR??
CSR은 "Client-Side Rendering"의 약어로, 웹 개발에서 사용되는 렌더링 방식 중 하나입니다. CSR은 웹 페이지의 초기 렌더링을 클라이언트 측에서 처리하고, 페이지의 동적 콘텐츠를 자바스크립트를 사용하여 클라이언트 측에서 렌더링하는 방식입니다.
CSR의 작동 방식은 다음과 같습니다:
- 요청 시 기본 HTML 로드: 사용자가 웹 페이지에 접근하면 서버는 해당 페이지의 기본 HTML 구조와 클라이언트 측 자바스크립트 파일을 전달합니다.
- 클라이언트에서 렌더링: 클라이언트 측 자바스크립트는 웹 페이지를 동적으로 생성하고, 필요한 데이터를 가져와 렌더링합니다. 이로 인해 초기 로딩 시간이 짧아지지만, 페이지가 로드된 후에야 콘텐츠가 렌더링되기 시작합니다.
- 데이터 가져오기: 클라이언트는 필요한 데이터를 API 요청 등으로 서버에서 가져와 페이지를 완전히 렌더링합니다.
CSR의 주요 장점은 다음과 같습니다:
- 빠른 초기 로딩: 기본 HTML과 자바스크립트 파일만으로 초기 로딩이 빠릅니다.
- 동적 기능: 클라이언트 측에서 페이지의 동적인 기능을 자유롭게 추가할 수 있습니다.
그러나 CSR의 단점으로는:
- SEO 어려움: 검색 엔진 최적화를 위해 추가적인 조치가 필요합니다.
- 초기 로딩 후 대기 시간: 페이지가 로드된 후에야 데이터가 가져와지고 렌더링되기 때문에 초기 로딩 후에는 대기 시간이 발생할 수 있습니다.
CSR의 대표적인 사용 사례로는 React와 Vue.js와 같은 프론트엔드 프레임워크에서 사용되는 방식이 있습니다.
SSR, CSR, SSG 차이 점은 ?!
SSR (Server-Side Rendering), CSR (Client-Side Rendering), 그리고 SSG (Static Site Generation)는 모두 웹 개발에서 사용되는 다양한 렌더링 방식을 나타내며 각각의 특징과 장단점이 있습니다. 이들의 주요 차이점은 다음과 같습니다:
SSR (Server-Side Rendering):
서버에서 초기 HTML 렌더링을 수행하여 완전한 페이지를 생성합니다.
요청마다 서버가 페이지를 렌더링하므로 검색 엔진 최적화에 유리하며 초기 로딩 속도가 빠릅니다.
동적 콘텐츠를 포함할 수 있으며 SEO에 강점을 가집니다.
클라이언트 측에서 필요한 데이터를 추가 요청해야 할 수 있어 불필요한 대기 시간이 발생할 수 있습니다.
CSR (Client-Side Rendering):
클라이언트 측 자바스크립트를 사용하여 초기 렌더링을 수행하고, 페이지의 동적 콘텐츠를 클라이언트에서 렌더링합니다.
초기 로딩 속도가 빠르지만, 동적 콘텐츠를 로딩하는 데 시간이 걸릴 수 있습니다.
검색 엔진 최적화가 어려울 수 있으며, 초기 로딩 이후에도 페이지의 대기 시간이 발생할 수 있습니다.
자바스크립트를 지원하지 않는 환경에서는 페이지가 제대로 표시되지 않을 수 있습니다.
SSG (Static Site Generation):
사전에 정적인 HTML 파일을 미리 생성하여 서버나 CDN에 저장합니다.
초기 로딩 속도가 매우 빠르며, SEO에 유리합니다.
페이지에 동적 콘텐츠가 포함되면, 해당 콘텐츠를 클라이언트 측에서 자바스크립트로 가져와 업데이트합니다.
동적인 기능이 강조되는 애플리케이션에는 적합하지 않을 수 있습니다.
이러한 렌더링 방식은 웹 애플리케이션의 목적과 요구 사항에 따라 선택되며, 각각의 장점과 제한 사항을 고려하여 적절한 방식을 선택하는 것이 중요합니다.
'빡쌔게하자 이론!!' 카테고리의 다른 글
| 스키마, 메타란?? 어떻게 사용해?? (1) | 2023.09.02 |
|---|