🚀 Progressive JSON Nedir? Express.js ve React ile Gerçek Zamanlı Uygulama

(Bonus: El Yazısı Efektiyle Daha Etkileyici UI)

Modern web uygulamalarında kullanıcı deneyimi, sadece verinin doğru olmasıyla değil, aynı zamanda ne kadar hızlı ve akıcı geldiğiyle de ilgilidir. Kullanıcılar boş ekranlar yerine “bir şeyler oluyor” hissini sever.

İşte bu noktada Progressive JSON devreye giriyor.

---

🎯 Progressive JSON Nedir?

Progressive JSON, büyük JSON verilerini kullanıcıya parça parça (stream olarak) iletme yöntemidir. Bu, özellikle yavaş ağlarda ya da büyük veri setlerinde kullanıcıya beklemek yerine “veri gelmeye başladı” hissi verir.

Bu teknik genellikle application/x-ndjson yani Newline Delimited JSON ile kullanılır. Her satırda bir JSON nesnesi yer alır ve bu satırlar bir akış (stream) halinde gönderilir.

---

✅ Neden Kullanmalıyız?

• 🔄 Daha hızlı render: Tüm veriyi beklemeden ekrana yazdırmaya başlarız.
• 📡 Gerçek zamanlı his: Kullanıcı, sistemin çalıştığını hisseder.
• 🧱 Modüler veri işleme: Gelen her parçayı ayrı ayrı işleyebiliriz.
• 🧩 Büyük veri desteği: Dev JSON dosyaları yerine parça parça iletim sağlar.

---

⚙️ Express.js ve React ile Progressive JSON Örneği

Şimdi birlikte küçük ama öğretici bir örnek yapalım:

• Backend: Express.js ile progressive (stream) JSON verisi sunacağız.
• Frontend: React ile bu veriyi canlı canlı alıp el yazısı animasyonu ile ekrana yazdıracağız.

---

🔧 1. Express.js ile Progressive JSON Stream

server.ts

import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());

app.get('/stream', (req, res) => {
  res.setHeader('Content-Type', 'application/x-ndjson'); // NDJSON format

  const users = [
    { id: 1, name: 'Ali' },
    { id: 2, name: 'Ayşe' },
    { id: 3, name: 'Mehmet' },
    { id: 4, name: 'Zeynep' },
  ];

  let i = 0;

  const interval = setInterval(() => {
    if (i >= users.length) {
      clearInterval(interval);
      res.end(); // Yayını kapat
    } else {
      res.write(JSON.stringify(users[i]) + '\n'); // NDJSON: her satır ayrı bir JSON
      i++;
    }
  }, 1000); // 1 saniyede bir kullanıcı gönder
});

app.listen(3001, () => {
  console.log('Server is running on http://localhost:3001');
});

💻 2. React ile Progressive Okuma ve El Yazısı Gibi Gösterme

Veriyi aldıktan sonra sadece listelemekle kalmayacağız. Her satırı sanki birisi yazıyormuş gibi harf harf ekrana yazdıracağız. Cursor kullanmadan, sade ama etkileyici bir animasyonla.

🧠 App.tsx — Progressive JSON ve Yazı Efektini Birleştirme

Yazı Efekti

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 2s steps(30, end);
}

@keyframes typing {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

import { useEffect, useState } from 'react';

type User = {
  id: number;
  name: string;
};

function App() {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    const fetchStream = async () => {
      const response = await fetch('http://localhost:3001/stream');
      const reader = response.body?.getReader();
      const decoder = new TextDecoder();

      let buffer = '';

      while (reader) {
        const { value, done } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });

        const lines = buffer.split('\n');
        buffer = lines.pop() || ''; // Son incomplete satırı sakla

        for (const line of lines) {
          if (line.trim()) {
            const json = JSON.parse(line);
            setUsers(prev => [...prev, json]);
          }
        }
      }
    };

    fetchStream();
  }, []);

  return (
    <div>
      <h1>Kullanıcılar (Stream ile geliyor)</h1>
      <ul>
        {users.map(user => (
          <li key={user.id} className="typewriter">
            {user.id} - {user.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

✍️ Sonuç

Progressive JSON, kullanıcı deneyimini ciddi anlamda iyileştiren güçlü bir tekniktir. Bunu bir de sade ama estetik bir “el yazısı” animasyonu ile birleştirdiğimizde, çok daha canlı ve etkileyici arayüzler ortaya çıkıyor. Eğer büyük veri setleriyle çalışıyorsan, kullanıcıya veri aktığını hissettirmek istiyorsan ve aynı zamanda sade bir UI ile fark yaratmak istiyorsan:

🎯 Progressive JSON + Yazı Efekti ikilisi seni çok ileri taşıyacaktır.