Headless WordPress Hakkında Her Şey

💡 Özet (TL;DR):

• Nedir? WordPress'in yönetim panelini (backend) veri sunan bir API olarak kullanıp, kullanıcı arayüzünü (frontend) Next.js veya React gibi modern teknolojilerle bağımsız olarak kodlama mimarisidir.
• Avantajları: Yüksek hız/performans, sınırsız tasarım özgürlüğü, bağımsız ölçeklenebilirlik ve tek backend ile web/mobil uygulamaları besleyebilme esnekliği.
• Dezavantajları: Tema ve eklenti kolaylığından vazgeçilmesi, çift sunucu yönetimi, ek geliştirme maliyeti ve SEO/yönlendirme (redirect) gibi işlemleri manuel kodlama zorunluluğu.

WordPress, gerek çekirdeği gerek topluluk desteği ile güçlü fakat birbirine sıkıca bağlı bir frontend ve backend yapısı sunuyor. Geniş tema ve eklenti seçenekleri ve beraberindeki büyük geliştirici topluluğu, çok farklı kullanım alanlarındaki ihtiyaçlara çözüm üretilmesini de sağlıyor.

Öte yandan akıllı cihazların (telefon, saat, tv vb.) yaygınlaşması, frontend tarafında gelişen yeni teknik ve teknolojiler içerik yönetim sistemlerinden beklentileri başka bir seviyeye taşıdı. WordPress bu konuda hala güçlü bir oyuncu olsa da belirli durumlarda yetersiz gelmeye başladı.

Headless WordPress Nedir?

Backend ve frontend'in mimari olarak birbirinden ayrı tasarlandığı içerik yönetim sistemi uygulamalarına genel olarak Headless CMS adı veriliyor. Backend ve frontend tarafındaki bağımlılığı ortadan kaldırılmış ve bize sadece backend olarak hizmet edecek WordPress uygulamasına ise Headless WordPress adını veriyoruz.

Neden Headless WordPress?

Headless WordPress Avantajları Nedir?

Headless WordPress aşağıdaki avantajlarla birlikte geliyor:

• Hazır bir tema değil, kurumunuza özel yeni bir tasarım yapılacaksa frontend ekibinin WordPress tema geliştirme bilgisi olması gerekmez. Frontend için istenen teknoloji kullanılabilir. Farklı cihazlar için yapılacak tasarımlarda farklı teknolojiler tercih edilebilir.
• Frontend ve backend bağımlılığı ortadan kalkar. Tek bir frontend uygulaması ile birden fazla kaynaktan veri alabilir, farklı yerlerde kullanabilirsiniz.
• Frontend ve backend ölçeklemeleri ayrı ayrı yapılabilir.
• Farklı kanallara tek merkezden veri sağlamanızı sağlar. Hem web siteniz hem de mobil uygulamanız aynı kaynaktan beslenebilir.

Karşılaştırma: Klasik WordPress vs. Headless WordPress

Hangi Durumlarda Headless WordPress Uygun Değil?

Headless WordPress Dezavantajları Nedir?

Headless WordPress hem nakit hem de vakit anlamında daha maliyetli bir çözüm. Peki neden?

• Headless WordPress ile birlikte klasik WordPress'in sağladığı "temaları kur, eklentileri kur, ayarları yap, işte hazır site" kolaylığından vazgeçmeniz gerekir. Headless WordPress genellikle frontend için ayrı bir geliştirme ekibiyle çalışmanızı, en azından full-stack bir geliştiricinin frontend'i ayrıca kodlamasını gerektirir. Backend tarafı için de Headless WordPress yönetimi konusunda tecrübeli, gerektiğinde buna yönelik eklentiler yazabilecek bir ekibe ya da geliştiriciye ihtiyaç duyabilirsiniz.
• Backend için ayrı, frontend için ayrı bir sunucu altyapısı yönetmeniz gerekebilir. Küçük yapılarda ikisinin de aynı sunucu üzerinde barındırılması mümkündür, ancak o derece küçük bir yapıda Headless WordPress'e gerçekten ihtiyacınız var mı, bu da bir soru işaretidir.
• Headless WordPress'te WordPress'in tüm olanaklarını kullanamayabilirsiniz. En önemlisi WordPress'in geniş eklenti desteğini büyük oranda kaybetmiş olursunuz ve ekibinizin en temel bazı işlevler için bile özel çözümler üretmesi gerekebilir.

Geliştiricilerin Bilmesi Gerekenler

Bu web sitesini klasik yapısından ilk kez ayırdığımda, onu bir headless WordPress mimarisi üzerine kurmuştum. Arka tarafta GraphQL üzerinden hizmet veren bir WordPress altyapısı, ön tarafta ise Next.js (React.js) ile yazılmış bir arayüz yer alıyordu. (Sitenin şu anki güncel hali tamamen statik bir Nuxt projesidir).

Klasik bir özel tasarım WordPress teması hazırlasam 3-4 günde bitecek o ilk headless geçişi, her şeyi sıfırdan kurmak gerektiği için neredeyse bir ay sürdü. Aşağıda, headless yapıda manuel olarak yönetmek zorunda kaldığım ve klasik WordPress'te hiç düşünmenize gerek olmayan işleri listeledim:

• REST API'nin daha hantal olacağını düşündüğüm için GraphQL tabanlı bir API yapısı oluşturdum (eklenti yardımıyla).
• Klasik WordPress'te özel yazı tipleri, çoklu dil desteği, SEO, özel alanlar vb. konularda eklentileri kurup birkaç ayar yaparak yola devam etmek mümkünken; headless yapıda hem bunların sorgularıyla tek tek uğraşıyor hem de ön yüzdeki entegrasyonlarını kendiniz kodluyorsunuz.
  Örn. Yoast SEO kurup ayarları yaptığınızda iş bitmiyor; frontend tarafında ilgili meta etiketlerinin (tag) basılması işini kendiniz üstleniyorsunuz.
• Artık sizin için hiçbir kod parçası frontend'e otomatik olarak enjekte edilmeyecek; verileri alıp gereken her şeyi frontend tarafına manuel olarak basmanız gerekir.
• Yoast'un yönlendirme özelliği veya Redirection eklentisi ile kolayca yönetebileceğiniz yönlendirme işlemleri için frontend tarafında ciddi kod yazmanız gerekiyor. Ziyaretçiyi karşılayan taraf frontend olduğu için yönlendirmeleri de orası yapmalıdır. Bunun için hem frontend hem de backend tarafında entegre kod yazmalısınız.
• Klasik WordPress'te Redirection eklentisi 404 hatalarını yakalayıp kayıt tutarken, headless yapıda 404 durumunda bu kaydı manuel oluşturmanız gerekir. Bunun için de hem frontend hem de backend tarafında ekstra kod yazmanız gerekecektir.
• Normalde eklentilerle kolayca gerçekleştirdiğiniz form gönderme işlemleri artık daha zor bir hal alıyor. Frontend içerisine statik olarak yazılmış formlar yerine backend'den yönetilebilir dinamik formlar oluşturmak istiyorsanız; formun gösterimi, doğrulaması ve gönderimi için ekstra kod yazmanız gerekir.
• Artık bir eklenti yükleyip hemen kullanmaya başlayamayacaksınız. Eğer çok elzemse, hem frontend hem de backend tarafında entegrasyon için ekstra kod yazmanız gerekebilir. Bazı durumlarda eklentiyi entegre etmeye uğraşmaktansa işlevi sıfırdan kodlamak daha mantıklı olabilir.

Yolun ortasında "nereden bulaştım" dediğim anlar olsa da, hem öğrenmek istediğim hem de süreçten keyif aldığım için bütün bunlara katlandım. Şunu rahatlıkla söyleyebilirim ki; Headless WordPress kişisel bir web sitesi veya basit bir kurumsal site için fazla lüks bir kaçış. Ancak yüksek trafiğe sahip bir haber portalı veya e-ticaret sitesi için performanstan güvenliğe kadar çok şey katabilir.

Headless WordPress Geliştirmesi

Benim deneyimim full-stack yönündeydi; yani hem WordPress backend tarafı hem de Next.js frontend tarafı için tüm kodları kendim yazdım. Oldukça zorlayıcı ama bir yandan da keyifli bir süreç oldu. Sonunda bazı şeyler hala meşakkatli olsa da neyi nasıl yapabileceğimi bilir hale geldim. Yukarıda belirttiğim gibi gerekli adımların birçoğu için ayrı rehber yazıları hazırlamayı düşünüyorum; fakat sadece o yazılar yeterli olmayacaktır, çok farklı kaynaklardan araştırma yapmanız ve saatlerce kafa yormanız gerekecektir.

Serinin takip eden yazılarında görüşmek üzere, hoşça kalın.