React'te Aşamalı Geliştirme: JavaScript Opsiyonlu Bileşenler Oluşturmak

Günümüz web geliştirme dünyasında, React gibi JavaScript framework'leri her yerde karşımıza çıkıyor. Dinamik ve etkileşimli kullanıcı arayüzleri oluşturmak için güçlü araçlar sunsalar da, yalnızca JavaScript'e güvenmek erişilebilirlik, performans ve SEO ile ilgili sorunlara yol açabilir. İşte bu noktada Aşamalı Geliştirme (Progressive Enhancement - PE) devreye giriyor. Aşamalı Geliştirme, tarayıcı yetenekleri veya JavaScript kullanılabilirliğinden bağımsız olarak, temel web sitesi işlevselliğinin ve içeriğinin tüm kullanıcılara sunulmasını önceliklendiren bir web geliştirme stratejisidir. React'te Aşamalı Geliştirme, JavaScript olmadan bile çalışan, temel bir deneyim sunan ve ardından daha zengin etkileşim için JavaScript ile geliştirilen bileşenler oluşturmaya odaklanır.

Aşamalı Geliştirme Nedir?

Aşamalı Geliştirme yeni bir kavram değildir. Web sitelerini katmanlar halinde oluşturmayı savunan bir felsefedir ve sağlam bir HTML ve CSS temeliyle başlar. Bu temel, içeriğin engelli kullanıcılar, düşük bant genişliğine sahip bağlantılardaki kullanıcılar veya JavaScript'i devre dışı bırakmış olanlar da dahil olmak üzere herkes tarafından erişilebilir olmasını sağlar. JavaScript daha sonra daha zengin ve daha etkileşimli bir deneyim sağlamak için bir geliştirme olarak eklenir. Bunu bir ev inşa etmek gibi düşünebilirsiniz: temel yapıyla başlarsınız ve ardından şık özellikleri eklersiniz.

Aşamalı Geliştirmenin Temel İlkeleri:

• Önce Erişilebilirlik: Temel içeriğin ve işlevselliğin, yardımcı teknolojileri kullananlar da dahil olmak üzere tüm kullanıcılar için erişilebilir olduğundan emin olun.
• Anlamsal HTML: İçeriğin yapısını ve anlamını iletmek için HTML öğelerini uygun şekilde kullanın. Bu, erişilebilirlik ve SEO için çok önemlidir.
• Zarif Düşüş (Graceful Degradation): JavaScript başarısız olursa veya kullanılamazsa, web sitesi daha düşük bir etkileşim seviyesinde de olsa kullanılabilir olmalıdır.
• Performans Optimizasyonu: İlk sayfa yüklemesi için gereken JavaScript miktarını en aza indirin.

Aşamalı Geliştirme React'te Neden Önemlidir?

React, varsayılan olarak, JavaScript ağırlıklı bir framework'tür. Bir React uygulaması tarayıcıda oluşturulduğunda, genellikle önemli miktarda JavaScript'in indirilmesini, ayrıştırılmasını ve yürütülmesini gerektirir. Bu, birkaç soruna yol açabilir:

• Yavaş İlk Yükleme Süreleri: Yavaş bağlantılardaki veya daha az güçlü cihazlara sahip kullanıcılar, web sitesi etkileşimli hale gelmeden önce önemli bir gecikme yaşayabilir.
• Erişilebilirlik Sorunları: Yardımcı teknolojilere güvenen engelli kullanıcılar, oluşturma için JavaScript gerekiyorsa içeriğe erişmekte zorluk çekebilir.
• SEO Zorlukları: Arama motoru tarayıcıları, büyük ölçüde JavaScript'e dayanan içeriği düzgün bir şekilde dizine ekleyemeyebilir.

React'te Aşamalı Geliştirme uygulamak, JavaScript olmadan bile işlevsel olan temel bir deneyim sunarak bu zorlukları giderir. Bu, yalnızca erişilebilirliği ve performansı iyileştirmekle kalmaz, aynı zamanda arama motorlarının içeriği kolayca tarayabilmesini ve dizine ekleyebilmesini sağlayarak SEO'yu da geliştirir.

React'te Aşamalı Geliştirme için Teknikler

React'te Aşamalı Geliştirme'yi uygulamak için çeşitli teknikler kullanılabilir:

1. Sunucu Taraflı Oluşturma (SSR)

Sunucu Taraflı Oluşturma (Server-Side Rendering - SSR), React bileşenlerinin sunucuda oluşturulduğu ve sonuçtaki HTML'nin istemciye gönderildiği bir tekniktir. Bu, tarayıcının JavaScript indirilip yürütülmeden önce bile içeriği hemen görüntülemesini sağlar. SSR birkaç avantaj sağlar:

• İyileştirilmiş İlk Yükleme Süresi: Tarayıcı önceden oluşturulmuş HTML'yi alır, bu da daha hızlı bir ilk sayfa yüklemesi sağlar.
• Geliştirilmiş SEO: Arama motoru tarayıcıları, önceden oluşturulmuş HTML'yi kolayca dizine ekleyebilir.
• Daha İyi Erişilebilirlik: Engelli kullanıcılar, JavaScript yüklenmeden önce bile içeriğe erişebilir.

Next.js ve Remix gibi framework'ler, React'te SSR uygulamayı nispeten basit hale getirir. Sunucu taraflı oluşturma, yönlendirme ve veri getirme için yerleşik destek sağlarlar.

Next.js kullanarak örnek:

Next.js, `pages` dizinindeki sayfalar için SSR'yi otomatik olarak yönetir. İşte basit bir örnek:

// pages/index.js
function HomePage() {
  return 
Web siteme hoş geldiniz!
;
}

export default HomePage;

Bir kullanıcı ana sayfayı ziyaret ettiğinde, Next.js `HomePage` bileşenini sunucuda oluşturacak ve sonuçtaki HTML'yi tarayıcıya gönderecektir.

2. Statik Site Oluşturma (SSG)

Statik Site Oluşturma (Static Site Generation - SSG), React bileşenlerinin derleme zamanında oluşturulduğu ve sonuçtaki HTML dosyalarının doğrudan istemciye sunulduğu bir tekniktir. Bu, SSR'den bile daha hızlıdır çünkü HTML önceden oluşturulmuştur ve her istekte herhangi bir sunucu taraflı işlem gerektirmez.

• Son Derece Hızlı Yükleme Süreleri: HTML dosyaları doğrudan bir CDN'den sunulur, bu da son derece hızlı yükleme süreleri sağlar.
• Geliştirilmiş Güvenlik: Sunucu tarafında kod yürütülmez, bu da saldırı yüzeyini azaltır.
• Ölçeklenebilirlik: Web sitesi statik dosyalardan oluştuğu için ölçeklendirmesi kolaydır.

Gatsby ve Next.js gibi framework'ler de SSG'yi destekler. React bileşenlerinizden derleme zamanında statik HTML dosyaları oluşturmanıza olanak tanırlar.

Next.js kullanarak örnek:

Next.js'de SSG kullanmak için, veri getirmek ve bunu bileşeninize props olarak geçirmek için `getStaticProps` işlevini kullanabilirsiniz.

// pages/blog/[id].js

export async function getStaticProps({ params }) {
  const postId = params.id;
  // Gönderi için bir API'den veya veritabanından veri çekin
  const post = { id: postId, title: `Gönderi ${postId}`, content: `Gönderi ${postId} içeriği` };

  return {
    props: {
      post,
    },
  };
}

export async function getStaticPaths() {
  // `id` parametresi için olası değerleri tanımlayın
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } },
  ];

  return {
    paths,
    fallback: false, // Sayfaları talep üzerine oluşturmak istiyorsanız true olarak ayarlayın
  };
}

function BlogPost({ post }) {
  return (
    

      
{post.title}
      
{post.content}
    
  );
}

export default BlogPost;

Next.js, derleme zamanında her gönderi için statik HTML dosyaları oluşturacaktır.

3. `

`

Bu içerik, JavaScript etkinse görüntülenecektir.

Normalde JavaScript ile uygulanan alternatif gezinme menüleri, iletişim formları veya diğer temel öğeleri sağlamak için `

4. Koşullu Oluşturma (Conditional Rendering)

Koşullu oluşturma, JavaScript'in etkin olup olmamasına bağlı olarak farklı bileşenler veya içerikler oluşturmanıza olanak tanır. Bunu, JavaScript olmadan temel bir deneyim sunmaya devam ederken kullanıcı arayüzünü JavaScript özellikleriyle aşamalı olarak geliştirmek için kullanabilirsiniz.

import { useState, useEffect } from 'react';

function MyComponent() {
  const [isJavaScriptEnabled, setIsJavaScriptEnabled] = useState(true);

  useEffect(() => {
    // JavaScript'in etkin olup olmadığını kontrol edin. Bu basitleştirilmiş bir örnektir.
    // Gerçek dünya senaryosunda, daha sağlam bir yöntem kullanmak isteyebilirsiniz.
    setIsJavaScriptEnabled(typeof window !== 'undefined');
  }, []);

  return (
    

      {isJavaScriptEnabled ? (
        
Bu içerik JavaScript ile oluşturuldu.
      ) : (
        
Bu içerik JavaScript olmadan oluşturuldu.
      )}
    
  );
}

export default MyComponent;

Bu örnek, tarayıcıda JavaScript'in etkin olup olmadığını kontrol etmek için `useState` ve `useEffect` hook'larını kullanır. Buna bağlı olarak, farklı içerikler oluşturur.

5. Anlamsal HTML Kullanımı

Anlamsal HTML öğelerini kullanmak hem erişilebilirlik hem de Aşamalı Geliştirme için çok önemlidir. Anlamsal HTML öğeleri, içeriğe anlam ve yapı kazandırarak yardımcı teknolojilerin ve arama motoru tarayıcılarının anlamasını kolaylaştırır. Örneğin, sayfa içeriğinizi yapılandırmak için `