Lunover Engineering Notes

Como estructurar un codebase de agencia web para escalar

Un patron de arquitectura escalable para delivery en agencia: limites de contenido, secciones reutilizables, rutas deterministicas, helpers de metadata y reglas de enlazado interno.

February 10, 2025By LunoverWork with us

Como estructurar un codebase de agencia web para escalar

Si cada pagina nueva requiere un componente de pagina nuevo, el codebase de una agencia se convierte en un cuello de botella. La solucion no es "mas componentes". La solucion es un modelo de contenido estricto, routing predecible y secciones reutilizables que se mantengan SEO-safe conforme el sitio crece.

Que estas optimizando

  • publicar rapido sin que el layout se degrade
  • menos regresiones en navegacion/SEO
  • publicacion de contenido predecible
  • enlazado interno facil entre articulos y servicios

1. Separa contenido de renderizado

Una regla simple que escala: el contenido vive en MDX (o un CMS), el render vive en componentes. El contenido deberia incluir:
  • title, description, slug
  • opcional: fecha de publicacion e imagen
  • datos especificos de pagina (FAQs, testimonios, bullets de features)
El renderizado deberia incluir:
  • layout del hero
  • layouts de secciones
  • tipografia y espaciado
  • patrones de CTA compartidos
Esto evita la trampa de "copiar/pegar paginas".

2. Estandariza tu sistema de secciones

Define un conjunto pequeno de secciones y reutilizalas en todas partes:
  • Hero
  • grid de servicios
  • pasos de proceso
  • FAQ
  • CTA
  • testimonios
Haz que las secciones sean data-driven para que cambios de contenido no requieran cambios de layout.

3. Mantén el routing deterministico

Familias de rutas predecibles te permiten automatizar SEO con seguridad:
  • /services/[slug]
  • /blog/[slug]
  • /legal/[slug]
Cuando las rutas son consistentes, puedes generar:
  • canonical URLs
  • alternates/hreflang
  • entradas de sitemap
  • output de schema
sin codigo custom por ruta.

4. Centraliza la generacion de metadata

La metadata no es un detalle de copywriting. Es infraestructura. Pon la logica de canonical/hreflang/robots en un helper y reutilizala en todas las rutas. Si tu sitio es multilingue, los alternates deben derivarse de disponibilidad real de contenido, no de sustitucion de strings. Ver: Next.js 16 SEO Checklist for Production

5. Trata los enlaces internos como arquitectura

Los enlaces internos son como conectas autoridad tecnica con intencion comercial. Una regla que funciona bien en sitios de agencia:
  • cada post tecnico enlaza a un servicio relevante
  • cada pagina de servicio enlaza a un post tecnico relevante
Empieza por estos anchors: Luego construye clusters:
  • posts de implementacion SEO -> /services/seo
  • posts de performance/Next.js -> /services/web-development

6. Layout de carpetas recomendado

Ejemplo (App Router + MDX):
src/
  app/
    [locale]/
      (pages)/
        blog/
          [slug]/page.tsx
        services/
          [slug]/page.tsx
  lib/
    seo-helpers.ts
    mdx-helpers.ts
  markdown/
    en/
      pages/
      blog/
El objetivo es un camino consistente de:
  • contenido -> ruta -> metadata -> schema -> sitemap

7. Checklist de publicacion (no negociable)

Antes de publicar una pagina, confirma:
  • el frontmatter existe (title, description, slug)
  • la pagina tiene una intencion primaria clara
  • la canonical URL es correcta
  • existen enlaces internos (a servicios y a articulos relacionados)