React to SvelteKit Migration: 89% to 92% Carbon Improvement and 40% Faster Builds

The Migration Decision: From Next.js 15 to SvelteKit

When we launched the Quantum Encoding website on Next.js 15 with Turbopack, we achieved respectable metrics:

• Carbon Rating: A (cleaner than 89% of web pages)
• Lighthouse Performance: 95-98/100
• Fast build times with Turbopack

But we knew we could do better.

After a complete migration to SvelteKit, the results exceeded our expectations:

• Carbon Rating: A (cleaner than 92% of web pages — a 3 percentage point improvement)
• Lighthouse Performance: 100/100 (perfect score)
• Firebase deployment time: 54% faster than Next.js 15, 31% faster than Next.js 16

This post documents the exact engineering decisions, migration challenges, and measurable improvements from our transition.

---

Why We Migrated: The React Runtime Problem

The Hidden Cost of React

React is an excellent framework, but it comes with an unavoidable runtime cost:

1. React runtime library: ~45KB (gzipped) minimum baseline
2. Virtual DOM reconciliation: Continuous CPU overhead for every state change
3. ReactDOM: Additional hydration and rendering overhead
4. React Server Components (RSC): Server-side complexity and payload size

Even with Next.js 15’s aggressive optimizations and Turbopack’s blazing-fast builds, you still ship the React runtime to every user, on every page load.

SvelteKit’s Compiler Advantage

Svelte takes a fundamentally different approach: it’s a compiler, not a runtime framework.

At build time, Svelte analyzes your components and generates surgical JavaScript that directly manipulates the DOM with zero runtime overhead.

The result?

• No virtual DOM
• No reconciliation algorithm
• No React runtime
• Just the minimal JavaScript needed to make your page interactive

---

Migration Results: By the Numbers

Carbon Footprint Improvement

Before (Next.js 15 + Turbopack):

• Carbon Rating: A (89th percentile)
• 0.42g CO₂ per page view
• 4.2kg CO₂ per 10,000 page views

After (SvelteKit):

• Carbon Rating: A (92nd percentile)
• 0.35g CO₂ per page view
• 3.5kg CO₂ per 10,000 page views

Impact: 16.7% reduction in carbon emissions per page view — equivalent to 700g CO₂ saved per 10,000 page views.

For a site serving 100K monthly page views, that’s 8.4kg CO₂ saved per year — roughly equivalent to charging 1,000 smartphones.

Build and Deployment Performance

Evolution Through Framework Versions:

Next.js 15 + Turbopack:

• Firebase App Hosting deployment time: 6:34

Next.js 16 + Turbopack:

• Firebase App Hosting deployment time: 4:20 (34% faster than Next 15)

SvelteKit:

• Firebase App Hosting deployment time: 3:00 (54% faster than Next 15, 31% faster than Next 16)

The most dramatic improvement came from migrating to SvelteKit, which cut deployment times by more than half compared to our initial Next.js 15 setup. Even Next.js 16’s improvements couldn’t match SvelteKit’s deployment efficiency.

---

The Migration Process: Technical Details

1. Component Rewrite Strategy

We had ~30 React components that needed migration. Our approach:

React Component (Before):

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Svelte Component (After):

<script lang="ts">
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicked {count} times
</button>

Key differences:

• No useState import — Svelte 5 uses $state runes
• No JSX — Svelte uses HTML templates
• No onClick camelCase — Svelte uses lowercase onclick
• No wrapper function — direct reactivity

2. Routing Migration

Next.js App Router (Before):

app/
  page.tsx           → /
  blog/
    page.tsx         → /blog
    [slug]/
      page.tsx       → /blog/:slug

SvelteKit Routes (After):

routes/
  +page.svelte       → /
  blog/
    +page.svelte     → /blog
    [slug]/
      +page.svelte   → /blog/:slug

Key advantages:

• More explicit with +page.svelte naming
• Built-in +layout.svelte for nested layouts
• +server.ts for API routes (cleaner separation)

3. Data Fetching Simplification

Next.js (Before):

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await fetch(`/api/posts/${params.slug}`);
  return <article>{post.content}</article>;
}

SvelteKit (After):

<script lang="ts">
  let { data } = $props();
</script>

<article>{data.post.content}</article>

// +page.server.ts
export async function load({ params }) {
  const post = await fetch(`/api/posts/${params.slug}`);
  return { post };
}

Key advantages:

• Clear separation between data fetching and presentation
• Type-safe props with $props() runes
• Automatic loading states and error handling

4. Firebase Integration

Both Next.js and SvelteKit deploy beautifully to Firebase App Hosting, but SvelteKit’s adapter system made configuration cleaner:

SvelteKit Adapter:

// svelte.config.js
import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter(),
    prerender: {
      entries: ['*'],
      handleHttpError: 'warn'
    }
  }
};

Firebase App Hosting Config:

runConfig:
  runtime: nodejs20
  concurrency: 100
  cpu: 1
  memoryMiB: 512
  minInstances: 0
  maxInstances: 10

---

The Performance Impact: Lighthouse Audits

Before (Next.js 15):

• Performance: 95/100
• Accessibility: 95/100
• Best Practices: 100/100
• SEO: 100/100

Main bottleneck: React hydration time (~180ms)

After (SvelteKit):

• Performance: 100/100 ✅
• Accessibility: 95/100
• Best Practices: 100/100
• SEO: 100/100

Key improvements:

• First Contentful Paint: 0.9s → 0.4s (56% faster)
• Time to Interactive: 1.8s → 0.7s (61% faster)
• Total Blocking Time: 120ms → 0ms (eliminated)
• Cumulative Layout Shift: 0.05 → 0 (eliminated)

---

Carbon Rating Analysis: Where the Savings Come From

The Website Carbon Calculator measures emissions based on:

1. Data transfer (page weight)
2. Energy intensity of data centers
3. Carbon intensity of electricity grid
4. Website traffic estimates

Our Improvements:

1. Faster Time-to-Interactive

• Less JavaScript to parse and execute
• No React hydration overhead
• Direct DOM manipulation

2. Lower Server CPU Usage

• SvelteKit’s SSR is more efficient than RSC
• Fewer server-side computations
• Faster response times = less CPU time per request

---

Build Time Improvement: Why SvelteKit Deploys Faster

SvelteKit’s Firebase App Hosting deployments are significantly faster than Next.js. Here’s why:

Next.js 15 + Turbopack Build Steps:

1. Compile TypeScript → JavaScript
2. Transform JSX → React.createElement() calls
3. Bundle React runtime + components
4. Generate Server Components payload
5. Generate Client Component bundles
6. Optimize and minify
7. Generate static pages

SvelteKit Build Steps:

1. Compile Svelte components → vanilla JavaScript
2. Bundle (no runtime to include)
3. Optimize and minify
4. Generate static pages

Key difference: SvelteKit skips steps 2, 4, and 5 entirely because:

• No JSX transformation needed (Svelte compiles HTML templates)
• No React runtime to bundle
• No Server/Client Component split (Svelte handles this at compile time)

---

Lessons Learned: What Surprised Us

1. Svelte 5 Runes Are Excellent

The new $state, $derived, and $effect runes in Svelte 5 are a massive improvement over Svelte 4’s store-based reactivity:

<script lang="ts">
  let count = $state(0);
  let doubled = $derived(count * 2);

  $effect(() => {
    console.log(`Count is now ${count}`);
  });
</script>

Why this is better than React hooks:

• No dependency arrays to manage
• No useCallback or useMemo needed
• Automatic cleanup
• Simpler mental model

2. TypeScript Integration Is Seamless

SvelteKit’s TypeScript support is first-class:

• Type-safe routing with generated types
• Automatic inference for load functions
• Full IDE support in .svelte files

3. Firebase App Hosting Works Perfectly

Both Next.js and SvelteKit work great on Firebase App Hosting, but SvelteKit’s deployment is:

• 54% faster than Next.js 15 (6:34 → 3:00)
• 31% faster than Next.js 16 (4:20 → 3:00)
• Simpler configuration (fewer adapter options to configure)

4. Migration Was Faster Than Expected

Total migration time: 12 hours for ~30 components and 15 pages.

Why so fast?

• Svelte’s syntax is intuitive
• No complex state management to migrate (we didn’t use Redux/Zustand)
• Firebase client libraries work identically in both frameworks

---

Should You Migrate? Decision Framework

Migrate to SvelteKit if:

You want maximum performance and minimal bundle sizes You value build speed and deployment efficiency You care about carbon footprint and sustainability You prefer simpler reactivity over React’s hooks model Your app doesn’t heavily depend on the React ecosystem (UI libraries, etc.)

Stay with Next.js if:

You rely heavily on React-specific libraries (Material-UI, Chakra, etc.) You have a massive codebase where migration cost outweighs benefits Your team is deeply specialized in React You need React Server Components for complex data streaming use cases

---

The Bottom Line: Real-World Impact

Our migration from Next.js 15 + Turbopack to SvelteKit delivered:

• 3 percentage point improvement in carbon rating (89% → 92%)
• Perfect 100/100 Lighthouse score (up from 95-98)
• 54% faster Firebase deployments (6:34 → 3:00)
• 16.7% reduction in CO₂ per page view

For a website serving 100K monthly page views, this translates to:

• 8.4kg CO₂ saved per year (equivalent to 1,000 smartphone charges)
• Faster deployment cycles (3-minute builds vs 6+ minutes with Next.js 15)

Was it worth it? Absolutely.

Would we recommend SvelteKit for greenfield projects? Without hesitation.

---

Try It Yourself

Want to see the performance difference firsthand?

1. Visit our website: quantumencoding.io
2. Open DevTools → Lighthouse
3. Run an audit

Then compare to a typical React-based site. The difference is measurable.

---

Conclusion: Compilers > Runtimes

The web development ecosystem is shifting from runtime frameworks (React, Vue) to compile-time frameworks (Svelte, Solid).

This migration proved what we suspected: compilers beat runtimes for performance, sustainability, and developer experience.

If you’re building a new web application in 2025, SvelteKit deserves serious consideration. If you’re running an existing React app, the migration cost might be lower than you think—and the benefits are measurable.

The web is faster, leaner, and greener with SvelteKit.

---

Resources

• SvelteKit Documentation
• Svelte 5 Runes
• Website Carbon Calculator
• Firebase App Hosting
• Lighthouse Performance Auditing

---

Have questions about SvelteKit migration or carbon optimization? Contact us for a technical consultation.