Does PlanetScale Work With Cloudflare Pages?
PlanetScale and Cloudflare Pages work seamlessly together, with Pages' serverless functions providing the perfect backend layer to query your PlanetScale database.
Quick Facts
How PlanetScale Works With Cloudflare Pages
PlanetScale and Cloudflare Pages integrate naturally because Pages supports serverless functions (via Cloudflare Workers) that can make HTTP requests to PlanetScale's public API endpoint or use the mysql2 driver over TCP. You deploy your frontend to Pages and your API routes as Pages Functions, which execute on Cloudflare's global edge network. These functions can directly query PlanetScale using connection strings, making the latency minimal since Cloudflare's infrastructure is globally distributed. The developer experience is smooth: configure your PlanetScale connection string as an environment variable in Pages, then use standard Node.js MySQL libraries in your Functions. PlanetScale's branching feature pairs well with Pages' preview deployments—you can create database branches for feature branches and test end-to-end before merging to production. The main architectural consideration is that PlanetScale's free tier includes limited connection hours, and you'll want to implement connection pooling to avoid exhausting them with edge function traffic.
Best Use Cases
Quick Setup
npm install @planetscale/database// functions/api/posts.ts - Cloudflare Pages Function
import { Connection } from '@planetscale/database';
export const onRequest: PagesFunction = async (context) => {
const conn = new Connection({
host: context.env.DB_HOST,
username: context.env.DB_USER,
password: context.env.DB_PASSWORD,
database: context.env.DB_NAME,
});
try {
const results = await conn.execute(
'SELECT id, title FROM posts WHERE published = true LIMIT 10'
);
return new Response(JSON.stringify(results.rows), {
headers: { 'Content-Type': 'application/json' },
});
} catch (error) {
return new Response(JSON.stringify({ error: error.message }), {
status: 500,
});
}
};Known Issues & Gotchas
Connection limits on free tier: PlanetScale free tier limits concurrent connections, and edge functions can create many simultaneous connections causing 'Too many connections' errors
Fix: Enable PlanetScale's connection pooling via the planetscale CLI or use a serverless-optimized client like @planetscale/database package that reuses connections efficiently
Cold starts on Functions can add 50-100ms latency on first request, impacting database query response times
Fix: Keep Functions warm with periodic health checks or design UX to tolerate slight delays; PlanetScale query times are typically fast enough to offset this
Environment variables must be set in Cloudflare Pages dashboard for connection strings; they're not automatically synced from PlanetScale
Fix: Manually copy PlanetScale connection string to Pages environment settings, or script it using Cloudflare API during deployment
PlanetScale's public MySQL endpoint requires whitelisting IPs, but Cloudflare edge function IPs are dynamic and numerous
Fix: Use PlanetScale's 'Allow all' IP whitelist setting (0.0.0.0/0) or connect via HTTP proxy API instead of raw MySQL protocol
Alternatives
- •Vercel + PlanetScale: Similar JAMstack setup with more mature serverless functions and built-in analytics
- •Supabase + Netlify: PostgreSQL alternative with built-in auth, paired with Netlify for frontend hosting
- •Firebase + Netlify: NoSQL backend with Firebase, frontend on Netlify for simpler real-time applications
Resources
Related Compatibility Guides
Explore more compatibility guides