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ı ve ihtiyaçlara çözüm üretmesini 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 birbirine ayrı olarak 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 kullanılabilir.
  • Frontend = Backend bağımlılığı ortadan kalkar. Tek bir frontend uygulaması ile birden fazla kaynaktan veri alabilir, farklı yerlerde kullanabilirsiniz.
  • Frontend be 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.

Hangi durumlarda Headless WordPress uygun değil?
Headless WordPress Dezavantajları Nedir?

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

  • Headless WordPress ile birlikte klasik WordPress’in sağladığı “temaları kur, eklentileri kur, ayarları yap, işte hazır site” gücünden vazgeçmeniz gerekebilir. Headless WordPress genellikle, Frontend için ayrı bir geliştirme ekibi ile çalışmanız, en azından full stack bir geliştiricinin frontend’i ayrıca geliştirmesini gerektirir. Backend için de Headless WordPress yönetimi konusunda tecrübeli, gerektiğinde buna yönelik eklentiler yazabilecek bir ekip ya da geliştirici ile çalışmanız gerekebilir.
  • Backend için ayrı, frontend için ayrı bir sunucu alt yapısı yönetmeniz gerekebilir. Küçük yapılarda aynı sunucu üzerinde olması da mümkün, ama o derece küçük bir yapıda Headless WordPress’e gerçekten ihtiyacınız var mı o da bir soru işareti.
  • Headless WordPress’de 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ı şeyler için bile özel çözümler üretmesi gerekebilir.

Geliştiricilerin Bilmesi Gerekenler

Şu anda bulunduğunuz bu sayfa Headless WordPress yapısında bir sayfa. Arka tarafta graphql üzerinden hizmet veren bir WordPress, ön tarafta ise Next.js (React.js) ile yazılmış bir önyüz var. Yazının bundan sonraki bölümünde geliştirici tarafında nelerle uğraşılması gerekli bunları listeleyeceğim. Klasik bir özel tasarım WordPress teması hazırlasam 3-4 günde bitecek bu sayfanın tasarımı Headless yapıda neredeyse bir ay sürdü, peki neden?

  • Rest Api’nin daha hantal olacağını düşündüğüm için GraphQL tabanlı bir API oluşturdum. (Eklenti ile)
  • Klasik WordPress’de özel yazı tipleri, çok dil desteği, seo, özel alanlar vb. konularda eklentileri kurup 2-3 ayar yaparak devam etmek mümkün. Headless yapıda hem bunların sorguları ile ayrı ayrı uğraşıyor, hem de ön yüzdeki uygulamalarını da kendiniz yapıyorsunuz.
    Örn. Yoast SEO kurup, ayarları yaptığınızda iş bitmiyor, frontend tarafında ilgili tag’lerin basılması işini kendiniz yapıyorsunuz.
  • Artık sizin için hiç bir kod parçası frontend’e otomatik olarak yazılmayacak, sizin verileri alıp, gereken her şeyi frontend’e manuel basmanız gerekli.
  • Yoast’un redirect özelliği veya Redirection eklentisi ile kolayca yönetebileceğiniz yönlendirme işlemi için frontend tarafında ciddi kod yazmanız gerekiyor. Ziyaretçiyi karşılayan frontend tarafı olduğu için yönlendirmeleri de orası yapmalı. Bunun için hem frontend, hem backend tarafında kod yazmalısınız.
  • Klasik WordPress’de redirection eklentisi 404’leri yakalayıp kayıt tutarken, artık sizin 404 durumunda bu kaydı manuel oluşturmanız gerekiyor. Bunun için de hem frontend, hem backend tarafında kod yazmalısınız.
  • Normalde eklentilerle kolayca gerçekleştirdiğiniz form gönderme işlemi artık daha zor bir hal alıyor. Frontend içersine hard-coded olarak yazılmış formlar yerine backend’den yönetilebilir formlar oluşturmak istiyorsanız, formun gösterimi, doğrulama ve gönderimi için ekstra kod yazmanız gerekecek.
  • Artık bir eklenti yükleyip hemen kullanmaya başlayamayacaksınız, eğer çok elzemse hem frontend hem de backend tarafında ekstra kod yazmanız gerekebilir. Bazı durumlarda eklentiyi entegre etmeye uğraşmaktansa sıfırdan kod yazmak daha mantıklı bile olabilir.

Yolun ortasında nereden bulaştım dediğim anlar olsa da, ben hem öğrenmek istediğim, hem keyif aldığım için bütün bunlara katlandım. Şunu söyleyebilirim ki Headless WordPress kişisel bir web sitesi veya basit bir kurumsal site için fazla lüks. Yüksek hite sahip bir haber veya e-ticaret sitesi içinse çok şey katabilir.

Headless WordPress Geliştirmesi

Benim deneyimim full-stack’di, 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 zor 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ı yazılar yazmayı düşünüyorum, fakat sadece o yazılar yeterli olmayacak, çok farklı kaynaklardan araştırmanız ve saatlerce kafa yormanız gerekecektir.

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