Introducció

Astro ha revolucionat el desenvolupament web amb el seu enfocament "Islands Architecture", permetent combinar la velocitat del renderitzat estàtic amb la interactivitat de React. En aquest article explorem com crear aplicacions web completes utilitzant aquesta potent combinació el 2025.

Fonaments d'Astro + React

Una aplicació ben dissenyada amb Astro i React ha de ser:

Optimitzada: Astro envia zero JavaScript per defecte, carregant components React només on són necessaris.
Flexible: Utilitza React on tingui més sentit mentre aprofites els avantatges d'Astro.
SEO-friendly: L'enfocament MPA (Multi-Page Application) d'Astro afavoreix el posicionament.
Escalable: Integra altres biblioteques i frameworks segons les necessitats del projecte.

"L'arquitectura Islands d'Astro representa un canvi paradigmàtic en com construïm aplicacions web, prioritzant el rendiment sense sacrificar l'experiència del desenvolupador."

Configuració del projecte

La configuració bàsica d'un projecte Full-Stack amb Astro i React requereix pocs passos:

                          # Crear un nou projecte Astro amb la plantilla full-stack
npm create astro@latest my-fullstack-app -- --template full-stack

# Entrar al directori del projecte cd my-fullstack-app

# Afegir la integració de React npx astro add react `

L'arxiu de configuració astro.config.mjs ha d'incloure:

                          // astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import node from '@astrojs/node';

export default defineConfig({ integrations: [react()], output: 'hybrid', adapter: node({ mode: 'standalone' }) }); `

Arquitectura de projecte recomanada

L'estructura d'un projecte Astro + React s'ha d'organitzar lògicament:

                          /
├── src/
│   ├── components/
│   │   ├── react/         # Components React interactius
│   │   └── astro/         # Components Astro per a layouts
│   ├── layouts/           # Plantilles de pàgina
│   ├── lib/               # Lògica compartida
│   │   ├── api/           # Funcions per a endpoints
│   │   ├── db/            # Models de dades
│   │   └── utils/         # Funcions d'utilitat
│   ├── pages/             # Rutes de pàgines
│   │   ├── api/           # Endpoints d'API
│   │   └── [...rutes]/    # Pàgines i rutes dinàmiques
├── astro.config.mjs
└── package.json

Integració de components React

Astro permet integrar components React controlant la seva hidratació amb directives específiques:

client:load - Hidrata quan es carrega la pàgina
client:idle - Hidrata quan el navegador està inactiu
client:visible - Hidrata quan el component és visible

La hidratació selectiva és la clau per optimitzar el rendiment, carregant JavaScript només on realment es necessita interactivitat.

Exemple d'integració:

---

import Layout from '../layouts/MainLayout.astro'; import ContactForm from '../components/react/ContactForm'; ---

Contacta amb nosaltres

Implementació d'API Endpoints

Astro permet crear endpoints d'API dins de la carpeta src/pages/api/:

                          // src/pages/api/contact.ts
import type { APIRoute } from 'astro';

export const POST: APIRoute = async ({ request }) => { try { const formData = await request.json();

// Lògica de processament...

return new Response( JSON.stringify({ success: true }), { status: 200, headers: { 'Content-Type': 'application/json' } } ); } catch (error) { return new Response( JSON.stringify({ success: false }), { status: 500, headers: { 'Content-Type': 'application/json' } } ); } }; `

Integració amb bases de dades

Per a aplicacions Full-Stack completes, Prisma segueix sent una excel·lent opció:

                          // src/lib/db/index.ts
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default prisma;

export async function saveContactMessage(data) { return prisma.contactMessage.create({ data }); } `

Autenticació a Astro

Astro permet implementar diferents estratègies d'autenticació:

                          // src/pages/api/auth/[...auth].ts
import { Auth } from '@auth/core';
import { AstroAuth } from '@auth/astro';
import GitHub from '@auth/core/providers/github';

export const { GET, POST } = AstroAuth({ providers: [ GitHub({ clientId: import.meta.env.GITHUB_CLIENT_ID, clientSecret: import.meta.env.GITHUB_CLIENT_SECRET }) ] }); `

Optimització de rendiment

"El millor codi JavaScript és el que no has d'enviar al client."

Bones pràctiques per optimitzar aplicacions Astro + React:

Hidratació selectiva: Utilitza les directives client: adequadament.
Agrupació intel·ligent de components: Organitza els teus components per funcionalitat.
Imatges optimitzades: Utilitza el component integrat d'Astro per a imatges.

Desplegament d'aplicacions

Opcions de desplegament per a aplicacions Astro Full-Stack:

Vercel o Netlify: Suport natiu amb adaptadors específics.
Docker amb Node.js: Per a desplegaments en infraestructura pròpia.

Conclusions

Astro amb React representa una combinació potent per al desenvolupament Full-Stack el 2025. Aquest enfocament permet construir aplicacions web ràpides, escalables i amb una excel·lent experiència de desenvolupament.

Millors pràctiques: - Aplica la filosofia "HTML-first" - Utilitza Content Collections per a dades estructurades - Separa dades i presentació - Optimitza per Core Web Vitals - Implementa estratègies de caché

Contacta amb el nostre equip si necessites suport en el desenvolupament d'aplicacions Astro + React.

Desenvolupament Full-Stack amb Astro i React el 2025