WordPress Site Hızlandırma: Headless WordPress ve SvelteKit Entegrasyonu

Pazar, Eylül 29, 2024
10 min read
headless-wordpress-ve-sveltekit-entegrasyonu

WordPress Nedir ve Neden Kullanılır?

WordPress, web sitesi ve blog oluşturmada dünya çapında en yaygın kullanılan açık kaynaklı içerik yönetim sistemidir. İnternet’teki sitelerin %40’ından fazlası WordPress altyapısını kullanmaktadır.

Ancak, modern web uygulamalarının artan performans ve esneklik ihtiyaçları, geliştiricileri yeni çözümler aramaya yönlendiriyor. Bu noktada, SvelteKit ve headless WordPress entegrasyonu öne çıkıyor.

Bu yazıda, bu iki teknolojinin birlikte nasıl uygulanacağını ve web geliştirmeye sağlayacağı faydaları inceleyeceğiz.

Headless WordPress’in Avantajları

  • Esneklik: WordPress ile SvelteKit’i birleştirerek, özelleştirilmiş web uygulamaları oluşturabilirsiniz.
  • Performans: Backend ve frontend’in ayrılması, daha hızlı sayfa yüklemeleri, CDN üzerinden içerik dağıtımı ve ön bellek kullanımı gibi performans artışları sağlar.
  • Güvenlik: WordPress Reverse Proxy ile DDoS koruması, CORS ile güvenli API istekleri ve JWT (JSON Web Tokens) ile kimlik doğrulama gibi güvenlik önlemleri alabilirsiniz.
  • Ölçeklenebilirlik: Trafik artışlarına kolayca yanıt verebilir ve kaynak optimizasyonunu daha iyi yönetebilirsiniz.

SvelteKit’in Güçlü Yanları

  • Hızlı Geliştirme: Svelte’ın basit ve etkili kod yapısı, geliştiricilere daha hızlı bir geliştirme deneyimi sunar.
  • Performans: Svelte, compile-time framework olması sayesinde, minimum JavaScript koduyla yüksek performans sağlar.
  • SEO Dostu: SvelteKit’in sunucu tarafı rendering (SSR) ve statik site üretimi (SSG) yetenekleri, arama motoru botlarının içeriği daha etkili bir şekilde taramasını sağlar. Ayrıca, dinamik meta tag yönetimi ve yapılandırılmış veri (structured data) entegrasyonu kolaylaşır.
  • Esnek Routing Sistemi: Dosya sistemi tabanlı rotalama ile URL yapılarınızı hızlıca oluşturabilir ve karmaşık rotaları kolayca yönetebilirsiniz.
  • Adaptör Tabanlı Deployment: SvelteKit, çeşitli hosting platformlarına özel adaptörler sunar (Vercel, Netlify, Node.js, static hosting). Bu, projenizi farklı ortamlara kolayca deploy etmenizi ve ölçeklendirmenizi sağlar.

SvelteKit ve Headless WordPress Entegrasyonu

Bu bölümde, SvelteKit ile headless WordPress’in nasıl entegre edileceğini adım adım inceleyeceğiz. Başlangıç için WordPress’i headless moda geçireceğiz ve ardından SvelteKit üzerinden bu verileri kullanacağız.

1. WordPress’te Headless Moda Geçiş

Öncelikle, WordPress’i headless moda geçirmeniz gerekiyor. Bunun için:

  • REST API’yi etkinleştirin: WordPress REST API varsayılan olarak açıktır.
  • CORS ayarları: SvelteKit’in WordPress API ile iletişim kurabilmesi için CORS (Cross-Origin Resource Sharing) yapılandırmalarını düzenleyin.
  • JWT Authentication: Kullanıcı kimlik doğrulama ve güvenli API istekleri için JWT ile kimlik doğrulama ekleyin.

2. SvelteKit Projesi Oluşturma

SvelteKit projesi oluşturmak için terminal üzerinden aşağıdaki adımları izleyin:

npm create svelte@latest wp-sveltekit-app
cd wp-sveltekit-app
npm install

3. WordPress API ile İletişim

$lib/api.js dosyasını oluşturun: Bu dosya, WordPress’ten gönderileri çeker ve SvelteKit uygulamanızda kullanıma hazır hale getirir.

const WP_API_URL = 'https://your-wordpress-site.com/wp-json/wp/v2';

export async function fetchPosts(page = 1, perPage = 10) {
  const response = await fetch(`${WP_API_URL}/posts?_embed&page=${page}&per_page=${perPage}`);
  const posts = await response.json();
  return posts;
}

export async function fetchPost(postId) {
  const response = await fetch(`${WP_API_URL}/posts?slug=${postId}&_embed`);
  const posts = await response.json();
  return posts[0];
}

4. Blog Gönderileri Sayfasını Kodlayalım

Blog sayfamızda, WordPress Rest API’dan aldığımız gönderileri listeleyeceğiz. Öncelikle routes klasörü altında blog klasörü oluşturalım.

Ardından, src/routes/blog/+page.js dosyasını şu şekilde oluşturun:

import { fetchPosts } from "$lib/api";

export async function load() {
  try {
    // await yazmıyoruz, çünkü Svelte {#await} bloğu ile UI tarafında isteği yöneteceğiz
    const posts = fetchPosts();
    return {
      posts,
    };
  } catch (error) {
    console.error("Gönderi yüklenirken hata oluştu:", error);
    return {
      posts: [],
      error: "Gönderiler yüklenemedi.",
    };
  }
}

src/routes/blog/+page.svelte dosyasını şu şekilde düzenleyin:

<script>
  export let data;
  const posts = data && data.posts;
</script>

<main>
  <h1>Son Gönderiler</h1>

  {#await posts}
    <p>Yükleniyor...</p>
  {:then posts}
    {#if posts.length === 0}
      <p>Gösterilecek gönderi bulunamadı.</p>
    {:else}
      {#each posts as post}
        <article>
          <h2><a href="/blog/{post.slug}">{post.title.rendered}</a></h2>
          <div>{@html post.excerpt.rendered}</div>
        </article>
      {/each}
    {/if}
  {:catch error}
    <p>Hata: {error.message}</p>
  {/await}
</main>

5. Blog Detay Sayfasını Kodlayalım

Burada, her blog gönderisinin detay içeriğini gösteren bir sayfa oluşturacağız. Öncelikle, dinamik sayfalama için blog klasörü altında [postId] klasörü oluşturalım.

src/routes/blog/[postId]/+page.js dosyasını şu şekilde oluşturun:

import { fetchPost } from '$lib/api';

export async function load({ params }) {
  const post = await fetchPost(params.postId);
  
  return {
    post
  };
}

src/routes/blog/[postId]/+page.svelte dosyasını şu şekilde düzenleyin:

<script>
  import { page } from "$app/stores";
  import { fetchPost } from "$lib/api";

  let post;

  $: fetchPost($page.params.postId).then((data) => post = data);
</script>

{#if post}
  <article>
    <h1>{post.title.rendered}</h1>
    <div>{@html post.content.rendered}</div>
  </article>
{:else}
  <p>Yükleniyor...</p>
{/if}

6. SEO İçin Dinamik Meta Etiketleri

Her gönderi sayfasında, gönderi başlığı ve açıklamasını meta etiketlerine ekleyerek SEO için daha iyi performans sağlayacağız. Bunun için +page.js dosyasında meta bilgilerini tanımlayacağız.

src/routes/blog/[postId]/+page.js:

import { fetchPost } from '$lib/api';

export async function load({ params }) {
  const post = await fetchPost(params.postId);
  
  return {
    post,
    // Meta bilgilerini sayfaya gönderiyoruz
    meta: {
      title: post.title.rendered,
      description: post.excerpt.rendered.replace(/<[^>]*>/g, '')
    }
  };
}

src/routes/blog/[postId]/+page.svelte dosyasına svelte:head etiketlerini kullanarak meta etiketlerini ekleyin:

<script>
  import { page } from "$app/stores";
  import { fetchPost } from "$lib/api";

  let post;
  let title = ""; // Başlık (title)
  let description = ""; // Açıklama (description)

  $: fetchPost($page.params.postId).then((data) => {
    post = data;
    // title ve description bilgilerini gelen veriden alıyoruz
    title = post.title.rendered;
    description = post.excerpt.rendered.replace(/<[^>]*>/g, "");
  });
</script>

<!-- title ve description bilgilerini svelte:head etiketleri ile ekliyoruz -->
<svelte:head>
  <title>{title}</title>
  <meta name="description" content={description} />
</svelte:head>

Bu sayede her gönderi için dinamik başlık ve açıklama ekleyerek, SEO performansınızı attırmış olursunuz.

Sonuç

SvelteKit ve headless WordPress entegrasyonu, modern web geliştirme dünyasında güçlü ve esnek bir çözüm sunar. Bu kombinasyon, WordPress’in zengin içerik yönetim özelliklerini, SvelteKit’in performans ve ölçeklenebilirliği ile birleştirerek, hızlı, güvenli ve SEO dostu web uygulamaları geliştirmenize olanak tanır.

Bu entegrasyon sayesinde elde edeceğiniz avantajlar:

  1. Daha hızlı sayfa yüklemeleri
  2. Daha iyi kullanıcı deneyimi
  3. Gelişmiş SEO performansı
  4. Daha güvenli uygulamalar

Bu yazı, SvelteKit ve headless WordPress ile modern web uygulamaları geliştirmenin ilk adımlarını kapsıyor. Daha fazla özelleştirme, kullanıcı kimlik doğrulama veya özel içerik türleri gibi özelliklerle bu entegrasyonu genişletebilirsiniz.

WordPress eklentileri ile çözülemeyen yavaşlık sorunlarınızı SvelteKit ile çözerek, yüksek peformanslı, hızlı, güvenli ve seo uyumlu web siteleri için Özel Yazılım Geliştirme hizmetimizden yararlanabilirsiniz.

Ücretsiz danışmanlık ve destek için bizimle iletişime geçebilirsiniz.

Ücretsiz Danışmanlık