Sunucusuz Statik Sitelerinize Dinamik Özellikler Ekleyin
Konuya bakış Statik siteler bir an yaşıyor ve bu mantıklı. HTML, CSS ve JavaScript dosyalarından oluşan bir klasörün yüklenmesi hızlı, barındırılması ucuz ve kırılması çok zordur. Astro, Eleventy ve Hugo gibi araçlar bu klasörü sizin için…
Konuya bakış
Statik siteler bir an yaşıyor ve bu mantıklı. HTML, CSS ve JavaScript dosyalarından oluşan bir klasörün yüklenmesi hızlı, barındırılması ucuz ve kırılması çok zordur. Astro, Eleventy ve Hugo gibi araçlar bu klasörü sizin için Markdown dosyalarından ve şablonlarından oluşturur. Netlify, Vercel ve Cloudflare Pages gibi sunucular daha sonra CDN’den gelen sonuçları genellikle ücretsiz olarak sunar.
O zaman sitenizin gerçekten bir şeyler yapması gerekiyor. Bir okuyucu yorum bırakmak istiyor veya birisi size e-posta göndermek istiyor. Belki canlı fiyatları göstermek, giriş bilgilerinin arkasına bir sayfayı gizlemek veya lansmandan önce e-posta adreslerini toplamak isteyebilirsiniz. Çoğu geliştirici bu noktada bir arka uca ulaşır.
Bir Express uygulamasını çalıştırıyorlar, bir veritabanı ekliyorlar ve bir barındırma planı seçiyorlar. Artık bir sunucuları var ve sunucuların sonsuza kadar bakıma ihtiyacı var. İyi haber şu ki çoğu zaman buna ihtiyacınız yok. Küçük bir sitedeki dinamik özelliklerin çoğu, kendinize ait bir sunucunuz olmadan da sorunsuz çalışır; bu nedenle, sorun hakkında nasıl düşüneceğiniz aşağıda açıklanmıştır.
Nasıl işliyor?
ı ve Oturum Açma İşlemleri Yorumlar, Arama ve Ödemeler Büyüdüğünüzde Bilin Statik Dondurulmuş Anlamına Gelmez “Statik” kelimesi HTML’nizin tarayıcıya nasıl ulaştığını tanımlar, tarayıcıya ulaştıktan sonra ne olacağını değil.
Statik bir site yine de istediğiniz tüm JavaScript’i çalıştırabilir. Veri getirebilir, sayfayı yeniden yazabilir, tıklamaları dinleyebilir ve herhangi bir genel API’ye başvurun. Yapamayacağı tek şey var; o da sayfa gönderilmeden önce kodunuzu çalıştırmaktır. Bu, sır saklayamayacağı, özel bir veritabanını sorgulayamayacağı veya kimin sorduğuna göre karar veremeyeceği anlamına gelir.
Bu tek sınır tüm tasarım sorununu oluşturur. Bunu açıkça gördüğünüzde gerisi sadece sıralamadır. Bazı işler tarayıcıya aittir, bazıları kiraladığınız bir hizmete aittir ve küçük bir dilimin özel bir yerde çalıştırılması gerekir. Tarayıcının Halihazırda Yaptıklarıyla Başlayın Yığınınıza herhangi bir şey eklemeden önce platformu kontrol edin, çünkü tarayıcılar çoğumuzun kullandığından daha fazla güçle birlikte gelir.
Pratik değerlendirme
Fetch API, JSON’u herhangi bir genel uç noktadan çeker.
Bir hava durumu widget’ı, GitHub etkinlik akışı, para birimi dönüştürücü, canlı skor veya Mastodon zaman çizelgesi: Veriler herkese açık olduğundan ve uç noktanın anahtara ihtiyacı olmadığından bunların her biri tarayıcıdan mutlu bir şekilde çalışır. Getirmeyi yazın, yükleme ve hata durumlarını doğru şekilde ele alın ve devam edin.
Form Gönderimlerini İşleme Formlar çoğu statik sitenin ilk gerçek duvarına çarptığı yerdir çünkü bir gönderimin ziyaretçilerinizin göremeyeceği bir yere gitmesi gerekir. e İstemci tarafı koduna veritabanı şifresi koyamazsınız ve doğrudan tarayıcıdan e-posta gönderemezsiniz. Neyse ki bu sorun birçok kez çözüldü ve çoğu statik ana bilgisayar formları sizin için yönetecek.
Nelere dikkat edilmeli
Netlify Forms’un form etiketinizde ekstra bir özelliğe ihtiyacı vardır. Bundan sonra Netlify her gönderimi uçta yakalar, bir kontrol panelinde saklar ve size e-posta gönderir veya bir web kancasına ping gönderir. Bazen bundan daha fazlasına ihtiyacınız olur.
Spam filtreleri, dosya yüklemeleri, koşullu mantık, çok adımlı akışlar, form içindeki ödemeler veya birleştirici kod içermeyen bir e-tabloya giren satırların tümü özel bir araca işaret eder. En iyi form oluşturucuların bu derlemesi, seçeneklerinizi karşılaştırmanın iyi bir yoludur; çünkü asıl farklar mantığa, entegrasyonlara ve işaretleme üzerinde ne kadar kontrole sahip olduğunuza bağlıdır.
Her iki durumda da seçim mülkiyetle ilgilidir. Kendi form uç noktanızı yazın ve GDPR kapsamında gelen doğrulama, hız sınırları, spam savunması, depolama, uyarılar ve silme isteklerinin sahibi olun. Bu bir iletişim formu için çok fazla iş demektir. Form ürününüzün bir parçası olduğunda onu kendiniz oluşturun ve form yalnızca insanların size ulaşmasının bir yolu olduğunda onu kiralayın.
Geri Kalanlar İçin Sunucusuz İşlevler Er ya da geç, bir isteği imzalamak, bir API anahtarını gizlemek veya bir yanıtı tarayıcı görmeden önce yeniden şekillendirmek için birkaç satırlık kodu özel olarak çalıştırmanız gerekecektir. Sunucusuz işlev tam olarak budur ler içindir ve tamamen statik bir siteden mümkün olan en küçük adım uzaktadırlar.
Bir dosyayı bir klasöre bırakırsınız ve ana makineniz onu bir sonraki dağıtımda bir URL’ye dönüştürür. Kurulumun tamamı budur ve Netlify İşlevlerinde, Vercel İşlevlerinde ve Cloudflare Sayfa İşlevlerinde aynı şekilde çalışır.
Kod kısa kalıyor: varsayılan eşzamansız işlev işleyicisini dışa aktar (istek) { const res = wait fetch(“https://api.example.com/data”, { başlıklar: { Yetkilendirme: `Bearer ${process.env.API_KEY}` }, }); const veri = wait res.json(); return Response.json({ toplam: data.items.length }); } Anahtarınız ana bilgisayardaki bir ortam değişkeninde bulunur, dolayısıyla tarayıcı /api/handler’ı çağırır ve onu asla görmez.
Canlı tutulacak bir sunucu yok, yama yapılacak bir işletim sistemi yok ve sakin bir günde fatura yok. Kimlik bilgisi gerektiren her şey için doğru adres burası. Yeniden Gönder veya Posta İşareti aracılığıyla e-posta göndermek, bir AI modelini çağırmak, bir webhook imzasını kontrol etmek veya aksi takdirde anahtarı bir gün içinde sızdırılacak olan ücretli bir API’yi proxy yapmak için kullanın.
Kiralayabileceğiniz Veritabanları ve Oturum Açma Bilgileri State, insanların bir sunucuya ihtiyaç duyduğunu düşündüğü son parçadır, ancak öyle değildir. Supabase, Postgres’i satır düzeyinde güvenliğe sahip bir REST API’nin arkasına yerleştirir. Bu kurallar veritabanının kendisinde bulunur, böylece onu tarayıcıdan sorgulayabilir ve yine de güvende olabilirsiniz.
Firebase farklı bir veri modeliyle hemen hemen aynısını yaparken Cloudflare D1 ve Turso size uçta SQLite sağlar. Girişler aynı yolu takip eder rn. Clerk, Auth0 ve Supabase Auth’un tümü oturumları, parola sıfırlamaları, sosyal oturum açma işlemlerini ve bir istemci SDK’sının arkasındaki iki faktörlü kodları yönetir.
Kimlik doğrulamanın doğru şekilde yapılması gerçekten zordur, bu nedenle burada denetlenen bir hizmete güvenmek tembellik değildir. Bu mantıklı bir risk yönetimidir. Son birkaç ortak özelliğin de anında yanıtları vardır. Giscus, GitHub Tartışmalarını komut dosyası etiketi içeren ve hiçbir veritabanı olmayan bir yorum kutusuna dönüştürür.
Pagefind, siteniz bunu oluşturup statik dosyalar olarak gönderirken bir arama dizini oluşturur; böylece tam metin aramanın çalışma zamanında size hiçbir maliyeti yoktur. Şerit parayı kapsar. Ödeme Bağlantıları ve Ödeme, düz bir bağlantıyla bir şeyler satmanıza olanak tanır ve Stripe, kartı, vergiyi ve makbuzu yönetir. Kendi siteniz asla kart verilerine dokunmaz.
Ne Zaman Büyüdüğünüzü Bilin Bu modelin gerçek bir tavanı var ve onunla savaşmak yerine bunun farkında olmalısınız. Birkaç işarete dikkat edin: mantığınız artık altı hizmete yayılmış durumda, aylık SaaS faturanız küçük bir sunucunun maliyetini geçiyor, soğuk başlangıçlar gerçek kullanıcılara zarar veriyor veya uzun işlere, kuyruğa veya saatlerce açık kalan bir sokete ihtiyacınız var.
O gün geldiğinde, normal bir uygulama sunucusu daha basit bir araçtır, o yüzden harekete geçin. O zamana kadar bu kurulum size önemli şeyleri satın alacaktır. Siteniz varsayılan olarak hızlı kalır, saldırı yüzeyiniz küçük kalır ve zamanınız tesisat yerine ürüne harcanır. Tarayıcıyla başlayın, bir sırra ihtiyacınız olduğunda bir işlev ekleyin, Sert kısımları kiralarım. Umarım bu makaleyi beğenmişsinizdir.
Benimle LinkedIn’den bağlantı kurabilirsiniz. gönderiler. Ücretsiz kodlamayı öğrenin. freeCodeCamp’in açık kaynak müfredatı 40.000’den fazla kişinin geliştirici olarak iş bulmasına yardımcı oldu. Başlayın REKLAM
İlgili yazılar
- iFi GO bar Kensei İncelemesi: Üstün Ses ve Gelişmiş Özellikler
- Mac’te APFS Disk Bölümleri Eklemek İçin Pratik Rehber
Editörün Notu
Sunucusuz mimarilerle dinamik özellikler eklemek, performans ve maliyet avantajlarını korurken kullanıcı etkileşimini artırır; bu sayede statik sitenizi modern web uygulamalarına dönüştürebilirsiniz.
