Web3 Data Fetching

Web3 Data Fetching is a Next.js example from Vercel's curated examples collection that demonstrates reading smart contract data from Ethereum Virtual Machine (EVM) blockchains via view functions that require no gas fees.

What is Web3 Data Fetching?

Web3 Data Fetching is a documentation-focused example project built with Next.js and Tailwind CSS. It accepts a smart contract's address and ABI as input and renders the contract's view-function results in a web page, either server-side or client-side. The example is maintained by Vercel in the vercel/examples GitHub repository and has a live demo at https://web3-data-fetching.vercel.app/. The demo shows how to instantiate a connection to a smart contract, retrieve its information server-side, and retrieve it again using SWR for revalidation.

Key Features

• Server-side data fetching — Uses Next.js server-side rendering to retrieve smart contract information before the initial page load reaches the client.
• SWR revalidation — Integrates SWR for client-side data fetching and automatic revalidation, so contract data updates without a page refresh.
• EVM smart contract support — Targets blockchains that run the Ethereum Virtual Machine and leverages view functions, which do not require gas or fees to execute.
• Tailwind CSS styling — Ships with Tailwind CSS for utility-first styling of the example interface.
• One-click Vercel deployment — Includes a "Deploy with Vercel" button that clones the repository and creates a new project automatically.
• pnpm-based workflow — Uses pnpm create-next-app with the example URL to bootstrap the project locally, then pnpm dev to run it in development mode.

Who is it for?

• Next.js developers — Those who want to integrate blockchain data into existing Next.js applications can use this example as a reference for server-side data fetching.
• dApp builders — Developers building decentralized applications on EVM chains can use the demonstrated pattern to read contract state, such as token balances or configuration values, without requiring a user wallet.
• Blockchain educators — Tutorial authors and documentation writers can cite this example to illustrate how to expose smart contract view functions in a web frontend.

What can you do with it?

• Instantiate a smart contract connection: Set up a connection to a smart contract using its address and ABI, then call view functions directly.
• Fetch contract data on the server: Retrieve smart contract information during server-side rendering so the initial page load already contains blockchain data.
• Revalidate data with SWR: Use SWR hooks to fetch and revalidate smart contract data on the client, providing a fresh state after the page loads.

How does it work?

Clone the example with pnpm create-next-app --example https://github.com/vercel/examples/tree/main/solutions/web3-data-fetching, then run pnpm dev to start the development server. To deploy, you can use the one-click Vercel deployment button or push the repository to Vercel using the standard Next.js deployment flow.