#How can I create an SSR site where I can continuously add MDX content?

4 messages · Page 1 of 1 (latest)

toxic lightBOT Mar 25, 2025, 6:29 PM

Hi @placid rampart. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

To create an SSR (Server-Side Rendered) Astro site where you can continuously add MDX content, you'll need to set up both the MDX integration and an SSR adapter. Here's how to do it:

1. Set up MDX in your Astro project

First, install the MDX integration:

npx astro add mdx

This will install the @astrojs/mdx package and update your astro.config.mjs file to include the integration MDX Integration Guide.

2. Add an SSR adapter

For server-side rendering, you'll need to add an adapter based on your deployment platform. Astro supports several options:

Node.js
Netlify
Vercel
Cloudflare

For example, to add the Netlify adapter:

npx astro add netlify

This will install the adapter and configure your astro.config.mjs file with the appropriate settings Deploy to Netlify.

3. Configure your project for SSR

Your astro.config.mjs should now include both the MDX integration and your chosen adapter. It should look something like this:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import netlify from '@astrojs/netlify';

export default defineConfig({
  output: 'server',
  integrations: [mdx()],
  adapter: netlify(),
});

The output: 'server' setting is crucial as it enables server-side rendering On-demand Rendering.

4. Organize your MDX content

You have two main options for organizing your MDX content:

Option A: Using Content Collections

Content collections provide type safety and organization for your MDX files:

// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/blog" }),
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.coerce.date(),
})
});

export const collections = { blog };


This allows you to query and render your MDX content with type safety [MDX in Astro](<https://docs.astro.build/en/guides/integrations-guide/mdx/#using-mdx-with-content-collections>).

### Option B: Using the Pages Directory

You can also place MDX files directly in your `src/pages/` directory, and they'll automatically be converted to routes in your site [Pages Guide](<https://starlight.astro.build/guides/pages/>).

## 5. Accessing MDX Content in Your Components

When importing MDX files, you'll have access to:

- `frontmatter` - Contains any data specified in the file's YAML frontmatter
- `Content` - A component that renders the MDX content
- Any exported values from the MDX file

Example of using MDX in an Astro component:

```astro
---
// src/pages/index.astro
const mdxPosts = await Astro.glob('./posts/*.mdx');
---

{mdxPosts.map(Post => <Post.default />)}

Deployment

Once your site is set up, deploy it to your chosen platform. The adapter you installed will handle the server-side rendering configuration for you.

For example, if you chose Netlify, you can deploy your site by connecting your repository to Netlify and using the following build settings:

Build command: npm run build
Publish directory: dist

The Netlify adapter will automatically configure your site for SSR Deploy to Netlify.

With this setup, you can continuously add new MDX content to your site, and it will be server-rendered on demand.