
I find myself reaching for Next.js everytime I need to prototype an idea or start building a new side project. Next provides structure for building your app and comes prebundled with routing and code spliting. The main feature of Next is Server Side Rendering or SSR allowing your site/app's HTML to be rendered on the server and displayed in your browser. This has its pros and cons but I am not here to discuss the benefits of SSR.

Sometimes there are packages and/or libraries we would want to include in our application that cannot be rendered on the server. With these pieces of code, we need let the browser do the rendering. Next uses ES2020's `dynamic import()` feature to basically split code and disable the SSR.

In this blog, we will try to use [Apex Charts](https://apexcharts.com/), a client side rendered chart library, within a Next.js server side rendered app. Lets get started.

### Creating The app

We will create an app using `create-next-app` which will set everything up for us. We'll name our app `nossr`. In your terminal lets run:

```bash
$ npx create-next-app nossr
```

After its done installing, go into the nossr folder by running `cd nossr` and install the apexcharts and react-apexcharts packages

```bash
$ npm install --save react-apexcharts apexcharts
```

After its all done installing, we can open the folder in our text editor.

In our `/pages/index.js` file we will replace everything with the following:

```js
import Head from 'next/head';

export default function Home() {
  return (
    <div className='container'>
      <Head>
        <title>No SSR Charts</title>
      </Head>

      <main>
        <h1 className='title'>Our Chart</h1>

        <p>The chart goes here</p>
      </main>

      <style jsx>{`
        .container {
          min-height: 100vh;
          padding: 0 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        a {
          color: inherit;
          text-decoration: none;
        }

        .title {
          margin: 0;
          line-height: 1.15;
          font-size: 4rem;
          text-align: center;
        }
      `}</style>

      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family:
            -apple-system,
            BlinkMacSystemFont,
            Segoe UI,
            Roboto,
            Oxygen,
            Ubuntu,
            Cantarell,
            Fira Sans,
            Droid Sans,
            Helvetica Neue,
            sans-serif;
        }

        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}
```

Now run the server using `npm run dev` and open the site in your browser at `https://localhost:3000`.

Your page should look like this:

<MDXImage src='/images/post/nossr1.png' alt='Page without the chart' />

### Chart Component

Now we will create our map component. Lets create a folder called `components` and then create a file in the components folder called `MyChart.js`. Add the following to that file:

```js
import React, { useState } from 'react';
import Chart from 'react-apexcharts';

export default function MyChart() {
  const [options, setOptions] = useState({
    chart: {
      id: 'line-chart'
    },
    xaxis: {
      categories: [
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
        'Sunday'
      ]
    }
  });
  const [series, setSeries] = useState([
    {
      name: 'Hours of Sleep',
      data: [4.4, 3.5, 5.0, 4.2, 6.8, 8.1, 8.3]
    }
  ]);

  return (
    <div className='chart'>
      <Chart options={options} series={series} type='line' />

      <style jsx>{`
        .chart {
          width: 500px;
          margin: auto;
        }
      `}</style>
    </div>
  );
}
```

Lets import the chart component into `/pages/index.js` under the first import like so:

```js
import Head from 'next/head';
import MyChart from '../components/MyChart';
```

and replace

```js
<p>The chart goes here</p>
```

with

```js
<MyChart />
```

After reloading the page, we should run into a `GET http://localhost:3000/ 500 (Internal Server Error)`. We get this error because the `apexcharts` and `react-apexcharts` packages refer to the window object which is only available on the client(browser). What we want to do is to prevent the `react-apexcharts` from being imported on the server with `dynamic import`.

Lets go back to the `MyChart.js` component. We want to replace

```js
import Chart from 'react-apexcharts';
```

with

```js
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
```

Now restart your server and reload the page in the browser. Voila! The page should look like this:

<MDXImage src='/images/post/nossr2.png' alt='Page with the chart' />

### Conclusion

Using Next.js for your project gives you all the benefits of a server side rendered application but also gives you the option to use packages and/or libraries that can only be client side rendered. Learn more about Next.js `Dynamic Import` [here](https://nextjs.org/docs/advanced-features/dynamic-import) and ES2020's `dynamic import()` [here](https://v8.dev/features/dynamic-import).


How to import a package that only works in the browser into Next.js

Importing a Browser Only Package Into Next.js


TailwindCSS is a utility-first framework which generates CSS classes based on a configuration file. It is sort of an alternative to Bootstrap or MaterialUI.

<br />

I have a couple of websites built using TailwindCSS. One of them is my <a href='https://ahmedfaaid.com' target='_blank'>personal portfolio website</a> and the other is a <a href='https://sneakersseur.netlify.app' target='_blank'>sneaker news website</a>.

<br />

The problem with TailwindCSS is when you build your project in production, all the generated classes(even the unused ones) are also bundled with the project. This can inflate your bundle sizes and affect the load times for your website especially when your website is client side rendered. This could have many different implications including increased bounce rate and reduced performance.

<br />

I decided to do a little bit of research about the file sizes for the TailwindCSS generated styles. Take a look at these 2 images:

<br />

<MDXImage
  src='/images/post/portfolio-unpurged.png'
  alt='Unpurged portfolio styles'
/>

<br />

<MDXImage
  src='/images/post/sneak-unpurged.png'
  alt='Unpurged sneaker website styles'
/>

<br />

These are the style files that are generated at build time. I want you to notice a few things here. So much code(yes it is minified) and **LOOK AT THE FILE SIZES**. 1.7MB and 1MB respectively. That is a lot for a browser to download and render along with the bundled JavaScript.

<br />

## Purging CSS

TailwindCSS gives you the option to purge the unused CSS that is generated so that it is not added to the final build. In my personal portfolio, I use <a href='https://purgecss.com' target='_blank'>purgecss</a> to remove the unused styles and classes. Here is my config file.

<br />

```js
/* postcss.config.js */

const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    require('tailwindcss')('tailwind.config.js'),
    require('autoprefixer')(),
    process.env.NODE_ENV === 'production' &&
      require('@fullhuman/postcss-purgecss')({
        content: ['./src/**/*.js', './public/**/*.html'],
        defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
      })
  ]
};
```

<br />

Here, I add purgecss to the postcss configuration _but_, it is only active in the production enviroment. I want access to all generated styles in my development environment.

<br />

In the sneaker news website, I use <a href='https://www.gatsbyjs.com/plugins/gatsby-plugin-purgecss/' target='_blank'>gatsby-plugin-purgecss</a>. Here is my config:

<br />

```js
/* gatsby-config.js */

module.exports = {
  plugins: [
    `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-plugin-purgecss`,
      options: {
        tailwind: true,
        ignore: ['react-responsive-carousel'],
        develop: false
      }
    }
  ]
};
```

<br />

Here, I pass tailwind as an option to let the plugin know what I built the website with. I also ignore `react-responsive-carousel` which is a package that gives me an easy carousel component. I do not want any of the styles associated with this package to be purged.

<br />

## After The Purge

Look at these images after purging the css:

<br />

<MDXImage
  src='/images/post/portfolio-purged.png'
  alt='Purged portfolio styles'
/>

<br />

<MDXImage
  src='/images/post/sneak-purged.png'
  alt='Purged sneaker website styles'
/>

<br />

Take a look at how much code has been removed and **LOOK AT THE FILE SIZES**. 7.25KB and 12.69KB respectively. That is a significant reduction and an easier download for the browser.

## Conclusion

To sum up, TailwindCSS is a very valuable tool for building your projects fast but you shouldn't ship everything that it generates. You should only include the CSS that is actually used by your project. Using the solutions above are some of the ways to remove all the unused CSS that TailwindCSS generates.

<br />

These solutions however aren't specific to TailwindCSS and can be used to remove any classes or styles that aren't active when the website is built.

<br />

Hopefully you find this helpful and applicable to your projects.


How to purge unused CSS when using TailwindCSS to reduce bundle size

I'm Ahmed Faaid

Latest Posts

Importing a Browser Only Package Into Next.js

Reduce Your CSS Bundle Size When Using TailwindCSS