프로젝트를 TanStack Start로 업그레이드하기

기존 React + Vite 프로젝트를 Lovable의 최신 템플릿인 TanStack Start로 업그레이드하여 페이지를 서버에서 렌더링하고, 검색 노출과 소셜 링크 미리보기를 개선합니다.

프로젝트가 Lovable의 기존 React + Vite 스택으로 빌드되었다면, 페이지를 서버에서 렌더링하는 Lovable의 최신 템플릿인 TanStack Start로 기존 프로젝트를 그대로 업그레이드할 수 있습니다. 업그레이드하면 앱에 다음과 같은 이점이 생깁니다.

• 검증된 크롤러뿐 아니라 모든 방문자와 도구가 요청할 때마다 페이지를 읽을 수 있습니다.
• 제목, 설명, 이미지가 포함된 소셜 링크 미리보기가 안정적으로 표시됩니다.
• 브라우저가 완성된 콘텐츠를 받으므로 첫 페이지 로드가 빨라집니다.
• workspace identity 재사용처럼 TanStack Start가 필요한 최신 Lovable 기능과 호환됩니다.

업그레이드는 기존 프로젝트 안에서 진행됩니다. Lovable이 프로젝트의 페이지 구조를 다시 작성하고 디자인, 콘텐츠, 백엔드를 그대로 이전합니다. 다시 게시하기 전까지 게시된 사이트에는 이전 버전이 계속 제공되며, 프로젝트의 버전 기록에서 전체 업그레이드를 되돌릴 수 있습니다.

서버 측 렌더링이란

기존 React + Vite 앱은 거의 비어 있는 페이지를 브라우저에 전송하고, 방문자의 브라우저가 JavaScript로 콘텐츠를 구성합니다. 방문자는 완성된 앱을 볼 수 있으며, Lovable은 SEO 및 AEO에 설명된 것처럼 검증된 검색 엔진과 소셜 미리보기 봇이 콘텐츠를 읽을 수 있도록 게시된 페이지의 사전 렌더링 사본을 제공합니다. 검증 목록에 없는 도구에는 보이는 내용이 거의 없습니다.

TanStack Start는 여기서 한 단계 더 나아갑니다. 각 페이지를 전송하기 전에 서버에서 완성된 HTML로 렌더링합니다. 방문자, 검색 엔진, AI 크롤러, 링크 미리보기 봇을 비롯한 모든 도구가 매번 동일한 완성 페이지를 받습니다. 이를 서버 측 렌더링(SSR)이라고 합니다.

시작하기 전에

시작하기 전에 대상 여부, 권한, 비용을 확인하세요.

• 이 업그레이드는 TanStack Start 이전에 Lovable이 사용하던 React + Vite 스택으로 빌드된 기존 Lovable 프로젝트를 위한 것입니다. 최신 프로젝트는 이미 TanStack Start를 사용합니다. 2026년 5월 13일부터 새 프로젝트의 기본값이 되었고, 2026년 6월 22일부터 새 Enterprise 프로젝트에도 기본 적용되었습니다.
• 모든 플랜에서 프로젝트 편집 권한이 있는 사용자는 누구나 업그레이드를 시작할 수 있습니다.
• 업그레이드는 일반 채팅 작업으로 실행되므로 다른 요청과 마찬가지로 크레딧을 사용합니다. 대부분의 업그레이드는 프로젝트 규모에 따라 10~35크레딧이 듭니다. 시작할 때 workspace 잔액이 부족하면 Lovable이 진행 도중 충전이 필요할 수 있음을 알려줍니다.
• 프로젝트가 업그레이드 대상이 아니면 프로젝트 설정이나 채팅 메뉴에 업그레이드 옵션이 나타나지 않으며, 업그레이드를 요청해도 Lovable이 그 이유를 설명합니다.

프로젝트가 어떤 스택을 사용하는지 확실하지 않다면 Lovable에 다음과 같이 질문하세요.

What stack is this project on?

업그레이드 시작하기

업그레이드는 다음 세 가지 방법으로 시작할 수 있으며, 어느 방법이든 변경 전에 확인을 요청합니다.

• 채팅에서: /를 입력하고 Migrate to TanStack Start를 선택한 다음 대화 상자에서 확인합니다.
• 프로젝트 설정에서: General → Project actions 아래의 Migrate to TanStack Start를 찾아 Migrate를 선택합니다. 확인하면 에디터로 이동하며 업그레이드가 자동으로 시작됩니다.
• Lovable에 직접 요청:

Upgrade my app to TanStack Start so my pages render on the server and my link previews work.

채팅에서 요청하면 Lovable은 업그레이드의 작업 내용과 비용을 설명하는 Migrate to TanStack Start 확인 카드를 표시합니다. 시작하려면 Start migration을, 프로젝트를 그대로 두려면 Cancel을 선택하세요.

빈 링크 미리보기나 검색 결과에 나타나지 않는 페이지처럼 서버 측 렌더링이 필요한 문제를 문의하면 Lovable이 업그레이드를 제안할 수도 있습니다. Lovable은 사용자의 확인 없이 업그레이드를 시작하지 않습니다.

업그레이드 중 진행되는 작업

Lovable은 한 번의 실행에서 프로젝트를 다음 순서로 처리합니다.

1. 로그인이나 admin 확인으로 보호된 페이지를 포함해 모든 페이지를 파악하고, 동일한 보호 설정이 유지되도록 합니다.
2. 앱의 페이지 구조를 TanStack Start로 변환합니다.
3. 페이지 제목, 설명, 소셜 미리보기 태그, 분석 스크립트를 새 템플릿으로 옮겨 검색 및 분석 설정이 계속 작동하도록 합니다.
4. 테마와 스타일 사용자 지정을 이전합니다.
5. 앱에서만 사용하는 백엔드 코드를 새 템플릿으로 옮깁니다.
6. 프로젝트를 빌드하고 오류를 확인한 다음, 모든 페이지를 불러와 정상 작동하는지 확인합니다.

결제 성공 시 결제 제공업체가 앱에 알리는 코드, 일정에 따라 실행되는 예약 job, 앱에 연결된 AI assistant처럼 외부 서비스가 직접 호출하는 백엔드 코드는 기존 웹 주소를 유지합니다. Lovable이 현재 실행 위치에 그대로 두므로 통합은 별도 재설정 없이 계속 작동합니다.

채팅에서 진행 상황을 확인할 수 있습니다. 규모가 큰 프로젝트는 한 번에 끝나지 않을 수 있습니다. 이 경우 업그레이드가 일시 중지되고 완료된 작업과 남은 작업을 안내하며, 계속해 달라고 요청하면 이어서 진행합니다. 업그레이드가 끝나면 미리보기에서 앱을 검토하세요.

검토, 게시 또는 되돌리기

업그레이드는 프로젝트를 변경하지만 라이브 사이트는 변경하지 않습니다. 다시 게시하기 전까지 방문자에게는 마지막으로 게시한 버전이 계속 표시되므로, 시간을 충분히 들여 업그레이드된 앱을 먼저 검토하세요.

업그레이드된 앱이 원하는 결과가 아니라면 다른 변경을 취소할 때와 같은 방법으로 프로젝트의 버전 기록에서 되돌릴 수 있습니다. 기록을 열고 업그레이드 시작 전 버전을 찾아 복원하세요. 프로젝트는 이전 스택으로 돌아가며, 업그레이드가 게시된 사이트를 변경하지 않았으므로 라이브 사이트에는 영향이 없습니다.

제한 사항

시작하기 전에 다음 사항을 확인하세요.

• 프로젝트당 한 번에 하나의 업그레이드만 실행됩니다. 업그레이드가 멈춘 것처럼 보이면 되돌린 후 다시 시작할 수 있습니다.
• 방문자가 앱을 Progressive Web App(PWA)으로 기기에 설치했다면 기기에 이전 버전의 사본이 남아 있습니다. 대부분은 재방문할 때 Lovable이 이전 사본을 자동으로 제거하며, 수동 후속 작업이 필요하면 업그레이드 중에 알려줍니다.
• 일부 코드 라이브러리는 브라우저에서만 작동하므로 업그레이드 검사에서 발견되지 않는 방식으로 서버 렌더링을 중단시킬 수 있습니다. 업그레이드 후 페이지를 테스트하고, 불러오지 못하는 페이지가 있으면 Lovable에 알려주세요.

FAQ

문제 해결