Puppeteer 특징
- 페이지의 스크린 샷과 PDF를 생성
- SPA (Single Page Application)를 크롤링하고 사전 렌더링 된 내용 (즉, “SSR”(Server-Side Rendering))을 생성
- Form 테스트, UI 테스트, 키보드 입력 등 자동화
- 최신 JavaScript 및 브라우저 기능을 사용하여 테스트
- 사이트 의 타임 라인 추적 을 캡처하여 성능 문제를 진단
- Chrome 확장 프로그램을 테스트
- 브라우저 상의 콘솔 로그, Network응답, 실패 등 모니터링 가능
단일 페이지 애플리케이션(SPA) 이해
SPA는 단일 HTML 페이지를 로드하고 사용자가 상호 작용할 때 콘텐츠를 동적으로 업데이트하는 웹 애플리케이션이다.
이는 일반적으로 React, Angular 또는 Vue.js와 같은 JavaScript 프레임워크를 사용하여 달성된다. 기존 웹사이트에서는 페이지를 변경할 때마다 전체 페이지를 다시 로드해야 하지만 SPA에서는 전체 페이지를 다시 로드하지 않고도 콘텐츠가 변경된다.
SPA 크롤링의 과제
SPA 크롤링은 동적 특성으로 인해 특정 문제를 야기한다.
초기 페이지 로드 후 동적으로 생성되기 때문에 기존 웹 스크래핑 도구는 콘텐츠를 캡처하지 못하는 경우가 많다.
- 초기 HTML
- : SPA의 초기 HTML에는 최소한의 콘텐츠와 JavaScript 코드가 포함되는 경우가 많다. 실제 콘텐츠는 API에서 가져와 클라이언트측에서 렌더링된다.
- 클라이언트 측 렌더링
- : SPA는 클라이언트 측에서 콘텐츠를 렌더링한다. 이는 Axios 및 Cheerio,Selenium과 같은 표준 웹 스크래핑 라이브러리가 콘텐츠를 올바르게 캡처하지 못할 수 있음을 의미한다.
SSR을 생성하는 것이 Puppeteer의 장점인 이유
CSR (Client Side Rendering)
말 그대로 SSR과 달리 렌더링이 클라이언트 쪽에서 일어난다.
최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링하는 방식이다.
SEO가 어렵다는 큰 단점이 있다.
위의 사진은 CSR의 단계를 설명한다.
- User가 Website 요청을 보냄.
- CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다. CDN : aws의 cloudflare를 생각하면 됨. 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식
- 클라이언트는 HTML과 JS를 다운로드 받는다. (이때 SSR과 달리 유저는 아무것도 볼 수 없다.)
- 다운이 완료된 JS가 실행된다. 데이터를 위한 API가 호출된다. (이때 유저들은 placeholder를 보게된다. )
- 서버가 API로부터의 요청에 응답한다.
- API로부터 받아온 data를 placeholder 자리에 넣어준다. 이제 페이지는 상호작용이 가능해진다.
즉, 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없고, 아무것도 렌더링 되어있지 않다.
SSR (Server Side Rendering)
말 그대로 서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식이다.
위의 사진은 CSR의 단계를 설명한다.
- User가 Website 요청을 보냄.
- Server는 'Ready to Render'. 즉, 즉시 렌더링 가능한 html파일을 만든다. (리소스 체크, 컴파일 후 완성된 HTML 컨텐츠로 만든다.)
- 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시 렌더링 된다. 그러나 사이트 자체는 조작 불가능하다. (Javascript가 읽히기 전이다.)
- 클라이언트가 자바스크립트를 다운받는다.
- 다운 받아지고 있는 사이에 유저는 컨텐츠는 볼 수 있지만 사이트를 조작 할 수는 없다. 이때의 사용자 조작을 기억하고 있는다.
- 브라우저가 Javascript 프레임워크를 실행한다.
- JS까지 성공적으로 컴파일 되었기 때문에 기억하고 있던 사용자 조작이 실행되고 이제 웹 페이지는 상호작용 가능해진다.
즉. 서버에서 이미 '렌더 가능한' 상태로 클라이언트에 전달되기 때문에,
JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있다.
Puppeteer VS Selenium
| Criteria | Puppeteer | Selenium |
| Compatible Languages | Only JavaScript is officially supported, but there are unofficial PHP and Python ports | Java, Python, C#, Ruby, PHP, JavaScript and Kotlin |
| Browser Support | Chromium and experimental Firefox support | Chrome, Safari, Firefox, Opera, Edge and IE |
| Performance | 60% faster than Selenium | Fast |
| Operating System Support | Windows, Linux and macOS | Windows, Linux, macOS and Solaris |
| Architecture | Event-driven architecture with headless browser instances | JSONWire protocol on the web driver to control the browser instance |
| Prerequisites | JavaScript package is enough | Selenium Bindings (for the picked programming language) and browser web drivers |
| Community | Small community compared to Selenium | Established a collection of documentation along with a huge community |
Puppeteer는 헤드리스 Chrome 또는 Chromium 브라우저와 상호작용할 수 있는 고급 API를 제공하는 Chrome 팀에서 개발한 Node.js 라이브러리이다. 또한 다음과 같은 기능을 제공하므로 SPA 크롤링을 위한 훌륭한 도구이다.
- JavaScript 기반 콘텐츠를 렌더링한다.
- 버튼 클릭, 스크롤 등 사용자와 마찬가지로 페이지와 상호 작용한다.
- 동적 콘텐츠가 로드된 후 추출한다.
- 그러나 Selenium은 web driver를 사용하기 때문에 SSR로 pre-rendering이 불가능하다.
reference
