반응형
m.logPrint() is working!
<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].
docuK-1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.
Table of Contents is filled out.
Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.
<cite> and <refer> tags are rendered to show bubble reference.
<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.
Current styles (dark/bright mode, font-family, font-size, line-height) are shown.
disqus.js with id="disqus-js" is loaded.
kakao.js with id="kakao-jssdk" is loaded.
New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.
m.delayPad=0;
m.wait=1024;
wait 1149ms.
<eq> and <eqq> tags are rendered to MathJax format, being enclosed by \ ( \ ) and \ [ \ ].
docuK-1 scripts started!
If this log is not closed automatically, there must be an error somewhere in your document or scripts.
Table of Contents is filled out.
Auto numberings of sections (div.sec>h2, div.subsec>h3, div.subsubsec>h4), <eqq> tags, and <figure> tags are done.
<cite> and <refer> tags are rendered to show bubble reference.
<codeprint> tags are printed to corresponding <pre> tags, only when the tags exist in the document.
Current styles (dark/bright mode, font-family, font-size, line-height) are shown.
disqus.js with id="disqus-js" is loaded.
kakao.js with id="kakao-jssdk" is loaded.
New ShortKeys (T: Table of Contents, F: Forward Section, D: Previous Section, L: To 전체목록/[Lists]) are set.
m.delayPad=0;
m.wait=1024;
wait 1149ms.
Mode: Bright; Font: Noto Sans KR; font-size: 18.0px (10.0); line-height: 1.6;
width: 1280, height: 720, version: 2.12.18
Canonical URI: https://kipid.tistory.com/entry/week6-위클리-페이퍼-웹-페이지-렌더링-방식-CSR-SSR-SSG-각각의-특징과-각-방식을-어떤-상황에-사용하면-좋을지-설명
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/368
document.referrer: Empty
width: 1280, height: 720, version: 2.12.18
Canonical URI: https://kipid.tistory.com/entry/week6-위클리-페이퍼-웹-페이지-렌더링-방식-CSR-SSR-SSG-각각의-특징과-각-방식을-어떤-상황에-사용하면-좋을지-설명
dg:plink (Document Global Permanent Link): https://kipid.tistory.com/368
document.referrer: Empty
week6 위클리 페이퍼 (웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명)
Table of Contents
T1.웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명
▼ Show/Hide
웹 페이지 렌더링 방식에는 CSR (Client-Side Rendering), SSR (Server-Side Rendering), SSG (Static Site Generation) 세 가지가 있습니다. 각 방식의 특징과 사용 상황을 설명드릴게요.
T1.1.Client-Side Rendering (CSR)
특징:
브라우저에서 렌더링: 모든 JavaScript 파일을 클라이언트(브라우저)로 전송하고, 브라우저가 이를 해석하여 페이지를 렌더링합니다.
빠른 인터랙션: 페이지가 로드된 후에는 사용자와의 인터랙션이 빠릅니다.
초기 로딩 시간: 초기 로딩 시간이 길어질 수 있습니다. 특히, JavaScript 파일이 크거나 네트워크 속도가 느린 경우.
사용 상황:
단일 페이지 애플리케이션(SPA): React, Vue.js 등으로 개발된 애플리케이션.
동적 콘텐츠: 사용자 인터랙션이 많은 애플리케이션.
T1.2.Server-Side Rendering (SSR)
특징:
서버에서 렌더링: 서버에서 HTML을 생성하여 클라이언트로 전송합니다.
빠른 초기 로딩: 초기 로딩 시간이 빠릅니다. 브라우저가 완성된 HTML을 바로 렌더링할 수 있기 때문입니다.
SEO 친화적: 검색 엔진이 HTML 콘텐츠를 쉽게 크롤링할 수 있습니다.
사용 상황:
SEO가 중요한 웹사이트: 블로그, 뉴스 사이트 등.
초기 로딩 속도가 중요한 경우: 사용자 경험을 향상시키기 위해.
T1.3.Static Site Generation (SSG)
특징:
사전 렌더링: 빌드 시점에 HTML 파일을 생성하여 서버에 배포합니다.
빠른 로딩 시간: 정적 파일을 제공하므로 로딩 시간이 매우 빠릅니다.
보안: 서버에서 동적으로 생성되는 콘텐츠가 없으므로 보안성이 높습니다.
사용 상황:
정적 콘텐츠: 블로그, 문서 사이트 등.
변경이 적은 콘텐츠: 자주 변경되지 않는 페이지.
▲ Hide
T2.결론
▼ Show/Hide
각 렌더링 방식은 특정 상황에서 더 적합하게 사용될 수 있습니다. 프로젝트의 요구사항과 목표에 따라 적절한 방식을 선택하는 것이 중요합니다.
개인적으론 Client Side Rendering 을 좋아합니다. SEO 는 Search Engine 이 알아서 해야하는거 아닐지? =ㅂ=ㅋ.
▲ Hide
반응형