xiry.

Development · Tip

Dashboard State in URL Params and Next.js unstable_cache

Two implementation patterns for shareable, high-performance Next.js admin dashboards

From the Xiry library · Updated 11 October 2026

This note outlines two practical architecture patterns for building admin analytics dashboards in Next.js. Storing active filters and date ranges in URL query parameters ensures views can be directly bookmarked and shared. Pairing these parameters with Next.js unstable_cache prevents redundant database queries across shared views.

How it works

1) Page state is stored in URL params so dashboards are easy to share, e.g. /admin?from=2024-10-02&to=2024-10-08&preset=last7days. 2) All database queries are cached using Next.js unstable_cache (docs: https://nextjs.org/docs/app/api-reference/functions/unstable_cache).

What it's for

  • Make dashboard filter states and date ranges easily shareable via browser URLs
  • Reduce database load on analytics queries using Next.js data caching
  • Design robust internal admin tooling with shareable state by default

Key points

  • Syncing active filters, presets, and date ranges directly to URL search parameters
  • Facilitating direct link sharing with pre-configured dashboard state
  • Wrapping database queries in Next.js unstable_cache for efficient data reuse

Pricing

Free

Details

Type
Tip
Category
Development
Topic
Web Development Tips
Open source
No
Platforms
Web
For
Next.js and full-stack web developers building dashboards and internal tools
Tags
nextjs, react, dashboards, caching, state management, web dev

Why it was saved

  • @dillionverma, 8 October 2024: Reusable patterns for shareable, cached dashboard pages.

Related

  • Shadcn Dashboard

    Open-source dashboard kit and UI blocks built with shadcn/ui and Base UI

  • shadcn/ui

    Copy-paste React UI components built with Tailwind CSS and Radix primitives.

  • Efferd

    Pre-built, responsive shadcn/ui blocks and layouts for React applications

  • Spell UI

    Refined, copy-paste React and Tailwind CSS components with micro-interactions

  • Above-the-Fold Deferred Rendering Pattern

    Performance pattern for deferring below-the-fold components to accelerate perceived page load.

  • Cult UI

    Open-source animated UI components and blocks built for shadcn/ui projects

Updated