Astro: Modern Web Geliştirme için Yeni Nesil Framework

<p>

Astro, modern web geliştirme dünyasında performans ve geliştirici deneyimini ön plana çıkaran yeni nesil bir framework'tür.

İçerik odaklı web siteleri (bloglar, portfolyolar, dokümantasyon siteleri) için optimize edilmiş olan Astro,

<strong>zero JavaScript by default</strong> yaklaşımıyla dikkat çeker.

</p>

<h2>Astro'nun Temel Felsefesi</h2>

<p>

Astro'nun arkasındaki temel fikir basittir: Kullanıcıya mümkün olduğunca az JavaScript gönderin.

Geleneksel SPA (Single Page Application) framework'lerinin aksine, Astro varsayılan olarak hiç JavaScript göndermez.

JavaScript sadece gerçekten ihtiyaç duyulduğunda ve sadece gerekli bileşenler için yüklenir.

</p>

<h3>Islands Architecture</h3>

<p>

Astro'nun en önemli özelliklerinden biri <strong>Islands Architecture</strong> yaklaşımıdır.

Bu mimari, sayfanın çoğunun statik HTML olarak render edilmesini,

sadece interaktif bileşenlerin JavaScript ile çalışmasını sağlar.

</p>

---

// Statik içerik - JavaScript yok

import Header from '../components/Header.astro';

import Footer from '../components/Footer.astro';

// İnteraktif bileşen - Sadece bu bileşen için JavaScript yüklenir

import Counter from '../components/Counter.vue';

---

<html>

<body>

<main>

<h1>Merhaba Dünya</h1>

<p>Bu statik içerik, hiç JavaScript gerektirmez.</p>

</main>

</body>

</html>

</code></pre>

<h2>Astro'nun Güçlü Yönleri</h2>

<h3>1. Framework Agnostic (Çerçeve Bağımsız)</h3>

<p>

Astro, birden fazla framework'ü aynı projede kullanmanıza izin verir:

</p>

---

import ReactComponent from './ReactComponent.jsx';

import VueComponent from './VueComponent.vue';

import SvelteComponent from './SvelteComponent.svelte';

---

<div>

</div>

</code></pre>

<h3>2. Performans Odaklı</h3>

<ul>

<li>Zero JavaScript by Default</li>

<li>Partial Hydration</li>

<li>Automatic Image Optimization</li>

<li>Built-in Asset Optimization</li>

</ul>

<h3>3. SEO Dostu</h3>

<p>

Astro, server-side rendering (SSR) ve static site generation (SSG) desteği ile güçlü SEO performansı sunar.

</p>

---

import { SEO } from 'astro-seo';

const title = 'Astro ile Modern Web Geliştirme';

const description = 'Performans odaklı web siteleri için Astro kullanımı';

---

<SEO

title={title}

description={description}

openGraph={{

basic: {

title: title,

type: 'website',

image: '/og-image.jpg',

}}

twitter={{

creator: '@DevrimMehmetp',

}}

</code></pre>

<h2>Pratik Kullanım Senaryoları</h2>

<h3>Content Collections ile Tip Güvenli İçerik Yönetimi</h3>

// src/content/config.ts

import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({

type: 'content',

schema: z.object({

title: z.string(),

description: z.string(),

pubDate: z.date(),

author: z.string(),

tags: z.array(z.string()).optional(),

heroImage: z.string().optional(),

}),

});

export const collections = {

blog: blogCollection,

};

</code></pre>

<h3>Dinamik Routing</h3>

---

// src/pages/blog/[slug].astro

import { getCollection } from 'astro:content';

export async function getStaticPaths() {

const blogPosts = await getCollection('blog');

return blogPosts.map((post) => ({

params: { slug: post.slug },

props: { post },

}));

}

const { post } = Astro.props;

const { Content } = await post.render();

---

<h1>{post.data.title}</h1>

<time>{post.data.pubDate}</time>

</article>

</code></pre>

<h2>Deployment ve Production</h2>

<h3>Coolify ile Deployment</h3>

FROM node:20-alpine AS builder

WORKDIR /app

COPY package*.json ./

RUN npm ci

COPY . .

RUN npm run build

FROM nginx:alpine

COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

</code></pre>

<h3>Build Optimizasyonu</h3>

import { defineConfig } from 'astro/config';

export default defineConfig({

output: 'static',

build: {

inlineStylesheets: 'auto',

vite: {

build: {

cssMinify: true,

minify: 'terser',

});

</code></pre>

<h2>Astro vs Diğer Framework'ler</h2>

<table>

<thead>

<tr>

<th>Özellik</th>

<th>Astro</th>

<th>Gatsby</th>

</tr>

</thead>

<tbody>

<tr>

<td>Default JS</td>

</tr>

<tr>

<td>Hydration</td>

<td>Partial</td>

</tr>

<tr>

<td>Framework Support</td>

<td>Multi</td>

<td>React</td>

</tr>

<tr>

<td>Learning Curve</td>

<td>Düşük</td>

</tr>

<tr>

<td>Build Speed</td>

<td>Çok Hızlı</td>

<td>Hızlı</td>

<td>Yavaş</td>

</tr>

</tbody>

</table>

<h2>Sonuç</h2>

<p>

Astro, özellikle içerik odaklı web siteleri için güçlü bir seçimdir.

Performans, SEO ve geliştirici deneyimi açısından modern web geliştirme standartlarını yeniden tanımlamaktadır.

</p>

<h3>Astro'nun tercih edilmesi gereken durumlar</h3>

<ul>

<li>Blog ve portfolyo siteleri</li>

<li>Dokümantasyon siteleri</li>

<li>Marketing ve landing page'ler</li>

<li>E-ticaret vitrin sayfaları</li>

<li>Kurumsal web siteleri</li>

</ul>

<h3>Astro'nun uygun olmadığı durumlar</h3>

<ul>

<li>Yoğun interaktif uygulamalar (dashboard, admin panel)</li>

<li>Real-time uygulamalar</li>

<li>Karmaşık state yönetimi gerektiren SPA uygulamaları</li>

</ul>

<p>

Modern web geliştirme yaklaşımlarını benimseyen, performans odaklı ve SEO dostu projeler için Astro,

2024 ve sonrası için güçlü bir adaydır.

</p>