DEV Community

JasonLeap
JasonLeap

Posted on

A (Maybe Better) Alternative to Cloudflare Browser Rendering

What is Cloudflare Browser Rendering

Cloudflare Browser Rendering is a feature provided by Cloudflare that allows users to run Puppeteer directly within Workers.

Puppeteer is a headless browser environment capable of performing almost all browser operations, such as:

  • Taking screenshots of web pages

  • Converting a webpage to PDF

  • Gathering page load performance metrics

  • Crawling web pages for information retrieval

  • And much more

What’s the Alternative to It

We are Leapcell, a serverless platform that offers almost unlimited compute and scaling capabilities, along with flexible invocation methods (sync and async).

Unlike common serverless platforms, Leapcell enables you to deploy an entire Git repository as a serverless service. With this capability, we can literally do anything on Leapcell, like deploying headless browser.

Because of this, we find Leapcell very good at browser rendering jobs, making it a perfect alternative to Cloudflare Browser Rendering.

Let’s Start from a Simple Task

Let’s first see how Cloudflare executes a browser rendering task. Below is an example of a Cloudflare script for taking a webpage screenshot:

import puppeteer from '@cloudflare/puppeteer';

export default {
  async fetch(request, env) {
    const { searchParams } = new URL(request.url);
    let url = searchParams.get('url');
    if (url) {
      url = new URL(url).toString(); // normalize

      const browser = await puppeteer.launch(env.MYBROWSER);
      const page = await browser.newPage();
      await page.goto(url);
      const img = await page.screenshot();
      await browser.close();

      return new Response(img, {
        headers: {
          'content-type': 'image/jpeg',
        },
      });
    } else {
      return new Response('Please add an ?url=https://example.com/ parameter');
    }
  },
};
Enter fullscreen mode Exit fullscreen mode

Now, let’s look at how the same task can be implemented on Leapcell:

const puppeteer = require('puppeteer');
const { Hono } = require('hono');
const { serve } = require('@hono/node-server');

const screenshot = async (url) => {
  const browser = await puppeteer.launch({ args: ['--single-process'] });
  const page = await browser.newPage();
  await page.goto(url);
  const img = await page.screenshot();
  await browser.close();

  return img;
};

const app = new Hono();

app.get('/', async (c) => {
  const url = c.req.query('url');

  if (url) {
    const img = await screenshot(url);
    return c.body(img, { headers: { 'Content-Type': 'image/png' } });
  } else {
    return c.text('Please add an ?url=https://example.com/ parameter');
  }
});

const port = 8080;
serve({ fetch: app.fetch, port }).on('listening', () => {
  console.log(`Server is running on port ${port}`);
});
Enter fullscreen mode Exit fullscreen mode

As shown above, the implementation on Leapcell is slightly longer because you need to set up your own backend server using a framework (like Hono).

This difference stems from the underlying architecture of the two platforms. Cloudflare Workers are based on V8 runtime, while Leapcell hosts your entire project as serverless. This gives Leapcell exceptional flexibility, including:

  • Ease of Local Debugging: The platform uses the same codebase as your local environment.

  • Support for All Kinds of Headless Browser Libraries: You can switch to libraries like Playwright or even a different language, such as Python with Selenium.

Key Differences between Cloudflare and Leapcell

Due to these architectural differences, Leapcell offers some clear distinctions (or should we say “advantages”)—over Cloudflare Browser Rendering:

Browser Library Restrictions

🔥 To adapt to the unique Worker runtime environment, Cloudflare uses a custom Puppeteer fork called @cloudflare/puppeteer.

Unfortunately, this library doesn’t always keep pace with the latest Chrome updates, leading to delays in bug fixes or support for new features (like modern CSS capabilities).

Worse still, the library updates infrequentlyonly three updates in total, with the last update occurring 4 months ago.

⭐️ In contrast, Leapcell imposes no restrictions on browser libraries. You can install and use any Puppeteer version, from the latest release to older versions. You can also switch to Playwright for cross-browser rendering (e.g., Safari, Firefox) or even choose a different programming language like Python with Selenium.

Timeout Limits

🔥 Cloudflare imposes a default timeout of 60 seconds for browser rendering, which can be extended to a maximum of 10 minutes (with manual configuration).

⭐️ Leapcell, however, has no default timeout limit and supports task execution for up to 15 minutes.

Usage Limits

🔥 Cloudflare restricts each account to creating a maximum of 2 browsers per minute, with no more than 2 browsers running concurrently.

⭐️ Leapcell imposes no such limits. Leveraging its serverless architecture, Leapcell can scale headless browser instances to thousands in seconds.

Additionally, Leapcell supports async invocation, enabling you to launch multiple headless browser tasks concurrently without having to wait for the tasks to finish.

Cost Differences

🔥 Cloudflare requires a Worker Pro plan to access its Browser Rendering feature, with a steep price tag:

$0.10 / session means you have to pay $0.1 every time you launch a browser. Although reusing session can save costs, understanding the concepts of “sessions” and “reuse” will cost you a lot of time.

⭐️ Leapcell adopts a straightforward pricing model, billing based on resource usage (memory and execution time). No complex concepts like “sessions” or “concurrent limits” are involved and no subscription is required.

Under the free tier, you can execute approximately 1,500 common headless browser tasks.

We made a table to make it easier to understand the differences between Cloudflare and Leapcell:

Feature 🔥 Cloudflare ⭐️ Leapcell
Library Restrictions Restricted to @cloudflare/puppeteer (might fall behind the official library) Any headless browser library (e.g., Playwright, Puppeteer, Selenium)
Timeout Limits Default: 60 seconds; Max: 10 minutes No default limit; Max: 15 minutes
Usage Limits 2 new browsers per minute; 2 concurrent browsers No limits; Can scale to thousands
Cost $0.10 / session; Requires Worker Pro plan to access Based on memory and duration; Free tier supports ~1,500 tasks

We welcome you to try Leapcell’s headless browser capabilities. You can see how it becomes a fantastic alternative to Cloudflare Browser Rendering.

Leapcell banner

Leapcell also supports deploying a variety of projects. Unleash your imagination and have fun!

Top comments (0)