Next.js ile Web Uygulaması Geliştirmek: Modern B2B Portalları Neden Farklı İnşa Edilir

Birçok B2B portalı "girişli daha güzel bir web sitesi" olarak hayata başlar. Sonra roller, veri hacimleri, entegrasyonlar ve raporlar büyür — ve bir broşür için yeterli olan mimari artık bir iş sürecini taşıyamaz.

Modern bir B2B portalı bir tasarım konusu değildir. Bir mimari karardır: doğru veriler ekrana hızlı, güvenli ve doğru rol için nasıl gelir — ve yük altında hızlı, aramada görünür kalır mı?

"Girişli web sitesi" neden yetersiz kalır

Bir pazarlama web sitesi herkese aynı şeyi render eder. Bir B2B portalı bu müşteri, bu rol, bu yetkiler için render eder — ERP, depo veya muhasebeden canlı veriyle.

Bu üç şeyi temelden değiştirir: veri sunucuda güvenli çekilmeli (tarayıcıda değil), yetkiler her erişimde geçerli olmalı (sadece menüde değil) ve sayfa yine de hızlı ve — herkese açıksa — bulunabilir olmalı.

Next.js'in App Router'ı ve React 19 tam da buraya girer.

Server Components: veriyi güvenli olduğu yerde çek

Klasik modelde tarayıcı boş bir sayfa yükler, sonra API çağırır, sonra içerik render eder. Bu yavaştır, API yapısını açığa çıkarır ve mantığı kullanıcının görebileceği yere taşır.

React Server Components bunu tersine çevirir: veriye ihtiyaç duyan bileşen onu sunucuda çeker — iç sistemlere erişimle, sır'ları tarayıcıya vermeden. Tarayıcı bitmiş, yetki kontrollü HTML alır. Daha az client JavaScript, daha hızlı ilk görüntü, daha net güvenlik sınırı.

Bir B2B portalı için bu bir performans detayı değil, yetkilerin ve veri erişiminin asıldığı mimaridir.

Streaming: yavaş sistemlere rağmen hızlı sayfalar

B2B verisi çoğu zaman ağır yabancı sistemlerden gelir. Tüm sayfa en yavaş raporu beklerse, kullanıcı bekler.

Streaming/Suspense iskeleti ve hızlı parçaları hemen verir, yavaş raporu hazır olunca iter. Kullanıcı boş bir spinner yerine saniyeler içinde faydalı bir şey görür — günlük operasyonda benimsenme için belirleyici.

Core Web Vitals bir iş konusudur

Performans yalnızca geliştirici konforu değildir. Google gerçek kullanıcı deneyimini Core Web Vitals ile değerlendirir — ve bunlar görünürlüğü ve dönüşümü etkiler.

Üç metrik ve "iyi" eşikleri:

LCP (Largest Contentful Paint) ≤ 2,5 sn — ana içeriğin ne kadar hızlı göründüğü.
INP (Interaction to Next Paint) ≤ 200 ms — sayfanın girdiye ne kadar hızlı yanıt verdiği. INP, Mart 2024'te FID'in yerine Core Web Vital oldu ve yanıt verebilirliği çok daha sıkı ölçer.
CLS (Cumulative Layout Shift) ≤ 0,1 — düzenin ne kadar stabil kaldığı.

Ağır bir portal yalnızca sabır değil; herkese açık sayfalarda sıralama, iç kullanıcılarda verimlilik kaybettirir. INP tam da az client JavaScript gönderen mimariyi — yani sunucu tarafı render'ı — ödüllendirir.

SEO sonradan akla gelen değil, mimaridir

Herkese açık kısmı olan B2B portallarında (hizmetler, giriş, yardım, blog) bulunabilirliği mimari belirler: temiz, okunabilir route'lar, sunucuda render edilmiş HTML, doğru metadata ve canonical'lar, yapılandırılmış veri (Schema.org), gerçek bir sitemap ve çok dilde doğru hreflang alternatifleri.

Sunucu tarafı render ile bu doğal bir özelliktir — saf bir client SPA ile sürekli bir mücadeledir.

Asıl zorluk: roller ve yetkiler

Bir B2B portalının en pahalı yeri nadiren arayüzdür. "Kim neyi görebilir ve değiştirebilir" sorusudur — kiracılar, roller, onaylar ve API erişimi boyunca.

Server Components yardım eder çünkü veri erişimi sunucuda, dolayısıyla denetlenebilir kalır. Ama yetkiler her erişimde zorlanmalı, sadece menü öğelerini gizleyerek değil. Görünürlüğü yetkilendirmeyle karıştıran, güzel UI'lı bir güvenlik sorunu inşa eder — yapay zekâ özellikleri etrafındaki OWASP bağlamında tartıştığımız risk sınıfı, veri taşıyan her web uygulaması için geçerlidir.

Tech-stack gerçeği

Next.js (App Router), React 19 ve TypeScript kendi başına amaç değil, tam da bu gereksinimlere bir cevaptır: sunucu tarafı veri erişimi, az client JS, iyi Web Vitals, SEO yeteneği ve veri sınırlarında tip güvenliği. Önemli olan framework'ün logosu değil, mimarinin rolleri, performansı ve bulunabilirliği aynı anda taşımasıdır.

B2B portal projesi için kontrol listesi

Roller, kiracılar ve onaylar UI tasarımından önce netleşti mi?
Veri tarayıcıda değil sunucuda mı çekiliyor?
Yetkiler sadece menüde değil her erişimde mi geçerli?
Sadece "hızlı olsun" değil bir performans hedefi (LCP/INP/CLS) var mı?
Herkese açık kısım SEO-yetenekli mi (SSR, metadata, sitemap, hreflang)?
Yabancı sistem gecikmeleri streaming ile yumuşatılıyor mu?
Bir ilk kapsam haftalar içinde üretime kesilebilir mi?

Sık sorulan sorular

Normal bir SPA yetmez mi? SEO ihtiyacı olmayan iç bir araç için çoğu zaman evet. Herkese açık bulunabilirlik, sıkı performans hedefleri ve güvenli sunucu tarafı veri erişimi bir araya gelince sunucu tarafı render daha sürdürülebilir seçim olur.

Next.js zorunlu mu? Hayır. Ama gereksinimler (SSR, sunucu tarafı yetki, Web Vitals, SEO) gerçek. Next.js bunlara kanıtlanmış bir cevaptır, dogma değil.

En yaygın mimari hata nedir? Yetkileri zorlanan erişim kontrolü yerine gizlenmiş UI ile yapmak. Güzel ama güvensiz.

İlk portal sürümü ne kadar büyük? Bir rol, bir çekirdek süreç, gerçek veri, haftalar içinde üretimde — sonra genişlet. Big-bang yok.

Sonuç

Modern bir B2B portalı farklı inşa edilir çünkü bir web sitesinden farklı bir şeydir: daha rol tabanlı, daha veri odaklı, daha güvenlik-kritik ve yine de hızlı ve bulunabilir. Server Components, streaming ve Core Web Vitals disiplini bunların hepsini aynı anda mümkün kılan araçlardır — tasarım değil.

İlgili okuma

KOBİ'ler için Özel Yazılım mı Hazır Çözüm mü? — portal inşa edilmeden önce: yap mı satın al mı?
Web Uygulamaları için Sızma Testi — veri taşıyan bir portalın güvenlik tarafı.

Sonraki adım

Bir müşteri portalı veya veri odaklı bir B2B uygulaması mı planlıyorsunuz? Kısa bir ihtiyaç değerlendirmesiyle başlayın. Kod yazılmadan önce rolleri, veri erişimini ve gerçekçi bir ilk sürümü netleştiririz.

Kaynaklar

Next.js, App Router Documentation — nextjs.org
React, React 19 — react.dev
Google Search Central, Core Web Vitals and Google Search — developers.google.com
web.dev, Web Vitals — web.dev