> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/withastro/astro/llms.txt
> Use this file to discover all available pages before exploring further.
# SSR and SSG
> Understanding Astro's rendering modes - static site generation, server-side rendering, and hybrid approaches
Astro offers flexible rendering modes that let you choose how each page in your project is built and delivered. You can use static site generation (SSG), server-side rendering (SSR), or combine both in a hybrid approach.
## Output Modes
Astro supports three output modes, configured in your `astro.config.mjs` file:
```js astro.config.mjs - Static (Default) theme={null}
import { defineConfig } from 'astro/config';
export default defineConfig({
output: 'static'
});
```
```js astro.config.mjs - Server theme={null}
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
export default defineConfig({
output: 'server',
adapter: node({
mode: 'standalone'
})
});
```
```js astro.config.mjs - Hybrid theme={null}
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
export default defineConfig({
output: 'hybrid',
adapter: node({
mode: 'standalone'
})
});
```
### Static Mode
**Default behavior.** All pages are pre-rendered at build time into static HTML files.
Static mode is ideal for content-heavy sites where pages don't change frequently, providing the best performance and lowest hosting costs.
```astro src/pages/index.astro theme={null}
---
// This page is pre-rendered at build time
const data = await fetch('https://api.example.com/data').then(r => r.json());
---
Static Page
Built at: {new Date().toISOString()}
```
### Server Mode
**All pages rendered on-demand.** Pages are rendered on the server for each request, allowing for dynamic content and server-side logic.
Server mode requires an adapter to deploy to your hosting platform.
```astro src/pages/api/user.astro theme={null}
---
// This page is rendered on every request
const { cookies } = Astro;
const userId = cookies.get('userId');
const user = await db.users.find(userId);
---
Welcome, {user.name}
Rendered at: {new Date().toISOString()}
```
### Hybrid Mode
**Mix static and server rendering.** Pages are pre-rendered by default, but you can opt-in to on-demand rendering for specific pages.
```astro src/pages/product/[id].astro theme={null}
---
export const prerender = false; // Opt-in to server rendering
const { id } = Astro.params;
const product = await db.products.find(id);
---
{product.name}
Real-time stock: {product.stock}
```
## Page-Level Control
You can control rendering per-page using the `prerender` export:
In `output: 'server'` mode, pages are server-rendered by default. Use `export const prerender = true` to pre-render specific pages:
```astro src/pages/about.astro theme={null}
---
export const prerender = true; // Pre-render this page
---
About Us
```
In `output: 'hybrid'` mode, pages are pre-rendered by default. Use `export const prerender = false` for on-demand rendering:
```astro src/pages/dashboard.astro theme={null}
---
export const prerender = false; // Server-render this page
---
Dashboard
```
## Adapters
To use SSR, you need an adapter for your deployment platform. Adapters allow Astro's server output to work with your hosting provider's runtime.
### Official Adapters
Deploy to any Node.js server
Deploy to Vercel's edge network
Deploy to Netlify functions
Deploy to Cloudflare Workers
### Installing an Adapter
```bash theme={null}
npx astro add node
```
The adapter will automatically configure your `astro.config.mjs`:
```js astro.config.mjs theme={null}
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
export default defineConfig({
output: 'server',
adapter: node({
mode: 'standalone'
})
});
```
```bash theme={null}
npm run build
```
Your server-rendered site is ready to deploy!
## Build Process
During the build process, Astro analyzes your routes and determines how each should be rendered based on your configuration:
* All pages are rendered to HTML at build time
* Assets are optimized and bundled
* Output is a directory of static files ready to serve
* Located in `dist/` by default
* Creates a server entry point for on-demand rendering
* Pre-renders pages marked with `prerender: true`
* Bundles server-side code and dependencies
* Outputs both static assets and server chunks
## When to Use Each Mode
**Best for:**
* Blogs and documentation
* Marketing sites
* Content-heavy sites
* Maximum performance
**Best for:**
* User dashboards
* Personalized content
* Real-time data
* Authentication required
**Best for:**
* E-commerce sites
* SaaS applications
* Mixed content types
* Optimal flexibility
## Performance Considerations
For optimal performance, pre-render as much as possible and use server rendering only where dynamic data is truly necessary.
### Static Generation Benefits
* **Fastest possible load times** - No server computation required
* **Easy to cache** - CDN-friendly static files
* **Lower hosting costs** - Simple file hosting
* **Better SEO** - Instant content availability
### Server Rendering Benefits
* **Fresh data** - Always up-to-date content
* **Personalization** - User-specific pages
* **Security** - Hide sensitive logic
* **Dynamic behavior** - Respond to request data
## Related Resources
Learn about deployment adapters
Mix static and dynamic content
Add server-side logic
Handle form submissions