Server-side render full stack applications with Pages Functions

Pages Functions reaches general availability

Cloudflare has announced the general availability of Pages Functions, its serverless compute layer for Pages projects. Built on the Workers runtime, Pages Functions now runs within 50ms of 95% of global users, leveraging Cloudflare's network of more than 275 data centers.

This milestone unlocks a practical path for deploying server-side rendered full-stack applications on Pages. Major meta-frameworks including Astro, Next.js, Qwik, Remix, Solid, and Svelte are supported, making Pages a viable option for teams that need dynamic rendering without managing infrastructure.

Why server-side rendering matters

When Pages launched in December 2020, its focus was delivering static assets at high performance. That model fit Jamstack-era sites well: files were pre-generated, globally cached, and served quickly. However, static sites that rely on client-side rendering for interactivity have a weakness. Browsers must make multiple network requests to fetch code and data before users can interact, which inflates time-to-interactive (TTI) and hurts both UX and SEO on slow connections.

Moving data fetching to server-side rendering avoids that cascade of client requests. Instead of the user's device negotiating each request over an unreliable link, the server renders the HTML with data already in place, making requests over Cloudflare's network with high-bandwidth connectivity and nearby caching. Users get both dynamic content and a fast first interaction.

A further benefit is runtime symmetry. Both the browser and the Pages Function run similar JavaScript runtimes, so you can share logic between client and server, or use frameworks that start execution on the server and continue it on the client.

Framework integrations

Hand-writing an SSR layer is rarely worthwhile. Most frontend frameworks ship integrations that handle the work, and Pages Functions conveniently slots into that workflow. Cloudflare has previously covered SvelteKit, Remix, and Next.js in detail. The framework guides also document the following options.

QwikCity

QwikCity is the full-stack companion to the Qwik framework. To create a project:

npm create qwik@latest

Choose a name — qwik-app — and the "Basic App (QwikCity)" starter. Then install the Cloudflare Pages adapter:

cd qwik-app
npm run qwik add cloudflare-pages

The adapter adds a functions/[[path]].ts catch-all route that renders responses in Pages Functions. Build and test locally with:

npm run build
npx wrangler pages dev ./dist

Press b in the dev session to open the server-side rendered site in your browser.

Astro

Astro, which supports multiple frontend frameworks, received server-side rendering support earlier this year. Create a project with:

npm create astro@latest

Accept the defaults for project path and template. Then install the Cloudflare adapter:

cd <path/to/project>
npx astro add cloudflare

Confirm the install when prompted. The adapter updates astro.config; set the Cloudflare plugin to directory mode:

export default defineConfig({
  adapter: cloudflare({ mode: "directory" }),
});

In directory mode, Astro compiles its server code to a Pages Function at functions/[[path]].js. Verify with:

npm run build
npx wrangler pages dev ./dist

Full configuration details are available in Astro's Cloudflare integration documentation.

SolidStart

SolidStart, the full-stack layer on SolidJS, is supported via the solid-start-cloudflare-pages Vite adapter:

mkdir my-app
cd my-app
npm init solid

Select the "todomvc" template, and enable both server-side rendering and TypeScript. Then install the adapter:

npm install --save-dev solid-start-cloudflare-pages

Update vite.config.ts to use it:

import solid from "solid-start/vite";
import { defineConfig } from "vite";
import cloudflare from "solid-start-cloudflare-pages";

export default defineConfig({
  plugins: [solid({ adapter: cloudflare({}) })],
});

The adapter compiles server code to functions/[[path]].js and client code to dist/public. Test the build with:

npm run build
npx wrangler pages dev ./dist/public

The dev server starts once compiled; press b to inspect the rendered site.

Nuxt.js

Nuxt.js, the Vue-based full-stack framework, targets Pages natively through a Nitro preset. Scaffold a project with:

npx nuxi init nuxt-app
cd nuxt-app
npm install

Set the appropriate environment variable so Nuxt generates output for Pages Functions. Build and run locally:

NITRO_PRESET=cloudflare-pages npx nuxi build
npx wrangler pages dev .output/public

Once compiled, press b in the Wrangler session to view the server-rendered result.

Deployment ready

With Pages Functions generally available and integrations in place across the major frameworks, you can add dynamic rendering without standing up or managing your own servers. Pages handles the edge distribution, and the tooling handles the SSR boilerplate.

Cloudflare's Pages documentation includes getting-started guides for each framework. Framework authors interested in building their own Pages Functions integration can also reach out directly to Cloudflare's developer team.