웹 렌더링 형태

topics	200-프론트개발 208 웹 렌더링
types	이론 학습
tags	#rendering #csr #ssr #ssg #isr #gatsby

웹 렌더링 형태

CSR, SSR, SSG, ISR은 웹 개발에서 사용되는 다양한 렌더링 방식을 나타냅니다. 각각의 특징을 간단히 설명해 드리겠습니다:

클라이언트 사이드 렌더링 (CSR)

CSR은 브라우저에서 JavaScript를 사용하여 웹페이지를 렌더링하는 방식입니다

초기 로드 시 서버는 최소한의 HTML과 JavaScript 파일만 전송합니다.
브라우저가 JavaScript를 실행하여 동적으로 콘텐츠를 생성합니다.
대화형 애플리케이션에 적합하며, 초기 로딩 속도가 느릴 수 있습니다.
spa

서버 사이드 렌더링 (SSR)

SSR은 서버에서 HTML 콘텐츠를 생성하여 브라우저로 전송하는 방식입니다3 4.

서버가 요청을 받으면 완전한 HTML을 생성하여 클라이언트에 전송합니다.
초기 로딩 속도가 빠르고 SEO에 유리합니다.
서버 부하가 높을 수 있습니다.

정적 사이트 생성 (SSG)

SSG는 빌드 시점에 모든 페이지를 미리 생성하는 방식입니다5 6.

모든 HTML 페이지를 빌드 시 미리 생성합니다.
매우 빠른 로딩 속도와 뛰어난 SEO 성능을 제공합니다.
콘텐츠 업데이트 시 전체 사이트를 다시 빌드해야 합니다.

증분 정적 재생성 (ISR)

ISR은 SSG의 장점을 유지하면서 동적 업데이트를 가능하게 하는 기술입니다7 8.

정적 페이지를 생성하고 주기적으로 또는 요청 시 재생성할 수 있습니다.
SSG의 성능 이점을 유지하면서 콘텐츠를 최신 상태로 유지할 수 있습니다.
대규모 사이트에서 빌드 시간을 줄이는 데 효과적입니다.

각 방식은 프로젝트의 요구사항에 따라 선택되며, 때로는 이들을 조합하여 사용하기도 합니다. 최신 웹 프레임워크들은 이러한 다양한 렌더링 방식을 지원하여 개발자가 최적의 성능과 사용자 경험을 제공할 수 있도록 돕고 있습니다.

GatsbyJS

https://blog.banksalad.com/tech/build-a-website-with-gatsby/

https://mnxmnz.github.io/gatsby/what-is-gatsby/

Jekyll
- Pros
  - Beginner friendly - it's just html.
  - Simple templating language (Liquid)
  - Vast plugin ecosystem.
  - Free hosting is available via Github pages.
- Cons
  - Slow build times.
  - Installing ruby dependencies for the first time can cause frustration.
  - Complicated page logic can be difficult using Liquid.
  - Creating pages dynamically from JSON requires custom ruby programming.
- Personal opinions
  - Jekyll is best for small + medium sites (under 500 pages).
  - Great for sites that need to be maintained by teams with less dev experience.
  - Don't rely on plugins or the native SASS complication - use webpack for this instead.
  - Best CMS? Use a git-based CMS like Forestry or Netlify CMS.
Hugo
- Pros
  - Extremely fast build times.
  - Powerful templating language.
  - SASS compilation out of the box.
  - Strong i18n support
- Cons
  - Ugly & confusing templating language.
  - Documentation is decent but confusing at times.
  - Cannot create pages dynamically from JSON (coming soon, I think)
- Personal opinions
  - Hugo is great for all size sites — best for large sites (over 10,000 pages).
  - Can likely build 100,000 pages in same time Gatsby & Jekyll could build 1000.
  - I do believe Hugo's strange templating can cause jr. devs to have issues understanding things early on.
  - Hugo would be my choice for a static site that gets updated frequently through the day or content that needs to go up immediately (like news sites or for press releases)
  - Best CMS? Use a git-based CMS like Forestry or Netlify CMS.
Gatsby
- Pros
  - Gatsby site performance is faster than nearly any other static site generator.
  - Pleasant developer experience for teams using modern tools.
  - Can dynamically create pages from JSON (or nearly any data-source)
  - Quality plugin ecosystem & very good documentation.
- Cons
  - Requires vanilla JavaScript (ES6) experience.
  - Can feel like over-engineering for small / simple sites.
  - Best used on sites that will be maintained by teams with experience.
  - I've found that many web developers are intimidated by ES6 and React.
- Personal Opinion
  - Great for small + medium sites (under 500 pages).
  - The best static site generator for creating pages dynamically from a JSON source.
  - Would not introduce Gatsby to teams with little javascript experience.
  - Best CMS? https://headlesscms.org/

https://velog.io/@stakbucks/Headless-CMS-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-Sanity