Core Idea
Server-rendered React + Supabase keeps bundles thin and data secure.
North Star Metric
Core Web Vitals on high-intent flows (search, booking, owner portal).
Proof Point
Lazy-loaded UI (LandingPage) + Supabase-backed data fetches.
In the competitive proptech landscape, speed and reliability are not just "nice-to-haves"—they are conversion drivers. At Ondo Real Estate, we rebuilt our core infrastructure using Next.js 15 and Supabase to deliver a seamless experience for buyers, sellers, and property owners.
This article explores the architectural decisions behind our platform, focusing on the App Router, data fetching strategies, and performance optimizations.
The Core Stack: Next.js 15 App Router
We migrated to the Next.js App Router to leverage React Server Components (RSC). This architecture allows us to render static content (like property descriptions and legal disclaimers) on the server, significantly reducing the JavaScript bundle sent to the client.
Mental model
Ship HTML first; hydrate only the interactive islands.
Design principle
Group server fetches; avoid client-side waterfalls.
Why Server Components?
For a content-heavy real estate site, RSCs offer two critical benefits:
- Zero-Bundle-Size Data Fetching: We fetch property details directly from Supabase on the server. The heavy lifting of data transformation happens backend-side.
- Automatic Code Splitting: Client-side interactive elements, such as our
ConsultationModalorMortgageCalculator, are lazy-loaded only when needed.
// Example of our lazy loading strategy in app/page.tsx
const LandingPage = dynamic(() => import("@/components/landing-page"), {
loading: () => <Loading />,
ssr: true,
})Backend as a Service: Supabase
We utilize Supabase as our unified backend. It handles:
- Authentication: Secure user sessions for our Property Owner Dashboard.
- Database: PostgreSQL for structured property data, tenant logs, and maintenance requests.
- Real-time Subscriptions: Enabling live updates for chat features and maintenance status changes.
Data Fetching Pattern
We avoid the traditional "waterfall" of client-side requests. Instead, we pattern our data access to run in parallel on the server:
- Public Listings: Statically generated (SSG) or cached via Next.js
unstable_cachefor speed. - User Dashboards: Dynamic rendering with strict Row Level Security (RLS) policies enforced by Supabase.
Performance Engineering
Performance is a feature. Our package.json reveals a dedicated suite of optimization scripts:
optimize:images: A custom script leveragingsharpto pre-process static assets into WebP/AVIF formats.analyze:bundle: Using@next/bundle-analyzerto rigorously monitor chunk sizes.
Core Web Vitals Optimization
We aggressively optimize for Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).
| Metric | Optimization Strategy |
|---|---|
| LCP | Critical CSS extraction and priority loading for hero images. |
| CLS | Fixed aspect ratios for property cards and skeleton loaders (Loading.tsx). |
| FID | Offloading heavy hydration (like charts) to dynamic imports. |
Edge
Critical CSS + image priority deliver fast LCP.
Stability
Aspect-ratio locks contain layout shifts (CLS).
Focus
Dynamic imports ensure only-needed JS per route.
Conclusion
By combining the server-side power of Next.js 15 with the scalability of Supabase, Ondo Real Estate delivers a native-app-like feel on the web. This architecture not only boosts SEO rankings but ensures our users—whether booking a notary or managing a rental portfolio—experience zero friction.
FAQ
Q: Why use Supabase instead of a custom backend?
A: Supabase provides instant APIs, Auth, and Database management out of the box, allowing us to focus on building real estate features rather than boilerplate infrastructure.
Q: How does the App Router improve SEO?
A: It generates pure HTML on the server for search bots while streaming content to users, ensuring content is indexed immediately.
Summary
The Ondo Real Estate platform is architected on Next.js 15 using the App Router and React Server Components to minimize client-side JavaScript. The backend is powered by Supabase, utilizing PostgreSQL for data storage and Row Level Security for authentication. Performance is optimized via custom image processing scripts and dynamic code splitting. This stack ensures high Core Web Vitals scores, essential for SEO and user retention in the competitive real estate market.