Sunucuda render edilen React, daha yayına çıkmadan bütçelenmiş.
Performans bütçesi tanımlı, erişilebilir, sunucuda render edilen web uygulamaları geliştiren React ve Next.js mühendisleri — Odeontech’in kendi ürünlerinin ve müşteri web işlerimizin arkasındaki ön yüz teknoloji yığını.
- TypeScript
- React
- Next.js
- Tailwind
- Storybook
- Playwright
Arayüzleri React ile kuruyor, Next.js ile yayına alıyoruz.
Kendi ürün konsollarımız — sadakat operatörünün ekranları, satış planı tasarımcısı, taşıyıcı portalı — React üzerine kurulu ve Next.js ile sunuluyor. Bu ikiliyi yalın bir nedenle seçtik: sunucu tarafında render, hızlı ilk boyama ve kutudan çıktığı haliyle arama motoru dostu sayfalar sağlıyor; bileşen modeli büyük arayüzleri bakımı yapılabilir tutuyor; ekosistem ise altyapı işlerini nadiren elle yazacağımız kadar derin.
Özellikle Next.js, eskiden elle çözdüğümüz sorunları çözdü: yönlendirme, kod bölme, görsel optimizasyonu, rota bazında önbellekleme ve sunucu ile istemci kodu arasındaki sınır. Server Components, veri çekmeyi verinin bulunduğu yere taşıyor ve tarayıcıya gönderilen JavaScript’i azaltıyor — Core Web Vitals bütçesinin ödüllendirdiği de tam olarak bu.
Her şeyin cevabı değil. Etkileşim içermeyen, yalnızca içerikten oluşan bir site için statik bir üretici daha iyi sonuç verebilir; yoğun etkileşimli bir tuval ya da gerçek zamanlı bir pano, ince bir API ile istemci öncelikli bir mimari isteyebilir. Kullanıcı yolculuğundan başlıyor, ona uyan render modelini seçiyor ve sonra onu bir bütçeye bağlıyoruz.
React ve Next.js ile yayına aldığımız altı tür ön yüz.
Müşteriye dönük web uygulamaları
Hesap alanları, ödeme akışları, rezervasyon yolculukları ve self servis portallar — hız ve arama için sunucuda render edilen, yalnızca etkileşimin gerektirdiği yerde hydrate edilen, rota bazında performans bütçesine göre ölçülen çözümler.
Operatör konsolları ve arka ofis uygulamaları
Tablolar, filtreler, formlar ve onaylar içeren veri yoğun iç araçlar. Klavye kullanımını, uzun oturumları ve büyük tabloları arayüz çökmeden karşılayacak şekilde tasarlıyoruz.
Pazarlama ve içerik siteleri
Payload CMS ya da tercih ettiğiniz bir headless CMS ile Next.js: editörler devreye alma gerekmeden yayınlar ve sayfalar edge’de render edilir.
Tasarım sistemleri ve bileşen kütüphaneleri
Storybook’ta token’lar, temel yapı taşları ve belgelenmiş bileşenler; CI hattında görsel regresyon testleri ve erişilebilirlik kontrolleri, böylece her ekip aynı parçalardan inşa eder.
Progressive web uygulamaları
Native uygulamanın gerekçelendirilemediği saha ve perakende ekipleri için kurulabilir, çevrimdışına dayanıklı web uygulamaları — service worker’lar, arka plan senkronizasyonu ve açıklayabileceğiniz bir önbellek stratejisi.
Mikro ön yüz entegrasyonu
Legacy bir ön yüzün kademeli olarak değiştirilmesi: Next.js aynı alan adının arkasında rotaları teker teker devralır, kimlik doğrulamayı ve tasarım token’larını kalan kısımla paylaşır.
Ne zaman tercih etmeli.
Ürün; ilk yüklemede hızlı olması, arama motorlarınca dizinlenebilmesi ve birkaç yıl boyunca birden fazla ekip tarafından sürdürülmesi gereken bir web uygulamasıysa React ve Next.js’i tercih edin. Özellikle TypeScript bir arka uçla iyi uyuşur: paylaşılan tipler API’den bileşene kadar taşınır. Web için tek bir işe alım profili ve mobil için React Native’e giden bir yol isteyen kurumlara da uygundur.
Statik bir üreticinin de aynı ölçüde karşılayacağı beş sayfalık bir tanıtım sitesi için, React Native ya da Flutter’ın dürüst cevap olduğu native hissiyatlı bir mobil deneyim için ya da kurumunuz zaten olgun bir Angular veya Vue ortamını buna uygun araç ve ekiple işletiyorsa tercih etmeyin. Çalışan bir ön yüzü sırf olsun diye React’e taşımak bir maliyettir, iyileştirme değil.
Veri sunucuda çekilir, etikete göre önbelleklenir, yazma anında yeniden doğrulanır.
export default async function Statement({ params }: Props) {
const statement = await getStatement(params.memberId, {
// cached at the edge until a redemption invalidates the tag
next: { tags: [`member:${params.memberId}`], revalidate: 300 },
});
return (
<StatementTable rows={statement.rows} currency={statement.currency}>
<RedeemButton memberId={params.memberId} />
{/* the only client component on this route */}
</StatementTable>
);
}Bir Next.js ön yüzü mevcut ortamın geri kalanına nasıl oturur.
Ön yüzlerden beklediklerimiz.
- Rota bazında performans bütçeleri. Her rota için LCP, INP ve CLS hedefleri, her pull request’te Lighthouse CI ile kontrol edilir; aşılan bir bütçe lansmanı değil, derlemeyi düşürür.
- Erişilebilirlik bir geçiş kriteridir. WCAG 2.1 AA: anlamsal işaretleme, klavye yolları, odak yönetimi ve otomatik axe kontrolleri — ayrıca her yeni desende manuel bir gözden geçirme.
- Önce sunucu, gerektiğinde istemci. Bileşenler varsayılan olarak sunucuda render edilir;
'use client'bir alışkanlık değil, kod incelemesinde kayda geçen bilinçli bir karardır. - Baştan sona tipli. API yanıtları OpenAPI veya GraphQL şemasından tiplenir; prop’lar tiplenir; formlar arka ucun kullandığı zod şemasıyla doğrulanır.
- Bileşen klasörü değil, tasarım sistemi. Token’lar, belgelenmiş temel yapı taşları ve görsel regresyon testleriyle birlikte Storybook hikâyeleri, böylece ekipler büyürken arayüz tutarlı kalır.
- Testler kullanıcının olduğu yerde. Para kazandıran akışlar için Playwright yolculukları, zorlu etkileşimler için bileşen testleri ve framework’ü test eden hiçbir şey yok.
- Tarayıcıda gözlemlenebilirlik. Gerçek kullanıcı Web Vitals ölçümleri, source map’li hata takibi ve panolarda sürüm işaretleri, böylece gerilemeler bir kaynağa bağlanabilir.
- Varsayılan olarak güvenlik. Katı CSP, istemci paketlerinde sır yok, bağımlılık taraması ve elle yazılmış oturumlar yerine bir sağlayıcı tarafından yürütülen kimlik doğrulama.
Genellikle bununla birlikte devreye alınanlar.
- Vercel’de ya da kendi Kubernetes kümenizde, her pull request için önizleme ortamları olan bir Next.js uygulaması
- Storybook’ta token’lar, hikâyeler ve görsel regresyon testleriyle belgelenmiş bir bileşen kütüphanesi
- CI hattında Lighthouse CI ve axe kontrolleri, bütçeler yazılı olarak
- Kritik yollar için her önizlemede çalışan Playwright yolculukları
- Gerçek kullanıcı izleme, hata takibi ve bir Web Vitals panosu
Sık sorulan sorular
Komşu teknolojiler ve bunları kullanan hizmetler.
Performans bütçesine göre yayına alan React mühendislerine mi ihtiyacınız var?
Bize ürünü, önem verdiğiniz rotaları ve ihtiyaç duyduğunuz kıdem seviyesini anlatın. İsimleriyle bir ekip önerelim ya da ön yüz uzmanlarını sizin ekibinize yerleştirelim.