import ButtonSvelte from "@example-components/svelte/buttonSvelte.svelte";
import ButtonVue from "@example-components/vue/buttonVue.vue";
import ButtonReact from "@example-components/react/buttonReact";
export const draft = false;
export const title = "MDX File in astro as content vs md file";
export const resume = "This is a MDX file";
export const image = {
  src: "md_engine",
  alt: "Markdown content in astro",
};
export const publishDate = "2023-05-08 11:39";
export const category = "architecture";
export const author = "Giorgio Saud";
export const tags = ["micro-frontend", "architecture"];

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
<div>
<ButtonSvelte client:load></ButtonSvelte>
</div>
## Here is React

A Server side rendered component loaded in when client is idle
<div>
<ButtonReact
  client:idle
  title="Increment Count React"
/>
</div>
<div class="h-screen"></div>

## Here is Vue

A server side redered but component loaded reactivity in when is visible
<div>
<ButtonVue client:visible />
</div>
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.

```md
# hola mundo en h1

## hola mundo en h2

este es un parrafo

> Blockquote text
```

```mdx
import Component from "component";

# hola mundo en h1

## hola mundo en h2

este es un parrafo

> Blockquote text

<Component />
```

> This is a MDX file 💌