Wordpress'ten NextJS'e Geçiş

Bloglamanın zirve yaptığı Web 2.0 dönemleri 2008-2011 civarlarını hatırlayanlar Wordpress'in ve PHP'cilerin altın çağı idi. Wordpress komunitesi ile Auttomatic firmasının açık kaynağa yaptığı katkılar ile bugün hala CMS pazarının bir numarası ve bir yandan da bir çok kişinin ekmek kapısı. Benim de nihayetinde daldığım 2013'ten beridir devam ettirdiğim Wordpress macerası SSG (Static Site Generator)'lerin benim ihtiyaçlarıma çok daha iyi cevap vermesi sonucunda sona ermiş bulunmakta.

Daha önce Hugo, Ghost, Jekyll, Zola gibi SSG alternatiflerini denemiştim fakat pek kullanışlı gelmemişlerdi. Bu süreç zarfında React ve Vue'nun yükselişi ile front-end yaklaşımı neredeyse tamamiyle değişti. Bazı şeyler dönüp dönüp tekrar hype olsa da 2010 yılında değiliz artık.

Gelelim şu ihtiyaçlara, şu an bulunduğunuz web sitesi aslında tamamiyle statik. Yani bir kullanıcı etkileşimi, devamlı üretilen bir data yok. Benim t zamanda yazdığım yazılar ve onların görsellerinden ibaret. Dolayısıyla bu içerik devamlı üretilmeye ihtiyacı yok, ben yazarken oluşturulsa ve her bir ziyarette sunulsa olduğu gibi bir problem olmayacaktır, değil mi? Bu sebepten dolayı benim yaptığım değişikliği canlıya alırken bir kez bu site oluşturuluyor ve her bir ziyaretinizde bu oluşturulma anındaki HTML, CSS, JS dosyaları ile görseller sunuluyor. Üzerine bu dosyalar ufaltılıp, ön belleklendiğinde site çok daha hızlı açılıyor. Bu da bana lazım olandı.

Wordpress üzerinde kullandığımız eklentiler, çoğu zaman faydadan çok zarar getirmekte açılış sürelerini gereksiz yere arttırmakta, bir çoğu en ufak özellik için abonelik yöntemiyle ciddi meblağlar talep etmekteydi. Google Analytics'ten siteyle ilgili istatistikleri Wordpress panelinde göstermek için var olan bir eklenti kaç lira olmalı?

Tüm bunların yanında devamlı güncellemeler bunlarla uğraşmayı beraberinde getiriyordu. Wordpress'in kendi güncellemeleri eklentilerin güncellemeleri ve uyumsuzlukları ile birleşince can sıkıcı bir hal almaya başlamıştı.

Diğer yandan Wordpress bir veritabanına ihtiyaç duymakta ve bu bağımlılık devamlı bir sunucuya ihtiyacı beraberinde getirmekte. Basit bir statik sitenin aslında ihtiyacı olmayacak şeyler için bir uygulamayı ayakta tutmanın maliyetleri bunlar.

Bir Wordpress sitesini taşımak kolay görünse de baya baş ağrıtıcı. wp-content içeriğini sunucuda tutmak olası bir taşınmada işleri zorlaştırmakta. Basit seviyedeki kullanıcıları zorlayan şeylerden biri de tüm bunları hesap edip ona göre konfigüre etmek.

Ne Lazım?

Hız, düşük gecikme, basitlik. Statik bir sitede aranması gereken özellikler bunlar olmalı bence. Bunları biraz açmak gerekirse hız yani sitenin açılış hızı ilk temasın (TTFB) ne kadar erken olduğu ile ilgilidir. Kullanıcı ekranında ne kadar erken etkileşime geçebiliyor, tarayıcı ne kadar az bloklanıyor, ilk elementler ne kadar erken oluşuyor gibi kriterleri sağlamaasıdır. Düşük gecikme, siteniz açıldığında gelen içerik ne kadar çok oluşuyor, bu oluşma sırasında kullanıcı site ile etkileşime geçebiliyor mu gibi soruların cevaplanmasıdır. Burada sadece kullandığımız teknolojiler değil içerik üreticisinin de bu optimize durumun nasıl sağlanacağı ile ilgili de bir fikri olması gerekir. Basitlik ise aslında en önemli unsur olmalı, bu noktada hem içerik tüketicisi hem de içerik sağlayıcısının kullandığı ortamlarında sadeliği ve önsezilerle kullanabiliyor olması önemlidir. Yani bir içerik tüketicisi için sitenize geldiğinde içeriğe ne kadar rahat ulaşabiliyor, içerikler arasında nasıl dolaşabiliyor bu dolaşımı ne kadar az eforla sağlayabiliyor; içerik sağlayıcısı için de içeriği oluşturduğu arayüzün ve yöntemin sadeliği onu yalnızca içeriğine odaklanmasını sağlayacaktır.

Diğer yandan bir araç setine ihtiyaç duyuluyor, bu içerik nasıl, nerede ve hangi koşullarda yayınlanacak? Yani kafanızdaki içeriği şu an görmüş olduğunuz hale gelmesi için neler gerekiyor? Bunların cevabı çok çeşitli ve son 10 yılda çok daha fazla çeşitlilik kazandı. Ama statik içerikler için güzel araçlar mevcut artık. SSG'ler bunlar arasında en mantıklı olanlar diyebilirim.

Server-Side Rendering, CDN ve JAMStack platformları artık olayı bitirmiş gibi görünüyor. SSR ve CDN ile kullanıcıya en hızlı ve en yakın içerik üretimi ve sunumu ile bunları host edecek bir hosting platformu (Vercel, Netlify, Cloudflare Pages gibi) ile 0 maliyetli bir araç setine sahip olunabiliyor. Wordpress'te ihtiyaç bulunan bir veritabanı bir web sunucusu gibi ihtiyaçlara artık ihtiyaç bulunmuyor.

Şayet bir veritabanı ihtiyacı var ise ücretsiz özellikleriyle bir çok ihtiyacı karşılayabilen MongoDB Atlas ve PlanetScale kullanılabilir.

Obje depolama dediğimiz dosya depolama yöntemi olarak genel geçer kabul Amazon Web Services'in S3 (Simple Storage Service) servisi kullanılabilir. AWS S3 API'si bu tarafta standart haline geldiği için uygun gelen başka servis sağlayıcıları ile de kullanılabilir. Böylelikle görsellerinizi ve statik içeriklerinizi depolayabileceğiniz bir araç setine sahip olmuş oluyorsunuz. Bunun ile birlikte yine AWS'in CloudFront servisi ile CDN desteği de alabilirsiniz. Sonuç olarak hem statik içeriklerinizi son kullanıcıya en hızlı ve en yakın şekilde sunabilir hem de bu dosyaların barındırma problemleri ile uğraşmanıza gerek kalmaz. S3 ve rakiplerinin ücretsiz özellikleri ile bu ihtiyaçları karşılayabilirsiniz.

Yani ilaç: SSR + CDN + JAMStack platformu

Araç setimiz: Next.js (SSR) + AWS S3 (Depolama) + AWS CloudFront (Dağıtım) + Vercel (Build, Dağıtım) + Cloudflare (DNS)

Saded

Wordpress ile yürüdüğümüz bu yolun sonunda bir noktaya geldik. Wordpress'in kendisi bir CMS, bir içerik yönetim sistemi. Wordpress ile yapılabileceklerin sınırı yok. Sadece statik içerik üretecekler için ise Wordpress'in bir çok özelliği gereksiz. Wordpress'in arkasındaki veritabanı ve sunucu gibi bir çok şey gereksiz. Wordpress'in bu gereksizliklerini ortadan kaldırmak için bir çok yöntem var. Bunlardan biri Next.js, benim de tercihim bu yönde oldu. Next.js ile Wordpress'in bir çok gereksiz özelliğini ortadan kaldırıp sadece statik içerik üretmesini sağlayabiliyoruz. Markdown ve MDX ile içeriklerinizi oluşturup Next.js ile statik olarak üretiyoruz. Sonrasında da Vercel ve Cloudflare gibi platformlar ile statik içeriklerinizi yayınlıyoruz. Sunucu masrafı olmadığı için bu yöntemle 0 maliyetli bir içerik üretimi sağlayabiliyoruz.