DB 런타임 렌더링
정적 파일이나 빌드 결과가 아니라 런타임 데이터베이스에 저장된 값을 프론트엔드가 읽어 화면을 구성하는 방식이다. VIBE 코딩에서는 AI가 만든 글, 앱 소개, 사전 항목을 매번 배포하지 않고 DB에 반영한 뒤 공개 페이지에서 읽게 만들 때 중요하다. 이 구조를 쓰면 콘텐츠 변경과 코드 배포를 분리할 수 있지만, 스키마 검증·캐시 갱신·공개 스모크 테스트를 함께 설계해야 한다.
영어 표기
DB Runtime Rendering
예시
AI가 새 코딩 가이드 JSON을 만들면 사람이 승인한 뒤 Turso posts 테이블에 업로드하고, 프론트는 해당 row를 읽어 /vibe-coding 상세 페이지를 렌더링한다. 이후 revalidate와 200 상태 확인으로 실제 공개 반영을 검증한다.
참고
정적 생성과 반대되는 개념이 아니라, 콘텐츠 변경 주기와 코드 배포 주기를 분리하기 위한 운영 패턴으로 이해하면 쉽다.
카테고리
backend-api
난이도
basic
태그
DB · 런타임
함께 읽기
연관 용어
프론트엔드·UI
서버 컴포넌트
영어 표기 Server Component
서버 컴포넌트는 Next.js App Router에서 기본값으로 서버에서 렌더링되는 React 컴포넌트이다. 데이터 조회, 파일 기반 콘텐츠 읽기, 초기 HTML 생성처럼 브라우저에 보내기 전에 처리할 일을 맡기 좋고, 클라이언트 JavaScript 번들을 줄이는 데 도움이 된다. 다만 클릭 이벤트나 useState 같은 브라우저 상호작용은 직접 사용할 수 없으므로, 바이브 코딩에서는 AI에게 '데이터를 읽는 서버 컴포넌트'와 '사용자가 조작하는 클라이언트 컴포넌트'를 나눠 달라고 지시하는 것이 중요하다.
컨텍스트 엔지니어링
콘텐츠 원천 소스
영어 표기 Content Source of Truth
여러 시스템에 복사되는 콘텐츠 중 무엇을 최종 기준으로 삼을지 정한 원본 위치를 말한다. Vive Coding 365 같은 AI 운영 사이트에서는 로컬 JSON을 원천 소스로 두고, Turso DB를 공개 런타임 미러로 두면 검수·백업·재동기화가 쉬워진다. AI가 DB에 직접 임의 데이터를 넣는 구조보다, 원천 JSON 검증 후 업로드하는 구조가 추적성과 품질 관리에 유리하다.