MPA-style Development

Add interactive components to server-rendered pages without changing your architecture.

Existing options require trade-offs:

  • jQuery / vanilla JS — No component model. Hard to maintain at scale.
  • SPA framework (Next.js, Nuxt) — Even with server components, you adopt the framework's build pipeline, routing, and deployment model.
  • Islands (Astro, Fresh) — Server rendering with selective hydration, but your server must be Astro or Fresh.

BarefootJS outputs templates for your existing server. The compiler is a build step — your routing and deployment don't change. "use client" marks the components that need interactivity; only those ship JavaScript:

// ProductPage.tsx — server component
import { AddToCart } from './AddToCart'    // "use client"
import { ReviewStars } from './ReviewStars' // "use client"

export function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <img src={product.image} />
      <ReviewStars rating={product.rating} />
      <AddToCart productId={product.id} />
    </div>
  )
}

h1, p, img produce zero JS. Only ReviewStars and AddToCart ship client JavaScript. Server-rendered HTML is visible immediately; interactive components become functional after hydration.