MDX File in astro as content vs md file

By Jorge Saud · July 1, 2024

As I can show you in astro we can have at least 2 ways of make content .md files and .mdx files. The difference between them is that .mdx files can have JSX code and .md files can’t.

Like this example in Astro, we can use components from different frameworks in the same page, using Dynamic Island Feature, here is an example:

Here is Svelte

A Server side rendered component loaded in client side

Here is React

A Server side rendered component loaded in when client is idle

Here is Vue

A server side redered but component loaded reactivity in when is visible

In a md file we cant do this because is more for static content and we can’t use JSX code in it.

Even when .md is a great tool because is like create html without complexity mdx is great because mix all in one file only separating a paragraph with a JSX component.

Allowing to import components and everithing that you need even using all the md power.

# hola mundo en h1

## hola mundo en h2

este es un parrafo

> Blockquote text

import Component from "component";

# hola mundo en h1

## hola mundo en h2

este es un parrafo

> Blockquote text

<Component />

This is a MDX file 💌