Jeff Bruchado
Volver al blog

Server-First Development: Cómo Astro, Remix y Next.js Están Cambiando el Juego en 2025

Hola HaWkers, ¿has notado que el péndulo del desarrollo web está volviendo al servidor?

Después de años enfocados en Single Page Applications (SPAs) y client-side rendering, la industria está redescubriendo los beneficios del servidor. Pero no estamos volviendo al pasado - estamos creando algo nuevo y mucho más poderoso: Server-First Development.

Qué Es Server-First y Por Qué Ahora

Server-First no significa abandonar interactividad client-side. Es una filosofía de diseño que prioriza:

1. Renderizar en el servidor por defecto
2. Enviar solo JavaScript necesario al cliente
3. Optimizar automáticamente data fetching
4. Aprovechar infraestructura serverless y edge computing

El movimiento ganó fuerza en 2025 por tres razones principales:

  • Performance: Páginas cargan más rápido con HTML pre-renderizado
  • SEO: Bots indexan contenido completo inmediatamente
  • Developer Experience: Código más simple, menos estado gestionado client-side

Astro: El Pionero del Server-First Moderno

Astro revolucionó el espacio con su abordaje "Island Architecture" - renderiza todo en el servidor, añade interactividad solo donde es necesario.

Mira un ejemplo práctico de componente Astro:

---
// ProductList.astro - Renderizado en el servidor
interface Props {
  category?: string;
}

const { category = 'all' } = Astro.props;

// Data fetching ocurre en el servidor, durante build o request
const response = await fetch(`https://api.example.com/products?category=${category}`);
const products = await response.json();
---

<div class="product-list">
  <h2>Products - {category}</h2>

  <div class="products-grid">
    {products.map(product => (
      <article class="product-card">
        <img src={product.image} alt={product.name} />
        <h3>{product.name}</h3>
        <p>{product.description}</p>
        <p class="price">${product.price}</p>

        <!-- Solo este botón necesita JavaScript -->
        <button
          class="add-to-cart"
          data-product-id={product.id}
        >
          Add to Cart
        </button>
      </article>
    ))}
  </div>
</div>

<!-- JavaScript solo carga para funcionalidad específica -->
<script>
  document.querySelectorAll('.add-to-cart').forEach(button => {
    button.addEventListener('click', (e) => {
      const productId = e.target.dataset.productId;
      // Lógica de añadir al carrito
      addToCart(productId);
    });
  });
</script>

<style>
  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
  }

  .product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
  }

  .price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2563eb;
  }
</style>

Lo que hace esto poderoso: solo el script del botón va para el cliente. Todo lo demás es HTML puro y rápido.

server-first architecture

Islands Architecture: El Secreto de Astro

La gran innovación de Astro es permitir "islas" de interactividad en un océano de contenido estático:

---
// Page.astro
import StaticHeader from './StaticHeader.astro';
import InteractiveSearch from './InteractiveSearch.jsx';
import StaticContent from './StaticContent.astro';
import InteractiveComments from './InteractiveComments.vue';
---

<html>
  <head>
    <title>Island Architecture Demo</title>
  </head>
  <body>
    <!-- Componente estático - sin JS enviado -->
    <StaticHeader />

    <!-- Isla interactiva React - JS solo para este componente -->
    <InteractiveSearch client:load />

    <!-- Contenido estático nuevamente -->
    <StaticContent />

    <!-- Isla interactiva Vue - carga solo cuando visible -->
    <InteractiveComments client:visible />
  </body>
</html>

Directivas de carga en Astro:

  • client:load - Carga inmediatamente
  • client:idle - Carga cuando navegador esté idle
  • client:visible - Carga cuando entre en el viewport
  • client:media - Carga basado en media query
  • client:only - Solo client-side (SSR deshabilitado)

Remix: Server-First con Web Standards

Remix adopta un abordaje diferente: abrazar web standards nativos y aprovechar al máximo el servidor.

// routes/products.$category.tsx (Remix)
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData, Form } from "@remix-run/react";

// Loader corre en el servidor
export async function loader({ params, request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const search = url.searchParams.get("search") || "";

  const products = await db.product.findMany({
    where: {
      category: params.category,
      name: { contains: search }
    }
  });

  return json({ products, category: params.category });
}

// Action también corre en el servidor
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const productId = formData.get("productId");

  await addToCart(productId);

  return json({ success: true });
}

// Componente renderizado en el servidor + hidratado en el cliente
export default function ProductsPage() {
  const { products, category } = useLoaderData<typeof loader>();

  return (
    <div className="products-page">
      <h1>Products: {category}</h1>

      {/* Form funciona incluso sin JavaScript! */}
      <Form method="get" className="search-form">
        <input
          type="search"
          name="search"
          placeholder="Search products..."
        />
        <button type="submit">Search</button>
      </Form>

      <div className="products-grid">
        {products.map(product => (
          <article key={product.id} className="product-card">
            <img src={product.image} alt={product.name} />
            <h3>{product.name}</h3>
            <p>${product.price}</p>

            {/* Form funciona sin JS, pero con JS queda más rápido */}
            <Form method="post">
              <input type="hidden" name="productId" value={product.id} />
              <button type="submit">Add to Cart</button>
            </Form>
          </article>
        ))}
      </div>
    </div>
  );
}

La filosofía Remix: funciona sin JavaScript, mejora con JavaScript.

Next.js 15: Server Components y App Router

Next.js abrazó completamente el Server-First con React Server Components:

// app/products/[category]/page.tsx (Next.js 15)
import { Suspense } from 'react';
import { ProductCard } from '@/components/ProductCard';
import { AddToCartButton } from '@/components/AddToCartButton';

// Server Component por defecto
async function ProductList({ category }: { category: string }) {
  // Fetch corre en el servidor
  const products = await fetch(
    `https://api.example.com/products?category=${category}`,
    { next: { revalidate: 3600 } } // Cache por 1 hora
  ).then(res => res.json());

  return (
    <div className="products-grid">
      {products.map(product => (
        <article key={product.id}>
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>${product.price}</p>

          {/* Client Component solo donde necesario */}
          <AddToCartButton productId={product.id} />
        </article>
      ))}
    </div>
  );
}

// Page Component (Server)
export default function ProductsPage({
  params
}: {
  params: { category: string }
}) {
  return (
    <div>
      <h1>Products: {params.category}</h1>

      <Suspense fallback={<ProductsLoadingSkeleton />}>
        <ProductList category={params.category} />
      </Suspense>
    </div>
  );
}

// Streaming SSR automático!

Client Component cuando necesario:

// components/AddToCartButton.tsx
'use client'; // Marca como Client Component

import { useState } from 'react';

export function AddToCartButton({ productId }: { productId: string }) {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    await fetch('/api/cart', {
      method: 'POST',
      body: JSON.stringify({ productId })
    });
    setLoading(false);
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

Comparación: Astro vs Remix vs Next.js

Aspecto Astro Remix Next.js 15
Filosofía Island Architecture Web Standards First React Server Components
Framework UI Agnóstico (React, Vue, Svelte) Solo React Solo React
Data Fetching Build/request time Loader/Action pattern Server Components
JS Bundle Mínimo por defecto Progressive enhancement Automatic splitting
Mejor Para Content sites, blogs Web apps, forms Full-stack apps
Learning Curve Baja Media Media-Alta
Performance ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐

Data Fetching: El Corazón del Server-First

El gran beneficio del Server-First es data fetching optimizado:

// Astro - Fetch durante build o request
---
const data = await fetch('https://api.example.com/data').then(r => r.json());
---

// Remix - Loader pattern
export async function loader() {
  const data = await db.query();
  return json(data);
}

// Next.js - Server Component
async function DataComponent() {
  const data = await fetchData(); // Corre en el servidor
  return <div>{data}</div>;
}

// Todos evitan waterfall requests del client-side!

Ventajas:

✅ Sin loading states complejos
✅ Acceso directo a la base de datos
✅ Secrets seguros (no filtran al client)
✅ Parallel data fetching automático
✅ Menos JavaScript enviado al cliente

SEO y Performance: Los Grandes Ganadores

Server-First entrega beneficios inmensos para SEO y performance:

// Comparación de bundle size típico:

// SPA tradicional (React puro)
// - React runtime: ~130KB
// - Router: ~20KB
// - State management: ~15KB
// - Data fetching lib: ~10KB
// - Tu código: ~50KB+
// Total: ~225KB+ JavaScript

// Server-First (Astro/Remix/Next.js)
// - HTML inicial: completo e indexable
// - JavaScript: solo para interactividad
// - Bundle típico: ~50-80KB
// Total: 3-4x menor!

Métricas Web Vitals mejoran drásticamente:

  • LCP (Largest Contentful Paint): 40-60% más rápido
  • FID (First Input Delay): Casi cero (HTML ya funcional)
  • CLS (Cumulative Layout Shift): Reducción de 80%+

Edge Computing: El Próximo Nivel del Server-First

En 2025, Server-First combina perfectamente con Edge Computing:

// Vercel Edge Function con Next.js
export const config = {
  runtime: 'edge', // Corre en Edge, cerca del usuario
};

export default async function handler(request: Request) {
  const { searchParams } = new URL(request.url);
  const userId = searchParams.get('userId');

  // Corre en edge, latencia bajísima
  const userData = await fetch(`https://api.example.com/user/${userId}`);

  return new Response(JSON.stringify(userData), {
    headers: { 'content-type': 'application/json' }
  });
}

Edge + Server-First = velocidad global sin CDN complejo.

Cuándo Usar Cada Framework

Usa Astro cuando:

  • Site content-heavy (blog, docs, marketing)
  • Quieres usar múltiples frameworks UI
  • Performance es prioridad máxima
  • No necesitas mucha interactividad

Usa Remix cuando:

  • App web tradicional con forms
  • Quieres progressive enhancement
  • Prefieres web standards a abstracciones
  • Necesitas nested routing robusto

Usa Next.js cuando:

  • Full-stack app complejo
  • Ya usas React
  • Quieres server components nativos
  • Necesitas API routes integradas

El Futuro: Server-First Everywhere

Server-First se está convirtiendo en el estándar:

  • Nuxt 4 (Vue): Server Components planeados
  • SvelteKit: Ya server-first por defecto
  • Solid Start: Server-first con Solid
  • Qwik: Resumability - próximo nivel de server-first

El JavaScript del futuro corre en el servidor, envía solo el mínimo para el cliente.

Si quieres explorar más sobre arquitecturas modernas, revisa: Serverless y Edge Computing: Arquitectura 2025 donde exploramos infraestructura cloud moderna.

¡Vamos a por ello! 🦅

📚 ¿Quieres Profundizar Tus Conocimientos en JavaScript?

Este artículo cubrió Server-First Development, pero hay mucho más para explorar en el mundo del desarrollo moderno.

Desarrolladores que invierten en conocimiento sólido y estructurado tienden a tener más oportunidades en el mercado.

Material de Estudio Completo

Si quieres dominar JavaScript de básico a avanzado, preparé un guía completo:

Opciones de inversión:

  • $9.90 USD (pago único)

👉 Conocer la Guía JavaScript

💡 Material actualizado con las mejores prácticas del mercado

Comentarios (0)

Este artículo aún no tiene comentarios 😢. ¡Sé el primero! 🚀🦅

Añadir comentarios