Isomorphic Router

24 Haz,2025

Tanım

İsomorfik router, hem istemci tarafında (client-side) hem de sunucu tarafında (server-side) çalışan bir yönlendirme sistemidir. Modern web uygulamalarında, özellikle isomorphic (veya universal) JavaScript mimarisi kullanan framework’lerde karşımıza çıkar.

İsomorfik Router, bir URL isteği geldiğinde:

• Sunucu tarafında sayfanın HTML'ini oluşturabilir (SSR – Server-Side Rendering),
• Tarayıcı tarafında aynı yönlendirme mantığını koruyarak sayfa geçişlerini sağlayabilir (SPA davranışı).

Ne İşe Yarar?

• Kullanıcı deneyimi için hızlı tepki verir (SPA gibi).
• SEO dostudur (sunucuda sayfa üretildiği için arama motorları okuyabilir).
• Kod tekrarını azaltır, hem sunucuda hem istemcide aynı router mantığı kullanılır.

Son Söz

• İsomorfik Router: SSR + SPA birleştiren yönlendirme sistemidir.
• Gerçek zamanlı, hızlı ve SEO uyumlu uygulamalar için idealdir.
• Modern full-stack framework'lerin temel yapı taşlarından biridir.

İsomorfik Router Örneği

index.html ve script.js isimli iki adet dosya ile çalışmaya başlar.

HTML İşlemleri

<div id="app"></div> 
<script src="./script.js"></script> 

JavaScript İşlemleri

Route Template Objects, Functions

let routes = {};
let templates = {};
let app_div = document.getElementById('app');

function home(){
  // <h1>Home</h1> + About link
}
function about(){
  // <h1>About</h1> + Home link
}

Yukarıdaki işlem app isimli div içerisinde home() ve about() isimli fonksiyonları tanımlar. Eğer kullanıcı home isimli sayfaya girerse home() isimli fonksiyon <div id="app"></div> üzerinde devreye girer. about isimli URL sayfasına girdiğinde ise bu sefer about() isimli JavaScript fonksiyonu devreye girer. Aşağıda da bunun koda dökülmüş hali vardır:

function route(path, template){
  if (typeof template === 'function')
    routes[path] = template;
  else if (typeof template === 'string')
    routes[path] = templates[template];
}

function template(name, fn){
  templates[name] = fn;
}

Bu aşamadan sonra template yapısına parametreler verilir ve route yapıları tanımlanır. Hangi yapıda nasıl davranacağı aşağıdaki şekilde belirtilir:

template('home', home);
template('about', about);

route('/', 'home');
route('/about', 'about');

Resolve Route

function resolveRoute(route){
	const fn = routes[route];
	if (!fn) throw new Error(`Route ${route} not found`);
	return fn;
}

Route yapılarının mevcut olup olmadığını kontrol eden bir yapıya ait resolveRoute isimli bir JavaScript fonksiyonu yazıldı. Bu fonksiyon sayesinde bir yerde mevcut route yapısı yoksa throw ile bir hata mesajı döndürülür.

Router Function

function router(){
  const url = window.location.hash.slice(1) || '/';
  const routeFn = resolveRoute(url);
  app_div.innerHTML = ''; // Önceki içeriği temizlemek iyi olur
  routeFn();
}

Bu fonksiyon ise URL yapısında tüm route işlemlerini derleyip bir arada yürüten yapıdır. İlk olarak sayfadaki url alınır ve slice ile parçalarına ayrılır. Eğer slice ile dilimlenemezse / işaretleri ile dilimlenir. Sonrasında bu URL resolveRoute() isimli fonksiyona argüman olarak uygulanır. Öncesinde sayfada bir veri varsa app_div.innerHTML = ''; ile temizlenir. Son olarak da routeFn() fonksiyonuyla route işlemi gerçekleştirilir.

Event Listening

window.addEventListener('load', router);
window.addEventListener('hashchange', router);

Uygulama load ile yüklenirken router devreye girer. Uygulamada # ile belirtilen ifadeler değiştiğinde de router devreye girer. Bu işlem, event değiştiği anda gerçekleşecek faaliyetleri belirler.

#javascript