How We Built an Ultra-Fast Travel Landing Page with Astro & Next.js for Instant Google Indexing

How We Built an Ultra-Fast Travel Landing Page with Astro & Next.js for Instant Google Indexing

When building customer-facing travel and marketplace platforms, two metrics matter more than anything else: Time-To-First-Byte (TTFB) and Google Indexing Speed.

Travelers booking day excursions don't wait for heavy JavaScript bundles to hydrate, and search engine bots reward pages that serve pre-rendered HTML on edge CDNs.

In this case study, I’ll share how we architected the dedicated Day Tours in Tbilisi catalog for DayTourGuides by combining Astro 5 with a Next.js Reverse-Proxy, achieving sub-second loads and getting indexed by Google in under 48 hours.

---

1. The Architectural Challenge

Our core application runs on Next.js. While Next.js is fantastic for complex user dashboards, authenticated user states, and transactional booking carts, serving a catalog of 35+ tour items with dozens of image assets often led to:

• Unnecessary client-side React hydration overhead.
• Heavier bundle sizes on mobile devices on 3G/4G networks.
• Slower bot crawling compared to static HTML.

We wanted the best of both worlds:

1. Zero JavaScript by default for the public catalog page.
2. Maintain our primary domain branding without subdomains.
3. Seamless integration with our existing booking checkout.

---

2. The Solution: Astro Islands via Next.js Rewrite

Instead of rewriting our entire Next.js codebase, we built a dedicated, lightweight landing page service using Astro.

Why Astro?

• Zero JS by Default: It compiles down to pure semantic HTML and Tailwind CSS.
• Pre-rendered at Build Time: All 35 tours, structured JSON-LD schemas, and FAQ accordions are baked into static HTML.
• Lightning Fast: Served via global Edge CDN in milliseconds.

The Next.js Reverse-Proxy Configuration:

To serve this Astro build under our primary domain without any URL redirects, we configured a seamless reverse-proxy in next.config.mjs:

javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/tbilisi-tours',
        destination: 'https://daytourguides.vercel.app/tbilisi-tours',
      },
    ];
  },
};

export default nextConfig;