⚡ Astro Plugin v1.0.0-alpha

⚠️

This is an Alpha Release. APIs may change and some features might be unstable.

vite-plugin-astro-prerender

Prerender components to static HTML for lightning-fast lazy loading

Boost your Astro site's performance by prerendering below-the-fold components to static HTML fragments at build time. Tree-shaken Tailwind CSS included.

📦 Get Started ⭐ GitHub (Alpha) 📊 Performance Demo

40% Faster LCP

0 Runtime Deps

100% SSG Compatible

Features

Everything you need for lazy loading

🚀

Prerender at Build Time

Components are compiled to static HTML during the build process.

🎯

Intersection Observer

HTML fragments are fetched only when they enter the viewport.

🎨

Tailwind Tree-shaking

Optional CSS generation extracts only used classes.

⚡

Smart Caching

Built-in file hashing skips unchanged components.

🔧

Two Renderers

Choose between Parser or Container API renderers.

📡

Hot Reload

Changes are watched and automatically reprocessed.

Installation

Get started in minutes

npm install vite-plugin-astro-prerender

pnpm add vite-plugin-astro-prerender

bun add vite-plugin-astro-prerender

1 Add to config

Add the integration to your astro.config.mjs:


import { defineConfig } from 'astro/config';
import { astroPrerenderIntegration } from 'vite-plugin-astro-prerender';

export default defineConfig({
  integrations: [
    astroPrerenderIntegration({
      componentsDir: 'src/components/Lazy',
      outputDir: 'public/prerendered',
      renderer: 'parser'
    })
  ]
});

2 Create Lazy Components

Create your component in src/components/Lazy/MyComponent.astro:

---
// Your component logic
---

  I am lazy loaded!
  This HTML was generated at build time.

3 Client-side Loading

Use the loader to fetch and inject content:

import { createLazyLoader } from "vite-plugin-astro-prerender/client";
import { prerenderedPath } from "virtual:astro-prerender-config";

const loader = createLazyLoader({
  baseUrl: prerenderedPath, // Auto-uses base from astro.config.mjs
});

// Load when element enters viewport
loader.observeAndLoad(
  "MyComponent", 
  "#container-id", 
  { rootMargin: "200px" }
);

Live Demo

See it in action

The sections below are lazy-loaded. Watch the console for debug logs!

Loading testimonials...