Jeff Bruchado
Voltar para o Blog

Server-First Frameworks: Como SvelteKit, Astro e Remix Dominam em 2025

Olá HaWkers, o pêndulo do desenvolvimento web voltou para o servidor. Depois de anos de SPAs (Single Page Applications) dominando, frameworks server-first como SvelteKit, Astro e Remix provam que renderizar no servidor traz benefícios impossíveis de ignorar.

Você ainda está escolhendo entre client-side ou server-side rendering? Em 2025, a resposta é: ambos, de forma inteligente.

O Renascimento do Server-Side Rendering

Server-first não significa voltar ao PHP dos anos 2000. São frameworks modernos que combinam o melhor de dois mundos: performance e SEO do servidor com interatividade do client.

Por Que Agora?

Edge Computing Maduro: Plataformas como Cloudflare Workers, Vercel Edge e Deno Deploy permitem SSR (Server-Side Rendering) com latência mínima globalmente.

Core Web Vitals Importam: Google prioriza sites rápidos. SSR oferece FCP (First Contentful Paint) e LCP (Largest Contentful Paint) superiores.

JavaScript Overload: SPAs enviam megabytes de JavaScript. Server-first envia HTML, hidratando apenas o necessário.

SEO Sem Truques: Crawlers veem conteúdo real imediatamente, não precisam executar JavaScript.

// SvelteKit - Server-first com elegância
// src/routes/blog/[slug]/+page.server.js

import { error } from '@sveltejs/kit';
import { db } from '$lib/database';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params, depends }) {
  // Código roda APENAS no servidor
  // Secrets seguros, acesso direto ao DB
  depends('post:' + params.slug);

  const post = await db.query(
    'SELECT * FROM posts WHERE slug = $1',
    [params.slug]
  );

  if (!post) {
    throw error(404, 'Post não encontrado');
  }

  // Retorna dados - automaticamente serializados
  return {
    post,
    relatedPosts: await db.query(
      'SELECT * FROM posts WHERE category = $1 LIMIT 3',
      [post.category]
    )
  };
}

// src/routes/blog/[slug]/+page.svelte
<script>
  // Dados vêm do servidor, tipados automaticamente
  export let data;

  // JavaScript MÍNIMO enviado ao cliente
  // Apenas para interatividade real
  let likes = data.post.likes;

  async function handleLike() {
    // Mutation com invalidação automática
    const response = await fetch(`/api/posts/${data.post.id}/like`, {
      method: 'POST'
    });

    if (response.ok) {
      likes += 1;
    }
  }
</script>

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

  <div class="content">
    {@html data.post.content}
  </div>

  <!-- Interatividade onde necessário -->
  <button on:click={handleLike}>
    ❤️ {likes} likes
  </button>

  <!-- Hidratação seletiva -->
  <aside>
    <h2>Posts Relacionados</h2>
    {#each data.relatedPosts as related}
      <a href="/blog/{related.slug}">
        {related.title}
      </a>
    {/each}
  </aside>
</article>

// Astro - Otimização extrema
// src/pages/blog/[slug].astro
---
import Layout from '@layouts/BlogLayout.astro';
import { getPost, getRelatedPosts } from '@lib/api';

// Build-time data fetching para conteúdo estático
export async function getStaticPaths() {
  const posts = await getAllPosts();

  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }));
}

const { slug } = Astro.params;
const post = await getPost(slug);
const relatedPosts = await getRelatedPosts(post.id);
---

<Layout title={post.title}>
  <article>
    <h1>{post.title}</h1>

    <!-- Conteúdo estático - zero JavaScript -->
    <div set:html={post.content} />

    <!-- Componente interativo - JavaScript apenas aqui -->
    <LikeButton
      client:visible
      postId={post.id}
      initialLikes={post.likes}
    />

    <!-- Island Architecture: hidratação seletiva -->
    <aside>
      <h2>Posts Relacionados</h2>
      {relatedPosts.map(related => (
        <a href={`/blog/${related.slug}`}>
          {related.title}
        </a>
      ))}
    </aside>
  </article>
</Layout>

// Remix - Data loading poderoso
// app/routes/blog.$slug.tsx

import { json, type LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData, useFetcher } from '@remix-run/react';
import { db } from '~/lib/database';

// Loader roda no servidor
export async function loader({ params }: LoaderFunctionArgs) {
  const post = await db.post.findUnique({
    where: { slug: params.slug },
    include: { author: true, comments: true }
  });

  if (!post) {
    throw new Response('Not Found', { status: 404 });
  }

  return json({
    post,
    relatedPosts: await db.post.findMany({
      where: { categoryId: post.categoryId },
      take: 3
    })
  });
}

// Action para mutations
export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const intent = formData.get('intent');

  if (intent === 'like') {
    await db.post.update({
      where: { slug: params.slug },
      data: { likes: { increment: 1 } }
    });

    return json({ success: true });
  }

  return json({ success: false }, { status: 400 });
}

// Componente funciona com e sem JavaScript
export default function BlogPost() {
  const { post, relatedPosts } = useLoaderData<typeof loader>();
  const fetcher = useFetcher();

  return (
    <article>
      <h1>{post.title}</h1>

      <div dangerouslySetInnerHTML={{ __html: post.content }} />

      {/* Progressive enhancement: funciona sem JS */}
      <fetcher.Form method="post">
        <input type="hidden" name="intent" value="like" />
        <button type="submit">
          ❤️ {post.likes} likes
        </button>
      </fetcher.Form>

      <aside>
        <h2>Posts Relacionados</h2>
        {relatedPosts.map(related => (
          <a key={related.id} href={`/blog/${related.slug}`}>
            {related.title}
          </a>
        ))}
      </aside>
    </article>
  );
}

Server-first framework renderizando HTML otimizado

Comparando os Três Gigantes

SvelteKit: Elegância e Performance

Pontos Fortes:

  • Compilador gera código minúsculo
  • Reatividade nativa sem Virtual DOM
  • API simples e intuitiva
  • TypeScript first-class

Ideal Para:

  • Dashboards interativos
  • Aplicações com muita interatividade
  • Projetos que valorizam DX (Developer Experience)

Astro: Otimização Extrema

Pontos Fortes:

  • Zero JavaScript por padrão
  • Island Architecture: hidratação seletiva
  • Suporta múltiplos frameworks (React, Vue, Svelte juntos)
  • Build-time optimization

Ideal Para:

  • Blogs e sites de conteúdo
  • Landing pages
  • Documentação
  • Qualquer site focado em SEO

Remix: Full-stack Moderno

Pontos Fortes:

  • Data loading/mutations elegantes
  • Progressive enhancement nativo
  • Nested routes poderosas
  • Error boundaries robustos

Ideal Para:

  • Aplicações full-stack complexas
  • Sites que precisam funcionar sem JS
  • Projetos que valorizam web standards

Padrões Arquiteturais Modernos

Islands Architecture (Astro)

Apenas componentes interativos são hidratados. Resto é HTML estático.

<!-- Conteúdo estático - zero JS -->
<Header />
<article>
  <h1>{post.title}</h1>
  <p>{post.excerpt}</p>
</article>

<!-- Islands interativas - JS apenas aqui -->
<CommentSection client:visible postId={post.id} />
<ShareButtons client:idle />
<NewsletterForm client:load />

Progressive Enhancement (Remix)

Aplicação funciona completamente sem JavaScript, mas melhora com ele:

// Funciona sem JS: form POST tradicional
// Com JS: intercepta e usa fetch
<Form method="post">
  <input name="email" type="email" required />
  <button type="submit">Subscribe</button>
</Form>

Streaming SSR (Todos)

Envia HTML progressivamente enquanto renderiza:

// SvelteKit
export async function load() {
  return {
    // Dados críticos: aguarda
    post: await getPost(),

    // Dados secundários: stream
    comments: getComments() // Promise - streamed
  };
}

Migração de SPA para Server-First

Estratégia Incremental

  1. Identifique páginas estáticas: Blog, landing pages → migre primeiro
  2. Páginas dinâmicas com SEO: Produto pages → use SSR
  3. Dashboards privados: Podem continuar client-side

Código Compartilhado

Todos frameworks suportam código isomórfico:

// lib/api.ts - Roda no servidor E cliente
export async function getPost(slug: string) {
  // No servidor: acesso direto ao DB
  if (typeof window === 'undefined') {
    return db.post.findUnique({ where: { slug } });
  }

  // No cliente: fetch API
  const response = await fetch(`/api/posts/${slug}`);
  return response.json();
}

Desafios e Soluções

State Management

Desafio: Sincronizar estado entre servidor e cliente.

Solução: Use loaders/actions (Remix), stores com SSR (SvelteKit), ou props (Astro).

Authentication

Desafio: Cookies, sessions, tokens em SSR.

Solução: Todos frameworks têm helpers para auth. Use cookies HTTP-only para segurança máxima.

Real-time Features

Desafio: WebSockets com SSR é complexo.

Solução: Use progressive enhancement. SSR para load inicial, upgrade para WebSocket no cliente.

Se você quer entender como frameworks modernos se beneficiam de type safety, leia: TypeScript em 2025: Por Que 38% dos Desenvolvedores Usam Diariamente.

Bora pra cima! 🦅

Comentários (0)

Esse artigo ainda não possui comentários 😢. Seja o primeiro! 🚀🦅

Adicionar comentário