
## The Problem

This site was made using [Next.js](https://nextjs.org). These blogposts are written using <abbr>[MDX](https://mdxjs.com)</abbr>, and they are rendered with [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote).
When building the site, Next.js renders the blogposts as <abbr>HTML</abbr> using server-side rendering. Upon visiting a page, the static <abbr>HTML</abbr> is initially served to the client, after which the page is hydrated, allowing for interactive React components otherwise not possible with static <abbr>HTML</abbr>.

This build-time rendering has advantages, such as fast initial load time (before hydration), improved <abbr>SEO</abbr>, and making the content accessible even if JavaScript is disabled.
The disadvantage of this approach is that the content of the blogpost is effectively included twice in the page: once as static <abbr>HTML</abbr> in the page source, and the second time as compiled <abbr>MDX</abbr> (<abbr>JSX</abbr>), embedded in the `__NEXT_DATA__` object at the bottom of the page, which is used when hydrating the page.

For example, the `__NEXT_DATA__` object in [this blogpost](/blog/building-chess-scanner) is 1.16 MB, the majority of it being the compiled <abbr>MDX</abbr> source.
Going through the compiled <abbr>MDX</abbr> source, I noticed that some parts of it contained a lot of whitespace, which seemed unnecessary (see image below). Reducing the size of the compiled <abbr>MDX</abbr> source should result in a smaller `__NEXT_DATA__` object, and thus a smaller page size, making it faster to load.

![Compiled MDX source embedded in the page.](/images/next_data.png)

## The solution

The solution was to minify the compiled <abbr>MDX</abbr> source in `getStaticProps`, before passing it to the page.
Here's the `getStaticProps` function I was using with my blog posts:

```javascript
export const getStaticProps = async ({ params }) => {
  const postFilePath = path.join(NOTES_PATH, `${params.slug}.mdx`);
  const source = fs.readFileSync(postFilePath);

  const { content, data } = matter(source);
  const mdxSource = await compileMDX(content, data);

  return {
    props: {
      source: mdxSource,
    },
  };
};
```

I used [terser](https://www.npmjs.com/package/terser) to minify the compiled <abbr>MDX</abbr> source. The updated code looks like this:

```javascript {1, 12-19}
import { minify } from "terser";

// ...

export const getStaticProps = async ({ params }) => {
  const postFilePath = path.join(NOTES_PATH, `${params.slug}.mdx`);
  const source = fs.readFileSync(postFilePath);

  const { content, data } = matter(source);
  const mdxSource = await compileMDX(content, data);

  mdxSource.compiledSource = (
    await minify(mdxSource.compiledSource, {
      parse: {
        bare_returns: true,
      },
      toplevel: true,
    })
  ).code;

  return {
    props: {
      source: mdxSource,
    },
  };
};
```

With this, the size of the `__NEXT_DATA__` object of the same blogpost is now 515 kB, which is less than half of the original size. Looking at the compiled <abbr>MDX</abbr> source, the whitespace is now effectively gone (see image below).

![Compiled MDX source after minification.](/images/minified_next_data.png)

After building the site with, I checked the size of the static <abbr>HTML</abbr> file of the blogpost. The results are shown in the table below.

<div class="font-sans">

|                        | Original MDX | Minified MDX | Size reduction |
| ---------------------- | -----------: | -----------: | -------------: |
| `__NEXT_DATA__` object |      1.16 MB |       515 kB |          55.6% |
| Static HTML            |    809.41 kB |    460.62 kB |          43.1% |

</div>

## Wrapping Up

In conclusion, minifying the compiled <abbr>MDX</abbr> source is a simple yet effective way to cut down on page size, and make your site faster to load.


How I reduced page sizes of my blogposts by almost a half.

Reducing the size of MDX data in Next.js


## Intro

I've been building this blog from the ground up, and with the intent of eventually open sourcing it as a template. This post is a test post/playground where I test and showcase the different features of the blog.

#### A quick word about the stack

This blog is built with [Next.js](https://nextjs.org/). Styling is done with [Tailwind CSS](https://tailwindcss.com/). The blog posts are written in [MDX](https://mdxjs.com/), a flavour of Markdown that allows you to embed React components.

#### A quick word about the design

I attempted to prioritize beautiful typesetting. There are three typefaces used on this blog: <span className="font-sans">[IBM Plex Sans](https://www.ibm.com/plex/)</span> for UI elements and headers, [Literata](https://fonts.google.com/specimen/Literata) for body text (I prefer serif fonts for long form reading), and <a style={{fontFamily: "Twilio Sans Mono"}} href="https://www.twilio.com/blog/power-up-your-code-with-twilio-sans">Twilio Sans Mono</a> for code blocks.

## Post Features

Post settings are set in the frontmatter of the post. Here's the frontmatter for this post:

```yaml
---
title: "Blog Features"
description: "This is a test post to showcase the different components of this blog."
date: "2022-08-01T12:24:13.637Z"
topics: ["Meta"]
hero: "/images/david.jpg"
published: true
toc: true
type: "post"
---
```

### Table of Contents

To display the table of contents on the left side of the page, add `toc: true` to the frontmatter of your post. Note, that the table of contents only displays `h2` and `h3` headers, i.e. `##` and `###`. `h1` reserved for the title of the post.

### Hero image

To display a hero image at the top of the page, add `hero: "/path/to/image"` to the frontmatter of your post.

### Draft posts

If you do not wish to publish a post yet, add `published: false` to the frontmatter of your post.

## General Features

### Code view

The code blocks are rendered using a slightly modified [rehype-pretty-code](https://rehype-pretty-code.netlify.app/) plugin.

{/* prettier-ignore */}
````jsx
```javascript title="Add two numbers" {2}
const add(a, b) => {
  return a + b;
}
```
````

#### Output

```javascript title="Add two numbers" {2}
const add(a, b) => {
  return a + b;
}
```

### Mathematical equations

Mathematical equations are rendered using [$\KaTeX$](https://katex.org/). Use `$` for inline equations and `$$` for display equations.

```markdown
If $x^2 + y^2 = 1$, then $y = \sqrt{1 - x^2}$.

In other words,

$$
\begin{align*}
x^2 + y^2 &= 1 \\
y &= \sqrt{1 - x^2}
\end{align*}
$$
```

#### Output

If $x^2 + y^2 = 1$, then $y = \sqrt{1 - x^2}$.

In other words,

$$
\begin{align*}
x^2 + y^2 &= 1 \\
y &= \sqrt{1 - x^2}
\end{align*}
$$

### Images

Place images in `/public/images`. You can include them in your post like this:

```markdown
![This will be the image caption](/images/spirited_away.jpg)
```

#### Output

![This will be the image caption](/images/spirited_away.jpg)

<Alert type="normal" title="Zoom zoom">
  All images wider than 780 pixels are wrapped around a
  [react-medium-image-zoom](https://github.com/rpearce/react-medium-image-zoom)
  component for a nice zoom effect. Try clicking on the image.
</Alert>

### Footnotes

You can use footnotes as follows:

```markdown
According to this study[^1], the...

[^1]: Smith, John. "The Effects of Artificial Intelligence on Society." Journal of Futuristic Technology 14.2 (2022): 45-61. Print.
```

#### Output

According to this study[^1], the...

[^1]: Smith, John. "The Effects of Artificial Intelligence on Society." Journal of Futuristic Technology 14.2 (2022): 45-61. Print.

<Alert type="normal" title="On Footnotes">
  Note, that the footnotes are rendered at the [bottom of the
  page](#references). If you are using this style of footnotes, place a `##
  References` or a similar header at very last line of your post, to create a
  header for the footnotes. Note, that there is also an option for [Tufte-style
  sidenotes](#sidenotes) (see below), which provide the same functionality. Try
  to decide which one you prefer, as using both will probably confuse your
  reader.
</Alert>

## MDX Components

### Alert boxes

#### Exclamation

```jsx title="Code"
<Alert type="exclamation" title="Info">
  Please make sure you have backups before attempting this procedure.
</Alert>
```

#### Output

<Alert type="exclamation" title="Info">
  Please make sure you have backups before attempting this procedure.
</Alert>

#### Warning

```jsx title="Code"
<Alert type="warning" title="Read carefully">
  Watch out for any errors or typos.
</Alert>
```

#### Output

<Alert type="warning" title="Read carefully">
  Watch out for any errors or typos.
</Alert>

#### Info

```jsx title="Code"
<Alert type="info" title="Read carefully">
  Watch out for any errors or typos.
</Alert>
```

#### Output

<Alert type="info" title="Read carefully">
  Watch out for any errors or typos.
</Alert>

#### Info (no color)

```jsx title="Code"
<Alert type="normal" title="Read carefully">
  Watch out for any errors or typos.
</Alert>
```

#### Output

<Alert type="normal" title="Read carefully">
  Watch out for any errors or typos.
</Alert>

### Collapsible section

```jsx title="Code"
<Collapsible title="Quadratic equation" open={true}>
A quadratic equation is an equation that can be written as $ax^2 + bx + c = 0$, where $a \neq 0$.

The general formula used to solve the roots of a quadratic equation is

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}.
$$
</Collapsible>
```

#### Output

<Collapsible title="Quadratic equation" open={true}>
A quadratic equation is an equation that can be written as $ax^2 + bx + c = 0$, where $a \neq 0$.

The general formula used to solve the roots of a quadratic equation is

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}.
$$

</Collapsible>

### Links

You can use styled link components to display links.

```jsx
<Linked href="https://example.com">Visit example.com</Linked>
<Download href="https://example.com">Download example files (.zip)</Download>
```

#### Output

<Linked href="https://example.com">Visit example.com</Linked>
<Download href="https://example.com">Download example files (.zip)</Download>

### Bordered area

You can create a bordered area for styled text.

{/* prettier-ignore */}
```jsx
<BorderedArea>
###### **synchronicity | ˌsiNGkrəˈnisədē |**
<span className="font-sans">noun</span>
1. the simultaneous occurrence of events which appear significantly related but have no discernible causal connection: such synchronicity is quite staggering.
2. another term for synchrony (sense 1).
</BorderedArea>
```

#### Output

{/* prettier-ignore */}
<BorderedArea>
###### **synchronicity | ˌsiNGkrəˈnisədē |**
<span className="font-sans">noun</span>
1. the simultaneous occurrence of events which appear significantly related but have no discernible causal connection: such synchronicity is quite staggering.
2. another term for synchrony (sense 1).
</BorderedArea>

### YouTube

You can embed YouTube videos using the YouTube component. `id` is the ID of the video, i.e. the part after `v=` in the URL. `title` is the title of the video, which is used as the `title` attribute of the iframe.

```jsx
<YouTube title="Wintergatan – Marble Machine" id="IvUU8joBb1Q" />
```

#### Output

<YouTube title="Wintergatan – Marble Machine" id="IvUU8joBb1Q" />

### Tweets

You can create hardcoded Tweets. Although it takes a bit of effort to create one, the benefit is that it's served as static <abbr>HTML</abbr>, i.e. no Twitter trackers are loaded, and it stays up even if the original Tweet is deleted. Idea from [Josh Comeau](https://www.joshwcomeau.com/blog/how-i-built-my-blog/).

#### Code

{/* prettier-ignore */}
```jsx
<Tweet
  user="Macaulay Culkin"
  username="@IncredibleCulk"
  verified="true"
  avatarurl="https://pbs.twimg.com/profile_images/968572702788239360/KL-zulbA_400x400.jpg"
  date="2020-08-27T12:13:00.000Z"
  comments="55,351"
  retweets="403,524"
  likes="2M"
  userurl="https://twitter.com/IncredibleCulk"
  tweetUrl="https://twitter.com/IncredibleCulk/status/1298730289737293824"
>
  Hey guys, wanna feel old?
  
  I'm 40.
  
  You're welcome.
</Tweet>
```

#### Output

{/* prettier-ignore */}
<Tweet
  user="Macaulay Culkin"
  username="@IncredibleCulk"
  verified="true"
  avatarurl="https://pbs.twimg.com/profile_images/968572702788239360/KL-zulbA_400x400.jpg"
  date="2020-08-27T12:13:00.000Z"
  comments="55,351"
  retweets="403,524"
  likes="2M"
  userurl="https://twitter.com/IncredibleCulk"
  tweetUrl="https://twitter.com/IncredibleCulk/status/1298730289737293824"
>
  Hey guys, wanna feel old?
  
  I'm 40.
  
  You're welcome.
</Tweet>

### Sidenotes

Tufte-style sidenotes. On desktop, they will be shown on the right, on smaller screens they are displayed within the text.

#### Code

{/* prettier-ignore */}
```html
Laboris anim commodo duis duis officia<Sidenote>This is a sidenote.
On desktop, it will be shown on the right, on mobile it is displayed
within the text.</Sidenote> anim excepteur sit exercitation
consectetur velit et laboris nostrud magna.
```

#### Output

Laboris anim commodo duis duis officia<Sidenote>This is a sidenote. On desktop, it will be shown on the right, on smaller screens it is displayed within the text.</Sidenote> anim excepteur sit exercitation consectetur velit et laboris nostrud magna.

## References


This is a post to test and showcase the different components of this blog.