Combining data fetching strategies

Combining data fetching strategies is a Next.js example from the official vercel/examples repository that shows how an application can use multiple data fetching approaches together while preserving the benefits of static pre-rendering.

What is Combining data fetching strategies?

This is a runnable example project built with Next.js that demonstrates how to mix different data fetching strategies—such as static generation, server-side rendering, and client-side fetching—in one app without being forced to abandon static pre-rendering. The source code is provided by Vercel's curated examples repository, and the project can be deployed to Vercel with one click or run locally via create-next-app and pnpm.

Key Features

• Next.js framework — The example is built on Next.js, the React-based production framework that supports static generation, server-side rendering, and client-side data fetching.
• Tailwind CSS — The project includes Tailwind CSS for utility-first styling, as indicated in the repository metadata.
• One-click Vercel Deploy — A deployment button lets you clone the repository into a new Vercel project with a single click.
• Live demo — A hosted demo is available at the demo URL so you can preview the finished example without setting it up.
• create-next-app bootstrap — You can scaffold the project locally by running pnpm create next-app --example with the repository URL, then start development with pnpm dev.
• Part of vercel/examples — This repository is part of Vercel's curated collection of examples and solutions, which has over 5,000 stars on GitHub.

Who is it for?

• Next.js developers who want a concrete reference for combining data fetching strategies without losing static pre-rendering.
• Frontend engineers building applications that need both static and dynamic data, looking for a pattern to follow.
• Team leads evaluating a project setup that can be quickly deployed to Vercel and later adapted to production needs.

Use cases

• Learning by example: developers can read the code to see how different data fetching strategies coexist in a single Next.js application.
• Starting point for a new app: teams can clone the repository and use it as a foundation for a custom static-plus-dynamic site.
• Demonstrating architecture: the live demo gives stakeholders a working sample of the combining pattern before development begins.

How does it work?

You can start in two ways: click the "Deploy with Vercel" button to create a new project directly in the cloud, or clone the repository using create-next-app with pnpm, run pnpm dev for local development, and push to Vercel when you're ready.