Bridgetown 서버 렌더링 라우트

Server-Rendered Routes | Bridgetown

작성자
Ruby Weekly
발행일
2025년 09월 16일

핵심 요약

  • 1 Bridgetown은 Rack, Puma, Roda를 기반으로 강력한 서버 렌더링 라우트 및 SSR 기능을 제공하여 정적 사이트 생성과 동적 콘텐츠 제공을 결합합니다.
  • 2 `bridgetown-routes` 플러그인을 통해 파일 기반의 동적 라우트와 템플릿을 손쉽게 정의할 수 있으며, URL 플레이스홀더를 지원하여 유연한 라우팅이 가능합니다.
  • 3 `Bridgetown::RodaCallable` 믹스인을 활용한 호출 가능 객체 및 Viewable 컴포넌트를 사용하여 라우트 블록 내에서 모델, 리소스, 커스텀 객체를 객체 지향적으로 렌더링할 수 있습니다.

도입

Bridgetown은 Rack과 Puma, 그리고 빠르고 가벼운 Roda 웹 라우팅 툴킷을 결합하여 프로덕션 준비가 완료된 웹 서버를 제공합니다. 이는 `bin/bridgetown start` 명령 실행 시 정적으로 빌드된 모든 사이트 파일을 서빙하는 기본 기능 외에도, 개발자가 `server/routes` 폴더에 Roda 기반의 API 라우트를 직접 생성할 수 있도록 지원합니다. 특히, 정적 사이트 생성(SSG)과 서버 측 렌더링(SSR)의 하이브리드 아키텍처 패러다임을 적극 수용하여, 메모리 내에서 사이트를 부팅하고 요청 시 콘텐츠를 렌더링하는 간소화된 경로를 제공합니다.

Bridgetown의 서버 렌더링 기능은 init :ssr 또는 init :"bridgetown-routes" 플러그인을 config/initializers.rb에 추가하여 활성화할 수 있습니다. 이를 통해 Roda 라우트 내에서 콘텐츠를 서버 측에서 렌더링할 수 있습니다.

Bridgetown SSR via Roda

  • 기본 작동 방식: server/routes 폴더에 Roda 기반의 API 라우트를 정의하여, /preview/:collection/:path와 같은 URL에 대한 요청을 처리할 수 있습니다. 이 라우트는 특정 컬렉션과 경로에 해당하는 콘텐츠 아이템을 찾아 HTML로 렌더링합니다.
  • 자동 렌더링: Bridgetown Roda 설정은 라우트 블록에서 반환되는 모델이나 리소스를 자동으로 HTML로 렌더링하는 기능을 내장하고 있습니다.
  • 활용 사례: SSR은 즉석에서 미리 보기 콘텐츠를 생성하거나, 미리 빌드하기 어려운 동적 콘텐츠(예: 실시간 재고, 가격 정보), 혹은 오래된 콘텐츠를 최신 정보로 “새로고침”하는 데 매우 유용합니다. 이를 통해 성능과 최신성을 동시에 확보하는 하이브리드 솔루션 구축이 가능합니다.

라우트 우선순위 플래그

라우트 클래스에는 :lowest, :low, :normal, :high, :highest와 같은 우선순위 플래그를 설정할 수 있습니다. 이 플래그는 라우트가 로드되는 순서를 결정하며, :highest가 가장 먼저 실행됩니다.

사이트 객체 접근 및 성능 고려사항

  • site 헬퍼: 라우트 코드 내에서 site 또는 bridgetown_site 헬퍼를 사용하여 현재 사이트 객체에 접근하고, 데이터, 컬렉션, 리소스 등을 활용할 수 있습니다.
  • 성능 최적화: 대규모 사이트에서는 모든 컬렉션이 메모리에 로드될 때 성능 문제가 발생할 수 있습니다. 이를 방지하기 위해 config/initializers.rb에서 skip_for_ssr true 설정을 통해 특정 컬렉션(예: posts)의 SSR 모드 로딩을 건너뛸 수 있습니다.

Viewable 컴포넌트 렌더링

Bridgetown은 MVC 패러다임의 “VC” 부분에 해당하는 Bridgetown::Viewable 믹스인을 컴포넌트에 제공합니다. 이를 통해 Roda 라우트에서 뷰 렌더링 로직을 Bridgetown::Component로 분리하여 코드를 깔끔하게 유지할 수 있습니다.

파일 기반 동적 라우트 (bridgetown-routes 플러그인)

bridgetown-routes 플러그인은 소스 폴더 내에서 파일 기반의 동적 라우트를 작성하고 통합된 뷰 템플릿을 사용하는 기능을 제공합니다. * 구조: 라우트 파일은 상단에 특별한 구분자(---<%% >--- 또는 ###ruby###)로 둘러싸인 Roda 블록과 그 아래의 뷰 템플릿으로 구성됩니다. * Roda 블록: r.get, r.post 등의 HTTP 메서드 핸들러를 정의하고, render_with 또는 data 해시를 통해 프론트 매터를 지정할 수 있습니다. * 라우팅 플레이스홀더: 파일 시스템 수준에서 [slug]와 같은 플레이스홀더를 지원하여 /items/[slug].erb와 같이 동적인 URL 매칭이 가능하며, 폴더 이름에도 플레이스홀더를 사용할 수 있습니다.

기타 기능

  • Islands Architecture 통합: src/_islands/paradise/routes/dreamy.erb와 같이 아일랜드 내부에 라우트 폴더를 추가하여 /paradise/dreamy와 같은 URL로 매핑할 수 있습니다.
  • 추가 라우트 경로: config/initializers.rb에서 additional_source_paths 설정을 통해 프로젝트 루트 외부의 임의 경로를 라우트 파일 위치로 추가할 수 있습니다.
  • URL 헬퍼: relative_urlabsolute_url 헬퍼는 라우트 코드 내에서 URL을 참조할 때 기본 경로 또는 로케일 접두사를 자동으로 추가하여 일관성을 유지합니다.

호출 가능 객체 (Callable Objects)

Roda 블록 내에서 HTML 또는 다른 텍스트 기반 형식으로 렌더링될 리소스를 반환하는 것 외에도, Bridgetown::RodaCallable 믹스인을 포함하고 call(app) 메서드를 정의하는 모든 객체를 반환할 수 있습니다. * 커스텀 로직 구현: RSS 피드 생성과 같은 복잡한 커스텀 로직을 객체 지향적으로 구현하여 라우트 블록에서 직접 사용할 수 있습니다. * Viewable 컴포넌트와의 통합: Viewable 컴포넌트 믹스인은 RodaCallable 위에 빌드되어, 프론트 매터 접근, render_in_layout, render_with와 같은 추가 기능을 제공하여 더욱 강력한 객체 지향적 MVC 경험을 가능하게 합니다. 여러 호출 가능 객체를 계단식으로 연결하여 복잡한 컨트롤러 로직을 구성할 수도 있습니다.

결론

Bridgetown은 Rack, Puma, Roda의 견고한 기반 위에 서버 렌더링 라우트, SSR, 파일 기반 동적 라우트, 그리고 Viewable 컴포넌트 및 호출 가능 객체와 같은 고급 기능을 통합하여 개발자에게 유연하고 강력한 웹 애플리케이션 구축 환경을 제공합니다. 이는 SSG의 장점과 SSR의 동적 콘텐츠 처리 능력을 결합하여, 실시간 미리 보기, 동적 데이터 통합, 최신 콘텐츠 제공 등 다양한 현대 웹 개발 시나리오에 효과적으로 대응할 수 있도록 합니다. Bridgetown의 "고집 있는 Roda 배포판"은 개발 경험을 향상시키기 위해 기본적으로 여러 플러그인을 구성하여 제공하며, Ruby 개발자들이 빠르고 효율적으로 웹 애플리케이션을 구축할 수 있도록 지원합니다.

댓글 0

댓글 작성

0/1000
정중하고 건설적인 댓글을 작성해 주세요.

아직 댓글이 없습니다

첫 번째 댓글을 작성해보세요!