SaaS Landing Page

Optimized conversion funnels with component composition, SSG/ISR, and accessible form layouts built for maximum performance.

Principle

Landing pages must be statically generated for SEO and performance. Use a section-based component architecture where each section is an independent, lazily-loaded unit. Avoid client-side data fetching for above-the-fold content.

lightbulb

Use ISR (Incremental Static Regeneration) for pricing and content sections that update occasionally without requiring a full rebuild.

Rules

check_circle
Atomic Section ComponentsEach section (Hero, Features, Pricing) is a standalone component with no shared state.
check_circle
Mobile-First CSSDesign for 375px first. Scale up with sm:, md:, lg: breakpoints.
check_circle
Static GenerationUse generateStaticParams or SSG — never getServerSideProps — for landing pages.
check_circle
Lazy Load Below FoldDynamically import sections below the fold to reduce initial bundle size.

Pattern

components/landing/SectionFactory.tsx

import dynamic from 'next/dynamic';

const SECTIONS = {
  hero: dynamic(() => import('./HeroSection')),
  features: dynamic(() => import('./FeaturesSection')),
  pricing: dynamic(() => import('./PricingSection')),
} as const;

export function SectionFactory({ type, props }: SectionProps) {
  const Section = SECTIONS[type];
  return <Section {...props} />;
}

Implementation

info

Version Compatibility

Requires React 19+ and the latest stable versions of all dependencies shown.

Use Next.js static generation with revalidation for dynamic pricing data while keeping the page fast.

app/page.tsx

export const revalidate = 3600; // ISR: revalidate hourly

export default async function LandingPage() {
  const pricing = await fetchPricingPlans();
  return (
    <>
      <HeroSection />
      <FeaturesSection />
      <PricingSection plans={pricing} />
      <CTASection />
    </>
  );
}

react-principles

SaaS Landing Page

Principle

Rules

Pattern

Implementation

Getting Started

Components