Rebuilding pagesmith.ai on Astro: Aligning Our Stack with Our Product
When we founded Pagesmith, our marketing site was built on Next.js. This was a pragmatic choice at the time—our core application leverages the Next.js framework, allowing us to move quickly with a unified technology stack.
However, a strategic disconnect persisted. We consistently advocate for Astro as the optimal solution for marketing sites and content-rich applications. Every site generated by Pagesmith utilizes Astro’s performance-focused architecture. Yet, our own digital presence relied on a different foundation.
Today, we mark a significant milestone: pagesmith.ai now runs exclusively on Astro.
The Strategic Shift
The decision to migrate was driven by a commitment to product integrity: we must practice what we preach.
The architectural arguments we present for choosing Astro over React-heavy frameworks are equally applicable to our own landing pages:
- Marketing pages generally do not require complex client-side state management.
- Blog content does not benefit from heavy hydration processes.
- Documentation should not rely on a JavaScript runtime for basic rendering.
If we are building a platform that generates high-performance Astro sites, our own website must serve as the primary proof of concept.
Technical Transformation
Previous Architecture: Next.js
Our legacy setup utilized the Next.js App Router. while capable of server-side rendering, the framework inevitably ships a React runtime to the client to support potential hydration.
<!-- Illustrative Next.js Client Payload -->
<script src="/_next/static/chunks/framework.js"></script>
<script src="/_next/static/chunks/main.js"></script>
<script src="/_next/static/chunks/pages/_app.js"></script>This architecture meant that every page included overhead for hydration, regardless of whether that page contained interactive elements.
New Architecture: Astro
Our new “Zero-JS by default” approach ensures that we ship only what is necessary: static HTML and optimized CSS.
<!-- Astro Client Payload -->
<!-- No JavaScript bundles are loaded by default. -->For interactive components—such as our pricing calculators or demo forms—we leverage Astro’s Island Architecture. This allows us to hydrate specific components in isolation without burdening the rest of the page with unnecessary JavaScript.
Performance Impact
The migration has delivered excellent Core Web Vitals scores:
| Metric | Value |
|---|---|
| First Contentful Paint | 1.0s |
| Largest Contentful Paint | 1.5s |
| Total Blocking Time | 10ms |
| Cumulative Layout Shift | 0 |
| Speed Index | 1.0s |
10ms blocking time. Zero layout shift. That’s what happens when you don’t ship unnecessary JavaScript.
The principle is simple: The fastest JavaScript is the JavaScript you do not ship.
Architectural Distinctions & Dynamic Capabilities
It is important to note that the Pagesmith application (the editor and dashboard) remains on Next.js. This is a deliberate architectural decision. Next.js is designed primarily for complex, long-running state management and deep app-like interactivity—fitting for a SaaS dashboard.
However, a common misconception is that Astro is only for static sites. This is false.
Astro processes dynamic content on the server just as effectively, but without the client-side weight.
For example, our new pricing page is fully dynamic. It utilizes Astro SSR (Server-Side Rendering) to detect the user’s geolocation at the edge and automatically display pricing in the appropriate local currency. This happens instantly on the server, delivering a personalized HTML page to the user without needing a heavy JavaScript framework to “decide” what to show after the page loads.
We use Astro for:
- Smart, Edge-Dynamic Pages: Like our geo-aware pricing.
- Performance-Critical Marketing: Landing pages that score 100/100.
- Content-Rich Sections: Blogs and documentation.
Marketing sites and modern web content need to be dynamic, but they don’t need to be Single Page Applications (SPAs). They prioritize speed, search engine visibility, and instant content delivery.
Use the right tool for the job: Next.js for the heavy dashboard state, Astro for everything else.
The Value of “Dogfooding”
Using our own product internally exposes us to the realities of the user experience. Friction points that might be overlooked during development become immediately apparent when we rely on the tool for our own business operations.
Running our marketing site on Astro aligns our internal workflow with that of our users:
- We author content using standard MDX.
- We utilize the same component patterns generated by our AI.
- We encounter the same edge cases and constraints.
- We directly experience any friction points.
This alignment ensures that the code you export from Pagesmith is production-grade—because we trust our own business presence to it.
