Next JS - replace React with Preact

Kasper Aamodt — Wed, 06 Apr 2022 10:53:59 +0000

I made my website with Next JS, an excellent react framework for making production-ready websites. The downside to React frameworks is that they can ship a lot of js to the browser, which comes at a performance cost. Luckily, you can take some steps to optimize this, and replacing React with Preact is one of them.

Now I do not want to take any credit for this tip. I saw it in a video from Vercel's Director of Developer Relations, Lee Robinson. Switching it out is easy as long as you are not using any of these features. So without further ado, here is what you need to do:

Install Preact:

npm i preact

Add this snippet to your next.config.js file:

module.exports = { webpack: (config, { dev, isServer }) => { // Replace React with Preact only in client production build if (!dev && !isServer) { Object.assign(config.resolve.alias, { react: 'preact/compat', 'react-dom/test-utils': 'preact/test-utils', 'react-dom': 'preact/compat', }); } return config; }, };

And that's it. Now Preact will be used in production builds instead of React. This website now uses Preact. Before the switch, 91.8 kb of js was loaded in the browser without caching. After the switch, 55.5 kb of js was loaded when testing the same site.

NB! This implementation doesn’t currently work with React 18

Originally posted on aamodt.xyz

Next JS – optimize blog posts

Kasper Aamodt — Thu, 20 Jan 2022 16:38:06 +0000

This website is built with Next JS and WordPress. I used WP for the blog part of the website, as there is no need to reinvent the wheel when it comes to a CMS. I worked with WP long before starting with Next JS, so it was a natural choice.

Many writers, including me, use images in blogs posts. So when you import that blog post into Next, most people use dangerouslySetInnerHTML to render all the HTML.

<div dangerouslySetInnerHTML={{__html: post.content}} />

This usually works well, but it could be better. The problem here is that all of the images in the content will be in a standard tag, which is not recommended in Next JS. In Next JS, you should use the Image component from ‘next/image’, which optimizes images to make them smaller in size, therefore reducing the page size and ultimately the loading times.

html-react-parser

So, how can you fix this? Well, as the heading suggests, html-react-parser. The parser converts an HTML string into one or more React elements. We can use this package instead of dangerouslySetInnerHTML to parse the HTML from our post and replace content when it is being parsed. Here is how you do it:

Install the parser

npm i html-react-parser

Import and use

Parsing the HTML string with the parse function, which is taking in the HTML string and options as parameters.

<div> {parse(blog.content, replaceImage)} </div>

The options I pass to the parser, to target the img tag and replace it.

const replaceImage = { replace: ({ name, attribs, children }) => { if (name === "figure" && /wp-block-image/.test(attribs.class)) { return <>{domToReact(children, replaceImage)}</>; } if (name === "img") { return ( <Image src={attribs.src} width={attribs.width} height={attribs.height} alt={attribs.alt ? attribs.alt : "Blog post image"} /> ); } } };

Now all inserted images in the blog post use the Image component.
Full Gist.

Performance

So, why should you do this? As stated above, it will optimize all images in posts, leading to faster load times, and ultimately, better SEO. Of course, the package itself does increase the bundle size. But the slight increase that adds, compared to the savings on image sizes, is a net saving in bundle size.

Originally posted on aamodt.xyz

DEV Community: Kasper Aamodt

Next JS - replace React with Preact

Install Preact:

Add this snippet to your next.config.js file:

Next JS – optimize blog posts