javascript 42 lines · 8 steps

Caching dashboard stats in Next.js

Wrap an expensive multi-query aggregation in unstable_cache and invalidate it by tag when the underlying data changes.

Explained by highlit
Next.js Intermediate caching cache-invalidation tag-based-revalidation database-aggregation concurrency
1import { unstable_cache, revalidateTag } from 'next/cache'
2import { db } from '@/lib/db'
3 
4export const getDashboardStats = unstable_cache(
5 async (organizationId) => {
6 const [revenue, orders, customers] = await Promise.all([
7 db.order.aggregate({
8 where: { organizationId, status: 'paid' },
9 _sum: { total: true },
10 }),
11 db.order.groupBy({
12 by: ['status'],
13 where: { organizationId },
14 _count: { _all: true },
15 }),
16 db.customer.count({
17 where: { organizationId, deletedAt: null },
18 }),
19 ])
20 
21 return {
22 totalRevenue: revenue._sum.total ?? 0,
23 ordersByStatus: Object.fromEntries(
24 orders.map((row) => [row.status, row._count._all]),
25 ),
26 customerCount: customers,
27 computedAt: new Date().toISOString(),
28 }
29 },
30 ['dashboard-stats'],
31 { tags: ['dashboard-stats'], revalidate: 3600 },
32)
33 
34export async function markOrderPaid(orderId, organizationId) {
35 const order = await db.order.update({
36 where: { id: orderId, organizationId },
37 data: { status: 'paid', paidAt: new Date() },
38 })
39 
40 revalidateTag('dashboard-stats')
41 return order
42}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Tag-based caching lets you cache a value once and precisely invalidate it from anywhere a write occurs.
  2. 2Running independent queries with Promise.all shrinks total latency to the slowest single query.
  3. 3Pairing a cache key with a revalidate window gives you both freshness bounds and on-demand invalidation.

Related explainers

javascript 
import { Component } from 'react';
import { reportError } from './services/telemetry';
 
export class ErrorBoundary extends Component {

How a React ErrorBoundary works

error-handling lifecycle-methods render-props
Intermediate 8 steps
javascript 
const FOCUSABLE = [
  'a[href]',
  'button:not([disabled])',
  'input:not([disabled])',

How to trap keyboard focus in a dialog

accessibility dom event-handling
Intermediate 8 steps
javascript 
function generateCalendarGrid(year, month) {
  const firstDay = new Date(year, month, 1);
  const lastDay = new Date(year, month + 1, 0);
  const daysInMonth = lastDay.getDate();

Building a text calendar in JavaScript

date-handling grid-layout modular-arithmetic
Intermediate 9 steps
go 
package editor
 
import (
	"context"

How a debouncer coalesces bursts in Go

debounce concurrency timers
Intermediate 8 steps
javascript 
function initScrollSpy() {
  const links = Array.from(document.querySelectorAll('.nav a[href^="#"]'));
  const sections = links
    .map((link) => document.querySelector(link.getAttribute('href')))

Building a scroll spy with IntersectionObserver

intersectionobserver dom event-driven
Intermediate 7 steps
java 
package com.example.lb;
 
import java.util.List;
import java.util.concurrent.atomic.AtomicInteger;

A thread-safe round-robin load balancer in Java

concurrency load-balancing round-robin
Intermediate 9 steps

Share this explainer

Here's the card — post it anywhere.

Caching dashboard stats in Next.js — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code