Desarrollo frontend

Next.js, React y TypeScript en producción. Aquí reunimos caché, server components y server actions, rendimiento y los patrones que mantenemos.

32 artículos

Empieza aquí

A thin upper lane of small tiles with a dashed empty outline in it, a curved arrow down to the same tile lit on a wide lower lane carrying a block of packages and a long bar

Web

Edge runtime o Node runtime: qué cambia en Next.js 16

Next.js 16 mueve el middleware al runtime de Node y lo renombra proxy.ts. Dónde gana Edge en latencia y dónde gana Node con dependencias y tareas largas.

Six staggered bars in a waterfall on a dark grid, five short and dark, one long and white running past a dashed vertical line to a page outline on the right

Web

¿Por qué mi web va lenta? Las 6 causas y cómo arreglarlas

Solo el 48% de las webs en móvil aprueba las Core Web Vitals. Las seis causas de una web lenta, cómo dar con la tuya en PageSpeed Insights y qué la arregla.

A grid of twelve dark tiles with six lit white, each lit tile circled by a progress ring of a different length; three threads run from the right column of tiles to one lit pill on the right, and the middle tile of that column glows brighter with a full ring

Web

La caché de Next.js 16: use cache, cacheLife y updateTag

En Next.js 16 nada se cachea hasta que escribes 'use cache'. Cómo encajan los siete perfiles de cacheLife, cacheTag y updateTag, y qué cambia para fetch.

One white tile branching into hundreds of dark ones, four paths lit to the far edge

Web

Dependencias npm sin control: los 4 costes en frontends enterprise

Sonatype registró 454.600 paquetes maliciosos en 2025 y el 99,8% del malware del cuarto trimestre venía de npm. Lo que cuesta y cómo lo frenamos.

A tree of tiles split by a dashed white line, dark tiles above and lit tiles below, six crossings of the line marked with rings

Web

React Server Components en producción: 6 fallos a evitar en 2026

El 45% de los desarrolladores React ya usa Server Components, pero en el State of React 2025 son la tercera función menos querida. Seis fallos lo explican.

A terminal window with one lit error line, wired from its edge to five dark tiles on the right: an error log, a route list, a component tree, a browser and a plug

Web

Agent DevTools de Next.js: depurar con IA en 2026

Next.js 16.3 da a los agentes acceso desde el terminal a errores de build, rutas y árbol de React. El montaje de MCP y agent-browser, en cinco pasos.

Five rows from button to server: three lit rows passing three lit check tiles each, two dim rows below with empty dashed slots going straight in

Web

Server Actions de Next.js en producción: qué usamos y qué evitamos

Cada Server Action que exportas es un endpoint POST público sin autenticación. Estos son los patrones de Next.js 16 que llevamos a producción y los que rechazamos.

On a white ground, a row of ten grey blocks above, and below it a single black block doing the same work with nine empty outlines after it

Web

El compilador en Go de TypeScript 7: qué cambia el 10x de velocidad

TypeScript 7 reescribe tsc en Go y comprueba los tipos del repo de VS Code (1,5 millones de líneas) en 7,5s en lugar de 78. Qué cambia para el equipo.

A solid grey page shell with three holes; one is filled white, and chunks of white stream from the right into the other two

Web

Partial Prerendering estable en Next.js 16: cómo estructurar rutas

Next.js 16 hace estable Partial Prerendering con cacheComponents: un shell estático desde el edge de la CDN y las partes dinámicas en streaming.

A white tile with a few neat lit dependencies, a bright vertical cut line, and beyond it a fading cloud of hundreds of grey specks

Web

Proliferación de dependencias npm: coste real y cómo reducirla

Un proyecto Next.js recién creado instala más de 1.000 paquetes antes del código. Esto cuesta la proliferación de dependencias npm y así la reducimos.

Five request bars sharing one prefix, the first fully lit and four as outlines lit only for a tenth of their length, streaming into an answer panel of token chips

API de Anthropic en Next.js: streaming, caché y control de costes

Cómo conectar Claude a una app Next.js: route handler en el servidor, streaming SSE, prefijo cacheado al 10% de entrada y reintentos que aguantan un 429.

Three address bars differing only in a lit first segment, joined by curves into one lit node, which feeds a stack of three identical page panels

Web

i18n en Next.js sin librería: el patrón del App Router

El App Router de Next.js no trae i18n integrado. Servimos tres idiomas con routing nativo y cero dependencias. Este es el patrón que usamos en producción.

Three stacked isometric plates, the top one lit with data dots, the middle one carrying branching routes, the bottom one striped, with two small plates beside them

Web

TanStack en 2026: Query, Router, Start y qué resuelve cada uno

TanStack Query supera los 12 millones de descargas semanales. La familia cubre routing, tablas, formularios y un framework full-stack. Qué resuelve cada uno.

Left, three lit tiles each shown sliding, scaling and fading as faint copies; right, a glowing white wireframe surface of many points in a wave

Web

WebGL o animaciones CSS: cuándo usar cada una (2026)

CSS anima transform y opacity fuera del hilo principal, gratis. WebGL te da la GPU en bruto. Aquí está la línea entre ambos, con los costes de bundle y batería.

A scattered heap of grey files joined by lines into one lit file, which feeds a text panel whose lines sit exactly inside their dashed outlines

Web

Rendimiento de fuentes web: un solo WOFF2, cero saltos

Una familia sin optimizar añade 500KB y retrasa el texto legible. Haz subset a WOFF2, alójala tú y ajusta el fallback con size-adjust: nada se mueve al swap.

A ring gauge lit for less than half its length, the rest broken into six dark segments, beside six lanes of tasks each with one long white block past a dashed limit

Web

6 errores de frontend que hunden tu puntuación de Lighthouse en 2026

El Total Blocking Time pesa el 30% de la puntuación de Lighthouse, pero casi todos optimizan la métrica equivocada. Seis errores en producción y cómo corregirlos.

Sixty dim tiles in a wide grid on the left, and nine lit tiles packed into a container inside a small server panel on the right

Infra

Vercel o Docker para Next.js: de 600$ al mes a unos 90$

Una factura de Vercel de 600$ baja a unos 90$ al mes en un VPS gestionado con Docker. Qué pierdes en edge, escalado y DX, y cuándo compensa el cambio.

A dark client tile and a lit server tile joined by one short white line between matching ports of small pills, with a dashed detour through three empty boxes above

Web

RPC con tipos en Server Actions de Next.js: sin capa de API

Un Server Action ya es una RPC. Así se vuelve type-safe de extremo a extremo y validado en runtime, sin ruta de API ni tipo de respuesta que mantener.

One tall glowing white screen full of moving shapes beside a grid of nineteen identical grey document pages

Web

Arquitectura web en 2026: home como app, el resto estático

Casi todos los sitios tratan cada página como una SPA. Nosotros hacemos lo contrario: la home como aplicación, el resto como documentos estáticos. Dos targets.

Three closed white rings holding a large painted block, a pointer with a ripple, and stacked bars on their dashed outlines, each above a meter marked in its good zone

Web

Core Web Vitals en Next.js en 2026: cómo llegar al verde

Pasos concretos para llegar a LCP bajo 2.5s, INP bajo 200ms y CLS bajo 0.1 en un SaaS Next.js 16, y cómo leer el campo cuando Lighthouse miente.

An S-shaped easing curve with a tile repeated along it in fading copies, bunched at the ends; four lit tiles top left, three struck-through outlines bottom right, a scrollbar at the edge

Web

Stack web inmersivo en 2026: Lenis, GSAP, y qué dejar fuera

Lenis (3 kB), GSAP gratis desde abril de 2025, ScrollTrigger para el scroll, y las scroll-driven animations nativas en CSS. El stack que enviamos.

On a white ground, nine black concentric rings around a black core, nine dark lines arriving from outside, each stopped at a different ring

Web

TypeScript strict mode: los 9 ajustes que nunca apagamos

strict: true activa 9 comprobaciones y desde TypeScript 6.0 es el default. Qué atrapa cada flag en producción, más los 3 flags fuera del bundle que añadimos.

Two lanes of weekly tile columns: above, six dashed empty weeks then a steady grey block three tiles high; below, lit columns starting at once and varying in height

Web

Agencia Next.js o equipo interno: cuándo gana cada uno en 2026

Un senior Next.js en EE. UU. cuesta 195 mil dólares al año a coste pleno y seis semanas para llegar. Una agencia arranca desde 60 dólares la hora. Dónde gana cada uno.

A brick wall of dark rounded bricks in which thirteen scattered bricks are lit white

Web

Seguridad de Server Actions Next.js: 13 fallos y arreglos 2026

Next.js corrigió 13 fallos de seguridad en 2026: bypass de middleware, cache poisoning y SSRF. Qué cambió y cómo publicar Server Actions seguras ahora.

A lit card at the centre, a cloud of tiny grey chips drifting away and fading to its left, and three clean lines on its right into three stacked white layers

Web

Por qué quitamos Tailwind de producción: un design system solo CSS

Tras años usando Tailwind junto a nuestro design system, lo retiramos de producción. Esta es la arquitectura que lo reemplazó y lo que cambió.

Three layers pulled apart in a stack; on the front one the same card appears wide in one container and stacked in a narrow lit one

Web

CSS moderno 2026: cascade layers, container queries, :has()

Cascade layers cierran las guerras de especificidad, container queries sustituyen media queries por componente y :has() corre en todo navegador. Qué adoptar.

A balance on an open-A fulcrum, tipped: the lower pan holds a dense block of lit tiles, the raised pan a quiet page with two small lit islands

Web

Por qué seguimos eligiendo Next.js sobre Astro para SaaS en 2026

Este año hemos enviado tanto Next.js como Astro. Para SaaS, Next.js sigue siendo nuestra opción. Este es el trade-off honesto en 2026.

On a white ground, a grid of tiles swept by a black vertical line: black tiles with a white dot behind it, two dashed empty ones, one ringed, and grey tiles ahead

Web

Directivas de React Compiler 1.0: use memo y use no memo

React Compiler 1.0 memoiza casi todos los componentes en build. Dónde aplican las dos directivas y dónde useMemo y useCallback siguen valiendo la pena.

Three stacked bands: three lit tiles on top, six swatch pills in the middle and eighteen small chips at the bottom, each joined by lines to the one above

Diseño

Design tokens vs variables CSS vs Tailwind, explicado (2026)

Los design tokens, las variables CSS y Tailwind ocupan tres capas: significado, valores en runtime y clases utility. Cómo elegir y cómo se combinan.

A dark app window with a lit port on its right edge; a line from it passes a lit lock, with a stack of pills hung below, to a large lit tile; four dashed branches end in hollow rings

Servidor MCP en Next.js: mcp-handler, OAuth 2.1, sesiones Redis

Monta un servidor MCP en un SaaS Next.js 16 ya en producción con mcp-handler: ruta de transporte dinámica, OAuth 2.1, sesiones en Redis y 4 fallos típicos.

Five diamond shapes in a row joined by a line to a large dark tile, each with a branch down to a small tile; a white path runs through three diamonds and drops at the fourth to a lit tile

Web

Server Components vs Client Components: el árbol de decisión que seguimos

El árbol de decisión de cinco pasos que aplicamos en cada proyecto Next.js 16 para decidir cuándo un componente queda en el servidor y cuándo necesita "use client".

A full wall of dark tiles split by three glowing white fault lines that step down through the gaps, the pieces between them slightly shifted

Web

Next.js 16 y React 19: los 3 breaking changes para SaaS en 2026

Turbopack es el bundler por defecto, las API de petición (params, cookies) ya son asíncronas y React Compiler 1.0 es estable. Qué se rompe al dejar Next 15.

Volver a Apuntes