Mosaik

⚡ How Mosaik Handles Static Site Generation (SSG) and Server-Side Rendering (SSR)

Modern web experiences demand the best of both worlds: the performance and SEO of pre-rendered pages plus the flexibility of dynamic, real-time content.

Mosaik is designed from day one to thrive in this hybrid model.

🗂️ The Core Idea

With Mosaik, your site’s structure and UI are built from slots, themes, and data providers — this means your content shape and your rendering logic are decoupled.

When you connect a headless CMS like Strapi, Contentful, or Sanity:

You define data providers that fetch structured data at build time or on demand.
Your DataView or custom components render the data in a fully composable way.
Your slots/theme system controls how that data looks — not when it loads.

This makes Mosaik perfect for SSG + SSR in frameworks like Next.js, running on modern hosting platforms like Vercel.

🧱 Static Site Generation (SSG)

When you run a production build, Mosaik:

Connects to your CMS at build time.
- Using your DataProvider, you fetch all required data (e.g., blog posts, product pages, landing content).
Generates static HTML and JSON payloads for each route.
- The slots and themes resolve on the server, so your pages are complete HTML — no flashes of unstyled content.
Deploys the static output to a global CDN edge.
- Vercel’s edge network automatically caches your HTML + static assets in its nearest location to your users.

👉 This means visitors get instant first loads, fully pre-rendered pages, and great SEO — all straight from Vercel’s edge.

🔄 Server-Side Rendering (SSR)

For pages that can’t be purely static — say you have user-specific dashboards, rapidly changing data, or per-request personalization — Mosaik works with SSR out of the box.

In a Next.js app:

Your app/page.tsx or route.tsx can still use async server components to run data fetching on each request.
You can pass your server-fetched data to the same DataProvider context that your slots and themes consume.
Mosaik’s slots + themes still run server-side, so the final HTML is always complete.

Vercel’s edge functions can handle this at Edge Runtime — meaning your SSR logic runs close to your users, not in a centralized server region.

⚙️ Incremental Static Regeneration (ISR)

For the best of both:

You can statically generate most pages at build time.
Use ISR to revalidate stale pages in the background — e.g., rebuild your /blog page when an editor publishes a new article.
With Vercel’s revalidate option, you get static speed and up-to-date content — without rebuilding your whole site.

Mosaik’s data providers are designed to handle this pattern naturally:

They run on the server at build time for SSG.
They run on-demand for SSR or ISR, with zero config changes.

🌍 Edge-First Delivery

By pairing Mosaik with Vercel’s CDN, your visitors always hit the nearest edge location:

Static HTML for your /blog/my-post page comes straight from cache.
If you use ISR, the edge node transparently rebuilds pages in the background.
If you SSR user-specific pages, Vercel’s Edge Functions run your server logic at the edge, not back in a single region.

This minimizes TTFB (Time to First Byte) and maximizes Core Web Vitals — so your site feels instant everywhere.

🔑 Key Benefits

SEO-friendly — pages are fully rendered server-side or at build time.
Ultra fast — static output lives on Vercel’s CDN edge.
Dynamic when needed — SSR and ISR let you blend real-time content with static speed.
Consistent dev pattern — your slots, themes, and data work the same for SSG, SSR, or client hydration.

🚀 One Framework, Flexible Delivery

With Mosaik, you can:

Serve static marketing pages that load in ~50ms from the edge.
Use server slots to customize UI for logged-in users.
Hydrate client-side interactivity only where you need it.
Blend it all using React Server Components + Edge Functions for true modern DX.

Build once. Deliver instantly. Adapt freely.
That’s the Mosaik way.