How To Build a Carbon-Aware Website Using React and Next.js

You can make a carbon-aware website in three simple steps, by harnessing the power of server-side rendering on Next.js.

Oct 18th, 2024 9:00am by Dryden Williams

Featued image for: How To Build a Carbon-Aware Website Using React and Next.js

Image via Unsplash+.

Most people browsing the web are unaware that every click, scroll, and page view contributes to environmental emissions. The internet, while essential to our daily lives, consumes massive amounts of electricity, much of which is sourced from fossil fuels. As web developers, we have an opportunity to reduce this impact through an exciting new concept called a carbon-aware website. A carbon-aware website is one that changes its features based on the grid intensity of the electricity grid. In this article, we’re going to look at what a carbon-aware website is and how it behaves, and why it’s both good for the user and for the planet. For further inspiration, check out Low-tech Magazine, a solar-powered website I’ve been fascinated with for some time. Branch and Fershad have also implemented carbon-aware sites.

A carbon-aware website is one that changes it's features based on the grid intensity of the electricity grid.

EcoPing.earth demo of a carbon aware website (note: this is the author’s website).

Grid and Carbon Intensity for Web Developers

Carbon intensity refers to the amount of carbon dioxide (CO₂) emitted to produce a kilowatt-hour (kWh) of electricity. It varies significantly by region, depending on the sources of power available. A low carbon intensity is considered to be below 50 grams of CO₂ per kWh, while coal-reliant countries, like Poland, can reach levels as high as 600 grams per kWh. Different countries produce different amounts of electricity from different sources. Some of it is green and renewable (low intensity) and some is produced using fossil fuels (high intensity).

Electricity Maps visualization of electricity from different sources, per country.

Websites use electricity in data centres, telecoms networks and end user devices. In regions with abundant renewable energy — such as Norway, Sweden, and Iceland, where carbon intensity remains low due to reliance on hydropower and wind energy — the emissions of viewing websites and interacting with the web is low. When grid intensity is high, meaning that most electricity is generated from fossil fuels, a carbon-aware website will switch to a “low-carbon” mode, reducing the amount of energy required for users to access it. In contrast, when the grid is powered by cleaner, renewable sources, the website can deliver a richer experience with more features. This approach reduces the website’s carbon footprint.

Why Carbon Awareness Matters in Web Design

Did you know that approximately 54% of a website’s carbon emissions come from the end-user’s device? That’s a significant portion of a site’s impact that can be managed by adjusting the experience based on grid conditions.

Image from Electricity Maps.

Make a Carbon-Aware Website Using React and Next.js

We can make a carbon-aware website in three simple steps, by harnessing the power of server-side rendering on Next.js. Assuming you’ve installed Next.js with the App Router, firstly signup at carbonaware.cloud to get your API keys. It’s a free service and we’re going to be using the requestInfo endpoint. Secondly, we’ll create a server-side function to fetch the live grid data, using the code below. We use the CarbonAwareAPI for this. It’s nice and clever and will do the IP fetch from our request headers, so that we can find the client’s country code (we need the country code to find the current live grid intensity). Once we have that, we can pass it back to our components on the front end.

// src/app/actions.ts


"use server";


import { headers } from "next/headers";


import CarbonAwareAPI, {
 pickHeaders,
 allowedHeaders,
} from "@fikastudio/carbonaware";

// Get API key from https://carbonaware.cloud/
const client = new CarbonAwareAPI(
 process.env.CARBONAWARE_ACCESS_TOKEN!,
 process.env.CARBONAWARE_SECRET_TOKEN!
);


export const fetchCarbonIntensity = async (): Promise<number> => {
 try {
   // Fetch the headers for the IP/Client country code
   const hdrs = await headers();

   // The CarbonAwareAPI is clever and will get the client country from this
   // This will return a live grid intensity for the client
   const resp = await client.requestInfo({
     headers: pickHeaders(hdrs, allowedHeaders.fly),
     remoteAddr: hdrs.get("fly-client-ip") || ''
   });


   return resp.intensity
 } catch (error) {
   // Default back to the global average
   return resp.globalIntensity;
 }
};

Step 3 is to fetch the grid data from our action, in order to dynamically change the page content.

// /src/app/page.tsx
export default async function Home() {
 const intensity = await fetchCarbonIntensity();

const isLowIntensity = intensity < 100
const isMedIntensity = intensity > 100 && intensity < 300


 if (isLowIntensity) {
   return (
     <div>
	<h1>Low intensity view</h1>
<img src="my-eco-hosting.jpg" alt="hi-intensity hi-res image" width="1000" />
	</div>
   );
 }


 if (isMedIntensity) {
   return 
  <div>
	<h1>Medium intensity view</h1>
<img src="my-eco-hosting.jpg" alt="med-res image" width="1000" />
	</div>
 }


 return (
  <div>
	<h1>High intensity view</h1>
<p>No image to show</p>
	</div>
)
}

By dynamically changing the content based on the live grid data, we’ve made this website carbon-aware! In the output we show a hi-res image if the intensity is low, a medium-resolution image if it’s medium, and we’ve decided not to show an image at all if the grid intensity is high (we just display text). There are so many fun options we could do with this technique, such as:

Change theme: We can change the site colours.
Minimize Features: Cut down on non-essential content and animations, focusing only on core information.
Use System Fonts: Replace custom fonts with system defaults, reducing data transfer and load times.
Optimize Images or Show Text Alternatives: Reduce image quality, serve lower-resolution images, or replace images with text-based alternatives to save bandwidth.
Video: Remove the video and show text if the grid is too high. If the grid has lots of renewables, feel free to add an auto-play video (if you need it).
Carbon budgets: We can limit the amount of content shown on the site based on grid intensity. The more renewable, the more content the user can view.

Conversely, if renewable sources power the grid, a carbon-aware site might offer an enriched experience — high-resolution images, autoplay videos, and custom fonts that enhance the visual appeal.

Conclusion

By changing a website’s features based on the electricity grid’s carbon intensity at any given time, we can reduce overall page transfer and the impact on the end users’ devices — providing them with a richer experience. It saves their data plans, loads a faster website, and is much better for the planet.

Dryden is a sustainable web consultant building EcoPing.earth. He is helping companies measure and reduce their website carbon emissions.