# 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.

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

**Rules:**
- **Atomic Section Components** — Each section (Hero, Features, Pricing) is a standalone component with no shared state.
- **Mobile-First CSS** — Design for 375px first. Scale up with sm:, md:, lg: breakpoints.
- **Static Generation** — Use generateStaticParams or SSG — never getServerSideProps — for landing pages.
- **Lazy Load Below Fold** — Dynamically import sections below the fold to reduce initial bundle size.

**Pattern** — `components/landing/SectionFactory.tsx`

```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 — Next.js**

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

File: `app/page.tsx`

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

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

**Implementation — Vite**

In Vite, use React.lazy and Suspense boundaries to lazy-load sections and reduce initial bundle.

File: `pages/LandingPage.tsx`

```tsx
const PricingSection = lazy(() => import('./sections/PricingSection'));

export function LandingPage() {
  return (
    <>
      <HeroSection />
      <FeaturesSection />
      <Suspense fallback={<PricingSkeleton />}>
        <PricingSection />
      </Suspense>
    </>
  );
}
```

Read more: https://reactprinciples.dev/cookbook/saas-landing-page

---

Source: https://reactprinciples.dev/nextjs/cookbook/saas-landing-page
All recipes (compact): https://reactprinciples.dev/llms.txt
All recipes (full): https://reactprinciples.dev/llms-full.txt