Building Ultra-Fast Booking & Business Sites with Next.js 15 and Supabase (Adria Case Study)

When moving regional businesses in the Adria region away from WordPress, the biggest challenge isn't the static content—it’s handling dynamic features like live booking calendars, contact forms, and real-time availability without sacrificing those precious 100/100 Lighthouse scores.

At webizradaadria.com, we recently launched a high-performance web project for a luxury booking villa (Grand Villa Bosnae) where we had to implement a live booking calendar integration. Doing this on a traditional stack usually means bloated plugins and heavy JavaScript.

Here is how we solved it using Next.js 15 (App Router), Tailwind CSS, and Supabase to maintain sub-second loading times for users on slow mobile networks.

🛠️ The Tech Stack Architecture
To keep the site incredibly fast while handling dynamic booking states, we decoupled the architecture:

Frontend & Routing: Next.js 15 (utilizing partial prerendering to keep the layout static but the booking engine dynamic).

Styling: Tailwind CSS for utility-first, zero-runtime CSS.

Backend & Database: Supabase (PostgreSQL) for real-time calendar state updates and client data.

Hosting: Vercel, ensuring our serverless functions run as close to the user as possible.

💡 Key Optimization Techniques We Used

1. Optimizing the Live Booking Calendar
   Instead of loading a heavy third-party iframe or a massive JavaScript library that ruins Core Web Vitals, we built a custom, lightweight calendar component.
   We fetch the reserved dates from Supabase via Next.js Server Components. The initial state is rendered on the server, meaning the user sees the calendar instantly, and hydration overhead is minimal.

2. Static Content with Dynamic Holes (PPR)
   Pages like izrada web stranica Rijeka or specific villa presentation pages are mostly static text and images. With Next.js 15, we can statically prerender 95% of the page at build time, while wrapping the live availability badge in a boundary. Google sees a fully indexed, lightning-fast static page, while the user gets real-time data.

3. Image Optimization for Retina Displays
   Tourism and local business sites rely heavily on high-resolution imagery. We utilized the Next.js component coupled with modern formats (WebP/AVIF) and custom srcSets. Even on 4G mobile screens in coastal regions, images load instantly without causing layout shifts (CLS).

📈 The Results: 100/100 Lighthouse in Production
By moving away from monolithic databases and heavy client-side rendering, we achieved what most local business owners thought was impossible for a site with a live booking calendar:

Performance: 99-100/100

Accessibility: 100/100

Best Practices: 100/100

SEO: 100/100

More importantly, the Largest Contentful Paint (LCP) dropped under 0.8 seconds, directly boosting the client's conversion rate and search visibility in local regional queries.

💬 Let's Discuss!
How are you handling dynamic states (like bookings, real-time stock, or interactive maps) in Next.js 15 without letting third-party scripts ruin your performance scores? Do you rely on Supabase/Firebase, or do you build custom API routes?

Drop your thoughts and repo architectures below! 👇