현대 웹사이트의 70% 이상이 콘텐츠를 렌더링하기 위해 JavaScript에 의존합니다. 표준 HTTP request는 초기 HTML 쉘만 볼 수 있습니다. 실제 데이터는 JavaScript가 실행된 후에 로드되므로, 기존의 스크래핑 도구들은 빈 페이지를 반환하게 됩니다.
FourA의 Browser Tasks는 모든 request에 대해 실제 headless Chrome 인스턴스를 실행하여 이 문제를 해결합니다.
작동 방식
type: "browser"로 태스크를 전송하면, FourA는 다음을 수행합니다:
- headless Chrome 브라우저를 실행합니다.
- 대상 URL로 이동합니다.
- JavaScript가 실행되고 DOM이 안정화될 때까지 대기합니다.
- 선택적으로 특정 CSS selector가 나타날 때까지 대기합니다.
- 완전히 렌더링된 HTML을 반환합니다.
전체 프로세스는 FourA의 인프라에서 진행됩니다. 브라우저를 설치하거나, Puppeteer를 설정하거나, Chrome 업데이트를 관리할 필요 없이 깨끗한 HTML을 반환받을 수 있습니다.
Browser Tasks를 사용해야 하는 경우
다음과 같은 경우 Browser Tasks를 사용하세요:
- 싱글 페이지 애플리케이션(React, Vue, Angular)
- 지연 로드되는 콘텐츠가 있는 페이지(무한 스크롤, "더 보기" 버튼 등)
- cookie 동의 또는 초기 JS 설정이 필요한 사이트
- 클라이언트 사이드 인증 흐름 뒤에 있는 콘텐츠
다음과 같은 경우 single 태스크를 유지하세요:
- 서버 사이드 렌더링된 HTML 페이지(뉴스 사이트, 블로그, 위키 등)
- JSON을 직접 반환하는 REST API
- 속도가 최우선인 경우(Browser Tasks는 2~10초가 소요되는 반면,
single태스크는 1초 미만 소요)
예시: React 앱 스크래핑
curl -X POST https://eu.api.foura.ai/api/v1/tasks \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"url": "https://example.com/dashboard",
"type": "browser",
"options": {
"waitFor": ".dashboard-content",
"timeout": 15000
}
}'
waitFor selector는 페이지를 캡처하기 전에 DOM에 .dashboard-content가 나타날 때까지 대기하도록 FourA에 지시합니다. 이를 통해 모든 비동기 데이터가 로드되었음을 보장할 수 있습니다.
성능 팁
- 타임아웃에 의존하는 대신 항상 특정 selector와 함께
waitFor를 사용하세요. 이 방식이 더 빠르고 안정적입니다. - 적절한 타임아웃을 설정하세요. 15초면 대부분의 SPA를 처리할 수 있습니다. 백엔드가 정말 느린 경우에만 이 값을 늘리세요.
single을 기본값으로 사용하고, response에서 콘텐츠가 누락된 경우에만browser로 전환하세요.
향후 계획
저희는 스크린샷 캡처, PDF 생성, 다단계 탐색(클릭, 스크롤, 폼 작성 등)을 포함한 추가적인 브라우저 기능을 개발하고 있습니다. 하지만 이러한 추가 기능이 없더라도, Browser Tasks는 이미 가장 흔한 페인 포인트인 '빈 껍데기 대신 JavaScript로 렌더링된 페이지에서 실제 콘텐츠 가져오기'를 해결하고 있습니다.
전체 태스크 유형 비교는 문서를 확인하세요.