JAMstack w 2025: Przyszłość Tworzenia Stron Internetowych

Traditional: 800ms – 2s load time
JAMstack:   100ms – 300ms load time

Przed: 2.8s load, Lighthouse 45/100
Po:    0.4s load, Lighthouse 98/100

// Nie musisz się martwić o:
- Load balancing
- Database optimization
- Server capacity
- Cache invalidation

// CDN robi to za Ciebie:
✅ Edge locations worldwide
✅ Automatic scaling
✅ DDoS protection

// app/page.tsx
export default function Home() {
  return (
    <div>
      <h1>Ultraszybka strona</h1>
      {/* Server Components domyślnie */}
    </div>
  );
}

// Automatic:
// - Image optimization
// - Font optimization
// - Code splitting
// - Tree shaking

---
// Ultra-light: tylko 0 JS domyślnie
const posts = await fetch('/api/posts');
---

<main>
  {posts.map(post => (
    <Article title={post.title} />
  ))}
</main>

# Deploy w 30 sekund
npx vercel

# Automatic:
✅ Global CDN
✅ Edge Functions
✅ Analytics
✅ Preview deployments
✅ Zero config

// tina/config.ts
export default defineConfig({
  schema: {
    collections: [
      {
        name: 'post',
        label: 'Blog Posts',
        path: 'content/blog',
        fields: [
          {
            type: 'string',
            name: 'title',
            label: 'Title',
          },
        ],
      },
    ],
  },
});

⏱️ Load time: 2.8s
📊 Lighthouse: 45/100
💰 Hosting: 49 PLN/mies
🔒 Aktualizacje: Co tydzień
😰 Downtime: 2-3x / miesiąc

⏱️ Load time: 0.4s (7x szybciej!)
📊 Lighthouse: 98/100
💰 Hosting: 0 PLN (free tier)
🔒 Aktualizacje: Automatyczne
😎 Downtime: 0 w ciągu 6 miesięcy

✓ Audyt obecnej strony
✓ Identyfikacja contentu
✓ Mapowanie funkcjonalności
✓ Wybór stacku

# 1. Initialize Next.js
npx create-next-app@latest

# 2. Setup TinaCMS
npx @tinacms/cli@latest init

# 3. Deploy to Vercel
npx vercel

// Skrypt migracji z WordPress
const exportWordPressToMarkdown = async () => {
  const posts = await wpAPI.posts().get();
  
  posts.forEach(post => {
    const markdown = turndownService.turndown(post.content);
    fs.writeFileSync(
      `content/blog/${post.slug}.mdx`,
      `---
title: ${post.title}
date: ${post.date}
---
${markdown}`
    );
  });
};

✓ Performance testing
✓ SEO verification
✓ A/B testing
✓ Migration of domain

Hosting VPS: 49 PLN/mies
Domain: 50 PLN/rok
SSL: 0 PLN (Let's Encrypt)
Backup: 20 PLN/mies
Security: 30 PLN/mies
Updates: 100 PLN/mies (outsource)

TOTAL: ~200 PLN/mies = 2400 PLN/rok

Vercel Hobby: 0 PLN
lub Pro: 80 PLN/mies
Domain: 50 PLN/rok
TinaCMS: 0 PLN (self-hosted)
Backup: 0 PLN (Git)
Security: 0 PLN (built-in)
Updates: 0 PLN (automatic)

TOTAL: 50 PLN/rok (lub 1010 PLN/rok dla Pro)

// Automatic w Next.js 15
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1920}
  height={1080}
  priority // dla above-the-fold
  quality={85} // sweet spot
/>

// next/font automatycznie:
import { Inter } from 'next/font/google';

const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap', // FOUT zamiast FOIT
});

// Lazy load heavy components
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <Skeleton />,
  ssr: false, // tylko client-side
});

// Web Vitals tracking
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getFCP(console.log);
getLCP(console.log);
getTTFB(console.log);