🏨 Problem

Design a scalable hotel reservation frontend using Next.js (like Booking.com / Agoda).

1️⃣ Clarify requirements (say this first)

💬 Interview opening:

“Before designing the solution, I’d like to clarify the requirements.”

Functional

• Search hotels by location & date
• Filters (price, rating, amenities)
• Hotel detail page
• Room selection
• Booking & payment
• Booking confirmation

Non-functional

• SEO-friendly
• Fast initial load
• Handles high traffic
• Reliable booking flow

2️⃣ Why Next.js? (VERY IMPORTANT)

💬 Say this clearly:

“Next.js is a good choice because it supports SSR, SSG, and ISR, which are critical for SEO and performance in travel platforms.”

Benefits

• SSR → SEO-friendly search pages
• SSG + ISR → Fast hotel detail pages
• Code splitting by route
• Image optimization
• Built-in caching

3️⃣ High-Level Architecture (Next.js)

Architecture

• Next.js App Router
• CDN (Vercel / CloudFront)
• Backend APIs (Search, Booking)
• Payment Provider SDK
• Client-side cache (React Query)

💬 Interview line:

“Static assets and pages are served from CDN, while dynamic pages are rendered on demand.”

4️⃣ Routing & Rendering Strategy (KEY SECTION)

App Router structure

/app
  /search
    page.tsx        // SSR
  /hotel/[id]
    page.tsx        // SSG + ISR
  /booking
    page.tsx        // CSR
  /confirmation
    page.tsx

Rendering choice

💬 Interview gold:

“I use the right rendering strategy per page instead of forcing SSR everywhere.”

5️⃣ Search Page Design (SSR)

Flow

1. User opens /search?location=Hanoi
2. Server fetches hotel list
3. Page rendered on server
4. Hydrated on client
5. Filters update client-side

💬 Strong line:

“Search parameters are stored in the URL to allow sharing and refresh.”

6️⃣ State Management Strategy

💬 Interview sentence:

“Server state is managed with React Query to avoid overusing global stores.”

7️⃣ Hotel Detail Page (SSG + ISR)

Why ISR?

• Hotels don’t change every second
• Fast load time
• Scales to millions of users

💬 Say this:

“ISR allows us to rebuild hotel pages periodically without redeploying.”

8️⃣ Booking Flow (Client-side)

Steps

1. Select room
2. Lock availability (API call)
3. Enter guest info
4. Payment
5. Confirmation

💬 Important line:

“Availability is always rechecked before payment to prevent double booking.”

9️⃣ Performance Optimization (Next.js-specific)

• next/image for optimized images
• Route-level code splitting
• Prefetch hotel detail on hover
• Skeleton loading
• Edge caching for SSR pages

💬 Interview phrase:

“Images are the biggest performance bottleneck in travel apps, so optimization is critical.”

🔐 10️⃣ Security (Frontend)

• HTTPS only
• Payment handled via SDK
• No card data stored
• CSRF & XSS protection
• Secure cookies for auth

🧠 1-Minute Final Summary (MEMORIZE THIS)

“I design the hotel reservation frontend using Next.js to leverage SSR for SEO-heavy search pages, SSG with ISR for scalable hotel detail pages, and CSR for secure booking flows. The app is structured by routes and features, server state is managed efficiently, and performance, reliability, and security are prioritized throughout the booking journey.”