gas viewer

build a simple UI to show the latest gas fee based on the last 10 blocks. The gas fee contains two parts: baseFeePerGas and reward. these two are added together for low, medium and high situations. We take the last 10 blocks data and calculate the average of them. NextJS 13.5 async server compoment and App router is used. Alchemy web3 SDK is used for data fetching. alchemy URL as env var Component rendered in server side.

build a simple UI to show the latest gas fee based on the last 10 blocks.

NextJS 13.5 async server compoment and App router is used. Component rendered on server side. To fetch data server side has many benefits: 1 Reduce FE fetching and processing load, improve performance by reducing fetching time since it's closer to data source. 2 No need to expose API secrete etc to FE. 3 Server component will be rendered on the server. The result can be cached and reused for other users. 4 Client side doesn't have to download and execute JS for it. 5 Like SSR, this also impoves SEO. 6 Each route trunk is rendered in two steps. React renders Server Components into a special data format called the React Server Component Payload (RSC Payload). Next.js uses the RSC Payload and Client Component JavaScript instructions to render HTML on the server. The HTML is used to immediately show a fast non-interactive preview of the route The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM. The JavaScript instructions are used to hydrate Client Components and make the application interactive.

Alchemy web3 SDK is used for data fetching. Alchemy's Ethereum API Endpoints make fetching on chain data easy. Two functions are used in the project. getFeeHistory getBlock