AstroSSR

AstroSSR is a simple yet dangerously powerful hack that combines the capabilities of Astro with language-agnostic server-side rendering (SSR) and templating. It enables seamless integration of Astro components into SSR frameworks, allowing you to leverage Astro's modern component syntax and build process in your existing applications.

Features

• Language-Agnostic SSR: Works with any templating framework, such as Blade (PHP), Nunjucks (Nodejs), html/template (Golang), Jinja2 (Python) or others. Feel free to get creative.
• Astro Integration: Use Astro's component-based architecture and build system.
• Dynamic Content Injection: Inject server-side rendered content directly into Astro components.

Installation

1. Install AstroSSR:

   npm install astro-ssr

2. Configure Astro Project:

   Update your astro.config.mjs file to include the AstroSSR integration:

   // astro.config.mjs
   import { defineConfig } from 'astro/config';
   import astroSSR from 'astro-ssr';
   
   export default defineConfig({
     integrations: [astroSSR()],
   });

Usage

Importing AstroSSR

AstroSSR provides two components:

1. Astro Component (AstroSSR.astro): Use this for .astro files.
2. React Component (AstroSSR.jsx): Use this for .jsx or .tsx files.

Astro Component (AstroSSR.astro)

Import and use the AstroSSR component in your .astro files:

---
import AstroSSR from './AstroSSR.astro';
---

<AstroSSR inject={"<?php print('Hello from the server!') ?>"} />

React Component (AstroSSR.jsx)

Import and use the AstroSSR component in your .jsx or .tsx files:

import AstroSSR from './AstroSSR';

function App() {
  return <AstroSSR inject={"<?php print('Hello from the server!') ?>"} />;
}

Build and Deployment

1. Build Astro Project:

   npm run build

2. Deploy Build Output:

Copy the contents of the dist directory to your SSR framework's public directory or appropriate location. See the sample setup for Laravel for more details.

License

MIT