Herkese selamlar, bir süredir ilgilenemediğim kişisel web sayfamı nihayet tekrar açabildim. Zamanım olduğu için bu sefer web tarafında daha performanslı ve sade bir framework kullanmayı tercih ettim. İlk defa Astro js kullanarak bir SSR uygulaması elde ettim. Framework'u hiç bilmeden uygulamaya giriştiğim için biraz zorladı tabi.


Vue ile geliştirme yapmaya alışık olduğum için Nuxt veya Quasar kullanabilirdim ama neden Astro 'yu tercih ettim ufacık bahsetmek istiyorum. Web tarafında çalışma eski çalışma alışkanlıklarımın da etkisiyle, performans konusunda takıntılı olabilirim :). Daha önce tamamen Vue ile çalışan framework'leri denedikten sonra sonuç bir yerden sonra hüsrana dönmeye başlıyordu. Çünkü tek seferde derleme yaptığınızda ve projedeki modülariteyi artırmaya başladığınızda kullandığınız küçük küçük parçalar artık bütün haline gelmeye başlıyor. Her sayfa yenileme işleminde tekrar tekrar devreye giren bir çok component yapınız oluyor artık.


Vue ile çalıştığım zamandan Options API ve sonrasındaki Composition API ile beraber karmaşıklığın giderilmeye çalışıldığını biliyoruz. Ama Vue kendi yapısını kullandığından sistemin her bir parçasını bölümlemek ve proje yapısına sadık kalmak bir yerden sonra da zorlaşmaya başlıyor. Tam bu noktada şöyle düşündüm, neden web tarafında böyle bir karmaşıklığı yönetmek isteyeyim? Kendi naçizane düşüncem bu şekilde gelişti. Bunların da haricinde, Quasar gibi frameworkler'in üzerindeki component yapısı ve utils olarak gelen kısımları da web tarafında gözüme fazla ağır gelmeye başladı.


Largest Contentful Paint (LCP)

İşin teknik kısımına geçecek olursak. İlk olarak bahsettiğim konu aslında Largest Contentful Paint'ti. Benchmark testi ise şöyle.

Buradaki metrik içerisinde tüm frameworkler %50 veya daha yüksek bir puan almış durumda. Ancak, en yeni olan frameworklar(Astro, SvelteKit ve Remix), bu metrik değerlendirmesine göre en yüksek puanı alanlar. Üçü de test edilen tüm web sitelerinde bu metrik değerlendirmesinde %75'in üzerinde bir puan elde etmiş durumda. Detaylara buradan ulaşabilirsiniz: https://astro.build/blog/2023-web-framework-performance-report/


Astro İle İlk Deneyimim

Swelte gibi kendine has bir yapısı olması ve bunu en basit haliyle sunması anlaşılır geldi bana. Ancak hatırlatmalıyım ki Vue veya React gibi bir alandan bu tarafa geçmek öncelikle benim için gemiyi terk edip kayığa binmek gibi geldi. Kendimi bir süre pure PHP ile hem back-end hem de front-end kodladığım zamanda gibi hissettim. Astro içerisinde Astro Island adında bir alan bulunduruyor. Kendi deyimiyle şöyle:


Islands mimarisi, monolitik JavaScript kalıplarından kaçınmanıza ve sayfadaki tüm gereksiz JavaScript'i otomatik olarak temizlemenize yardımcı olarak daha iyi bir frontend performansına yol açar. Geliştiriciler, Astro ile favori UI bileşenlerini ve çerçevelerini kullanmaya devam edebilir ve yine de bu avantajları elde edebilirler.


Javascript kodunu mümkün olduğunca server tarafında kullanmaktayız. Client tarafında bir kullanım için ise Vue, React, Preact gibi bir çok entegrasyonu mevcut. Normal Javascript', client tarafında kullanmak isterseniz ise <script> tag içerisinde kullanabiliyorsunuz ancak bu dom tarafındaki standart collection'lar ile sizi çalıştırıyor. Haliyle Vue veya React üzerinden sistemi küçük parçalar halinde hazırlıyorsunuz ama yalnızca client tarafındaki manipülasyonlar için tabi.


Vue Bileşenini Astro İçerisine Dahil Etmek

Kurulum

npx astro add vue

Ardından astro.config.mjs içerisini vue entegrasyonu için düzenliyoruz.

import { defineConfig } from 'astro/config'; 
import vue from "@astrojs/vue"; 

// <https://astro.build/config> 

export default defineConfig({ integrations: [vue()] });

Şimdi bir Vue Component'i oluşturalım.

<template> 
  <div> 
    <ul> 
      <li v-for="item in food"> {{ item }} </li> 
    </ul> 
  </div> 
</template> 

<script setup lang="ts"> 
const food = ["Pizza", "French fries", "Spaghetti"]; 
</script>

Oluşturduğumuz Projeyi herhangi bir .astro component içerisinde kullanalım.

--- 
// Burası Astro'nun frontmatter olarak adlandırdığı alan. 
// burada typescipt ve javascript kodlayabilirsiniz 
// Burada oluşturulan kodlar yalnızca server tarafında çalışacak ve client tarafında asla işleme alınmayacak
import Food from "../components/food.vue"; const title = "Hello World!"; 
---

Yalnızca burada önemli olan nokta herhangi bir Vue bileşeni kullandığınızda interaktivite'nin SSR tarafında çalışmaması. Eğer SSG tarafında client side bir Vue işleme almak istiyorsanız, aşağıdaki gibi bir yol izlemelisiniz.


Astro'da etkileşim kullanmak için bir client directive bulunmaktadır. Bu, hidrasyon için sunulan seçeneklerdir:

  • client:load - Anında JavaScript'i bileşene gönderir.

  • client:idle - Tarayıcı ana iş parçacığı (main thread) boş olduğunda hemen hydration sağlanır.

  • client:visible - Bileşen viewport'ta görünür olduğunda hydration sağlanır.

  • client:media={QUERY} - Belirtilen medya sorgusu karşılandığında hydration sağlanır

  • client:only={FRAMEWORK} - Astro derleyicisini tamamen görmezden gelir (tavsiye edilmiyor).


Tüm bunların örnek kullanımı ise şöyle

<html> 
     <head> <!-- Astro uses a JSX-like syntax in it's body --> 
         <title>{title}</title> 
     </head> 
     <body>   
         <header> 
             <Navigation client:load /> 
         </header> 
     <main> 
         <h1>Food I like:</h1> 
         <Food client:load /> 
     </main> 
     </body> 
</html>


Bu şekilde ayarlandığında artık SSR tarafında hızlı bir web uygulaması oluşturmanın adımlarını atmış oluyorsunuz.