search

thegreenwebfoundation / co2.js

An npm module for accessing the green web API, and estimating the carbon emissions from using digital services
Other
389 stars 49 forks source link

Documentation for best practices for using CO2.js with full-stack React/Next.js in a PaaS environment #222

Closed iljapanic closed 1 month ago

iljapanic commented 1 month ago

As a newcomer to the green web movement, it's really difficult to wrap your head around where and how to use the CO2.js library in a full-stack Next.js app running on a PaaS such as Vercel, Netlify, Coolify.

E.g. when I import and use the CO2.js in a <Footer /> component that's imported in the global <Layout /> - what actually gets calculated? How can I ensure that I'm getting the right estimates for each page of my site? What about client-side vs. server-side rendering? Maybe I should just analyze server logs and estimate CO2 emissions from there?

It would be great to have a quick-start or best practices guide for Next.js apps hosted on a PaaS. A few pointers and tips, so one can answer some of the questions above.

I suppose Vercel would be a good place to start due to its popularity. Coolify would be great to consider as well, since you can host it on any server, giving you net-zero options to choose from. Even just a high-level write-up for how to approach estimating emissions with such a provider would be super helpful.

fershad commented 1 month ago

Hi @iljapanic, thanks for this question.

The first thing to understand is that CO2.js does not perform any emissions estimations by itself. Rather, it gives you access to a couple of different estimation models that you can use to estimate the carbon emissions of data transferred when a page is loaded. You can learn more about those models on our docs website.

So when you import CO2.js into the <Footer /> component of the global <Layout /> nothing actually gets calculated. You need to use one of the exposed functions that comes with CO2.js, and pass in information such as the data size (in bytes), green hosting etc. From there, CO2.js will use one of the underlying models (Sustainable Web Design version 3 by default) to return an estimation of the carbon emissions produced by transferring that amount of data. You can learn more about doing that in this tutorial.

Regarding, client-side v. server-side, the Sustainable Web Design (the default used in CO2.js) includes data center, network, and device utilisation in the estimates it returns. If you want to calculate the actual cost of rendering on the client, then you might want to look at a tool like the Firefox Profiler. Likewise for the server-side, you'd need to set up your own tooling to examine this - though with services like Vercel & Netlify that is not easily done.

fershad commented 1 month ago

It would be great to have a quick-start or best practices guide for Next.js apps hosted on a PaaS. A few pointers and tips, so one can answer some of the questions above.

With regards to writing tutorials for specific frameworks, that is not something we currently have the bandwidth to do ourselves. However, we would certainly welcome community contributions to our Developer Docs website. You can check out the repo here if you'd like to help.

iljapanic commented 1 month ago

Thank you for the thorough explanation and insights @fershad. I appreciate you taking time to write down your thoughts.

Given your inputs, I think I will proceed by exploring Vercel's built-in monitoring. They seem to provide data about bandwidth transfer between the server and the client, which might be used to calculate an estimate. If I figure it out, I'm happy to write down a guide.

I'm closing this issue for now.