Giriş
SPA (Single Page Application), tarayıcının sayfayı her navigasyonda tamamen yenilemek yerine sadece değişen içeriği güncellediği uygulama türüdür. Klasik bir PHP sitesinde bu deneyimi yakalamak için iki ana yöntem kullanılır.
1. Yöntem: "One-Page" (Tek Sayfa) Mimarisi
Tüm içeriğin tek bir uzun sayfada (Section bazlı) toplandığı ve menülerin bu bölümlere kaydırdığı (Smooth Scroll) yapıdır.
HTML Yapısı (ID Bazlı)
<nav>
<a href="#hizmetler">Hizmetler</a>
<a href="#iletisim">İletişim</a>
</nav>
<section id="hizmetler">...</section>
<section id="iletisim">...</section>
Smooth Scroll (Yumuşak Kaydırma)
/* CSS ile en basit yöntem */
html {
scroll-behavior: smooth;
}
2. Yöntem: AJAX ile Dinamik İçerik Yükleme
Gerçek bir SPA hissi için sayfalar arası geçişte sadece bir <div> içindeki içeriğin değiştirilmesi yöntemidir.
JavaScript (Fetch API) Örneği
function sayfaYukle(url) {
fetch(url)
.then(response => response.text())
.then(html => {
document.getElementById('icerik-yükle-alani').innerHTML = html;
// URL çubuğunu güncelle (Geri tuşu için)
window.history.pushState({}, '', url);
});
}
3. Aktif Bölümü Takip Etme (ScrollSpy)
Kullanıcı kaydırdıkça menüdeki "Aktif" sınıfının otomatik olarak değişmesi SPA'lar için vazgeçilmezdir.
window.addEventListener('scroll', () => {
let sections = document.querySelectorAll('section');
let navLinks = document.querySelectorAll('nav a');
sections.forEach(sec => {
let top = window.scrollY;
let offset = sec.offsetTop - 150;
let id = sec.getAttribute('id');
if(top >= offset) {
navLinks.forEach(links => {
links.classList.remove('active');
document.querySelector('nav a[href*=' + id + ']').classList.add('active');
});
}
});
});
Hangi Yöntem Seçilmeli?
- One-Page: Landing page ve kurumsal tanıtım siteleri için idealdir. Kurulumu çok basittir.
- AJAX / SPA: Dashboardlar, paneller ve çok büyük verili siteler için kullanıcı hızını artırır.
- MPA (Klasik): SEO açısından en güvenlisidir ve HYZSOFT'un ana yapısı (PHP) bu şekildedir.