Speed is an Aesthetic
A premium portfolio site should load instantly. If a user clicks on an artwork detail card and sees a loading spinner for three seconds, the premium feel is immediately lost. High performance is a core design requirement.
Optimizing with Next.js & Client Caching
To build Noyabhi, we utilized:
- Server Component Prefetching: Next.js
<Link>tags automatically prefetch routes in the background as they enter the viewport. - Stale-While-Revalidate (SWR): Custom React hooks store data in-memory on the client side. Clicking back and forth between the catalog, portfolio, and details feels instant because the cached data is loaded immediately while fresh data revalidates in the background.
// Example of a lightweight SWR cache hook
const cache = new Map();
export function useCachedFetch(key, fetcher) {
const [data, setData] = useState(() => cache.get(key) || null);
// ... background fetch logic
}
By separating public catalog views (rendered fast via server components) from user state, we achieve optimal load times and bulletproof security.