TanStack acaba de arreglar la peor idea de React

Los Server Components (RSCs) de React han encendido una guerra civil entre los desarrolladores. Introducidos como una primitiva potente, su implementación generalizada se ha convertido en una fuente de intensa frustración, provocando debates donde a menudo prevalece el sentimiento de "mayormente los odio hoy en día". Muchos ven los RSCs no como una mejora, sino como una imposición compleja.

Next.js, el framework dominante que aprovecha los RSCs, dictó en gran medida este paradigma polémico. Su enfoque server-first obligó a los desarrolladores a un modelo donde el servidor "posee el árbol", y la directiva `use client` se convirtió en una vía de escape necesaria para la interactividad. Este diseño transformó los RSCs de una "primitiva útil en una cosa alrededor de la cual toda tu aplicación tiene que orbitar", como se destacó en un Anuncio reciente.

Ahora, un nuevo contendiente ha entrado en juego, prometiendo cambiar fundamentalmente esta narrativa. TanStack Start acaba de lanzar su propia implementación de Server Components, adoptando un enfoque radicalmente diferente que finalmente podría convencer a los escépticos. Este framework desafía la noción de que los desarrolladores deben comprometerse completamente con una arquitectura server-first para beneficiarse de los RSCs.

En lugar de adoptar por defecto un modelo centrado en el servidor, TanStack Start defiende una filosofía client-first. Permite a los desarrolladores optar por los server components con una granularidad sin precedentes, tratándolos "tan granularmente como se podría obtener JSON en el cliente". Esto significa integrar la renderización y la lógica del lado del servidor solo donde proporciona un valor claro, sin reestructurar toda una aplicación.

Esta estrategia deliberada y de suscripción voluntaria tiene como objetivo desmitificar los React Server Components y liberar su potencial sin la complejidad asociada. Al ofrecer un camino que respeta los patrones de desarrollo client-side existentes, TanStack Start podría redefinir la conversación en torno a los RSCs, convirtiendo el escepticismo generalizado en un entusiasmo genuino. El framework ofrece una alternativa convincente al paradigma server-first prevaleciente y a menudo denostado.

La reciente introducción de Server Components por parte de TanStack Start redefine radicalmente su integración en las aplicaciones de React. En lugar de forzar un cambio de paradigma, TanStack defiende una filosofía client-first, permitiendo a los desarrolladores optar por las capacidades del servidor con precisión quirúrgica. Este enfoque contrasta fuertemente con el modelo "server-first" popularizado por Next.js, donde cada componente es por defecto un server component a menos que se marque explícitamente con una directiva `'use client'`.

Next.js enmarca los Server Components como el propietario predeterminado del árbol de componentes, con segmentos `'use client'` que denotan islas interactivas del lado del cliente. Esta arquitectura a menudo obliga a los desarrolladores a reestructurar aplicaciones enteras en torno a la renderización del lado del servidor, incluso cuando solo pequeñas partes se benefician de ella. TanStack rechaza esta propuesta de todo o nada, afirmando que los desarrolladores no deberían "tener que adoptar todo ese modelo de antemano solo para obtener valor de los React server components".

La visión de TanStack trata los Server Components como una primitiva potente, utilizable "tan granularmente como se podría obtener JSON en el cliente". Esto significa que los desarrolladores pueden introducir selectivamente lógica y renderización del lado del servidor precisamente donde ofrece ventajas tangibles, como la reducción del tamaño de los paquetes del cliente o el manejo seguro de datos sensibles. El framework facilita esto a través de funciones de servidor y la API renderServerComponent.

Considere un escenario donde un componente cliente necesita datos solo del servidor, como el nombre de host de un sistema operativo o variables de entorno. TanStack Start permite a los desarrolladores encapsular esta lógica dentro de una función de servidor, que luego devuelve un componente de servidor renderizable a través de `renderServerComponent`. Este componente puede ser luego obtenido e integrado en un cargador de ruta del lado del cliente, al igual que cualquier otro dato.

Este mecanismo explícito y de suscripción voluntaria mantiene el control firmemente en manos del desarrollador. Permite a los equipos aprovechar el poder del servidor para tareas específicas sin alterar fundamentalmente su modelo mental de React establecido. El objetivo es aumentar, no revisar, la experiencia tradicional de desarrollo de React del lado del cliente, asegurando que las capacidades del servidor mejoren en lugar de dictar la arquitectura de la aplicación.

Construir su primer TanStack Server Component revela un flujo de trabajo refrescantemente explícito. Para empezar, defina un componente React simple, como un `Greeting` que requiere datos del lado del servidor, como el nombre de host del sistema operativo. Intentar acceder a APIs de Node.js como `os.hostname()` directamente en un componente cliente estándar fallará, ya que estas funciones no están disponibles en el entorno del navegador.

TanStack introduce funciones de servidor para encapsular la lógica del lado del servidor. Considere una función `getGreeting`, que se convierte en su puerta de entrada al código ejecutado en el servidor. Dentro de esta función de servidor, invoca la primitiva `renderServerComponent`, envolviendo su componente `Greeting`. Esta función crucial prepara el componente para la renderización en el servidor, transformándolo efectivamente en una unidad autocontenida y renderizable.

```typescript // server/functions/getGreeting.ts import { renderServerComponent } from '@tanstack/start'; import { Greeting } from '../components/Greeting'; import os from 'os';

export async function getGreeting() { const hostname = os.hostname(); const serverOnlyVar = process.env.SECRET_KEY || 'N/A'; return renderServerComponent(<Greeting hostname={hostname} secret={serverOnlyVar} />); } ```

A continuación, integre este componente renderizado en el servidor en el flujo de datos de su aplicación. Dentro de un cargador de ruta, que se ejecuta puramente en el servidor, simplemente `await getGreeting()`. Esto obtiene el componente pre-renderizado de su función de servidor, tal como lo haría con cualquier otro dato. El cargador luego devuelve este componente, listo para su consumo.

```typescript // app/routes/index.tsx import { createFileRoute, useLoaderData } from '@tanstack/react-router'; import { getGreeting } from '../../server/functions/getGreeting';

export const Route = createFileRoute('/')({ loader: async () => { return { serverGreeting: await getGreeting(), }; }, component: function Index() { const { serverGreeting } = useLoaderData<typeof Route.loader>(); return ( <div> {serverGreeting} </div> ); }, }); ```

En el cliente, use `useLoaderData` para recuperar el componente del servidor. Luego puede renderizarlo directamente en su JSX, exactamente como un componente cliente regular. Esta integración perfecta resalta la filosofía de TanStack de "cliente primero"; los Server Components funcionan como otro tipo de datos que se obtienen y se muestran, no como una arquitectura predeterminada. Para una comprensión más amplia de los conceptos de componentes de servidor, incluido el enfoque "server-first", explore Getting Started: Server and Client Components - Next.js.

El poder de este enfoque se hace inmediatamente evidente. Dentro de su función de servidor `getGreeting`, puede acceder con confianza a recursos exclusivos del servidor. Imagine obtener `os.hostname()` o leer de forma segura variables de entorno no disponibles para el cliente. Estas operaciones se ejecutan puramente en el servidor, con solo el HTML renderizado entregado al navegador, mejorando tanto la seguridad como el rendimiento. Esta separación explícita deja claro exactamente dónde se ejecuta su código, un marcado contraste con los modelos implícitos de 'server-first'.

Este método simplifica radicalmente el modelo mental para los desarrolladores. Su aplicación React permanece centrada en el cliente por defecto, lo que le permite optar por capacidades de servidor de forma granular. Los desarrolladores obtienen los beneficios de tamaños de paquete reducidos y acceso directo a los recursos de backend sin la sobrecarga cognitiva de un paradigma forzado por el servidor. La implementación se siente intuitiva, tratando los componentes de servidor como una característica potente y opcional, en lugar de una restricción general en toda la arquitectura de su aplicación.

Los beneficios para la experiencia del desarrollador del modelo explícito de TanStack son inmediatos y profundos, eliminando la ambigüedad común de los React Server Components. El código destinado al servidor se ejecuta inequívocamente dentro de una función de servidor dedicada, eliminando toda duda sobre su entorno de ejecución. Esta clara demarcación, que a menudo aprovecha el wrapper `renderServerComponent`, asegura que los desarrolladores sepan instantáneamente dónde se ejecutará la lógica específica ligada al servidor, como la obtención de `os.hostname()` o el acceso a variables de entorno sensibles exclusivas del servidor. Esta franqueza elimina la sobrecarga mental de inferir contextos de ejecución, proporcionando una claridad esencial desde la primera línea de código.

Este diseño explícito mejora radicalmente la reutilización y mantenibilidad de los componentes en una aplicación. Un componente React en sí mismo puede permanecer "tonto", completamente ajeno a si se renderiza en el cliente o en el servidor. Toda la lógica del lado del servidor, la obtención de datos y el procesamiento están limpiamente encapsulados dentro de las funciones de servidor y luego se pasan al componente a través de props estándar. Este potente patrón desacopla eficazmente la lógica de renderizado del componente de su origen de datos, haciendo que los componentes sean inherentemente más portátiles, testeables y adaptables a través de varios contextos de aplicación sin requerir modificaciones internas para la conciencia del servidor.

Contraste esto con el potencial de confusión inherente en Next.js, donde el modelo predeterminado "server-first" a menudo difumina el límite cliente/servidor. Sin un wrapper explícito de función de servidor, los desarrolladores deben depender en gran medida de la directiva `use client` y, a menudo, de convenciones sutiles del framework para inferir contextos de ejecución. Esto puede llevar a errores de tiempo de ejecución inesperados, una hinchazón innecesaria del paquete del lado del cliente debido a código exclusivo del servidor y una comprensión fragmentada del comportamiento de los componentes. El enfoque client-first de TanStack, que trata los Server Components como una característica opcional, tan granularmente como la obtención de JSON, fomenta un modelo mental intuitivo donde la lógica del servidor se invoca a propósito, no se asume implícitamente ni se activa accidentalmente por la ubicación del componente.

TanStack Start mantiene un soporte explícito para la directiva `use client`, asegurando la compatibilidad y proporcionando una vía de escape familiar para los desarrolladores que transicionan desde otros frameworks. Colocar esta directiva en la parte superior de un archivo marca inequívocamente un componente y todo su subárbol como del lado del cliente, permitiendo una interactividad completa, incluyendo la gestión de estado local a través de `useState` y el manejo de eventos DOM.

Sin embargo, depender extensivamente de `use client` para incrustar componentes interactivos dentro de un árbol de componentes predominantemente de servidor presenta desafíos arquitectónicos considerables, particularmente evidentes en el modelo de Next.js. Allí, un componente de servidor frecuentemente asume la responsabilidad directa de renderizar y orquestar la presencia de componentes de cliente, creando una jerarquía implícita donde la lógica del servidor dicta la interactividad del cliente.

Esta propiedad directa de componente de servidor a cliente cultiva un árbol de dependencias desordenado. Un componente de servidor, fundamentalmente diseñado para la entrega de contenido estático y la obtención de datos, se vuelve directamente responsable del renderizado, el flujo de control e incluso la existencia de sus hijos interactivos del lado del cliente. Este acoplamiento estrecho dificulta innecesariamente el seguimiento de los ciclos de vida de los componentes y la comprensión del flujo de datos explícito a través del límite servidor/cliente.

Navegar por esta lógica entrelazada disminuye rápidamente la productividad del desarrollador y hace que el razonamiento sobre las responsabilidades de los componentes sea opaco. Por ejemplo, diagnosticar un problema con un `CounterButton` interactivo podría implicar atravesar múltiples componentes de servidor antes de finalmente identificar el componente marcado con `use client`. Este camino intrincado difumina la distinción crucial entre las preocupaciones del servidor y del cliente, dificultando la mantenibilidad.

Más allá de la navegación, este modelo implica inherentemente que un componente de servidor *controla* un componente de cliente. Si un componente de servidor renderiza condicionalmente un componente de cliente, el servidor dicta efectivamente cuándo y cómo aparece esa interactividad del lado del cliente. Este paradigma puede parecer contraintuitivo cuando el objetivo principal es descargar la interactividad y su sobrecarga asociada completamente al cliente, no gestionar su presencia desde el servidor.

TanStack vislumbra un enfoque diferente, uno que cuestiona fundamentalmente este mandato impulsado por el servidor sobre la interactividad del cliente. Plantea una pregunta crucial que cambia el paradigma: ¿Qué pasaría si el servidor no necesitara decidir en absoluto cada parte de la UI con forma de cliente? Esta redefinición radical de la interacción servidor-cliente promete una arquitectura más explícita, manejable y, en última instancia, más intuitiva para las aplicaciones modernas de React.

TanStack introduce Composite Components, una solución novedosa que aborda las complejidades inherentes de la composición cliente-servidor en React. Si bien la familiar directiva `use client` proporciona una vía de escape necesaria para integrar elementos interactivos en Server Components, los límites de `use client` profundamente anidados a menudo conducen a un modelo mental complicado, difuminando la línea clara entre la ejecución del servidor y del cliente y dificultando la propiedad de los componentes. El enfoque de TanStack ofrece una separación radicalmente más limpia.

En lugar de que un Server Component intente renderizar un Client Component directamente —un patrón que falla porque los entornos de servidor no pueden ejecutar hooks del lado del cliente— los Composite Components invierten esta relación. Aquí, el Server Component define explícitamente un "slot" o marcador de posición conceptual. Este slot, a menudo representado por props `children` estándar o render props específicamente nombradas, indica precisamente dónde *se* colocará el contenido interactivo del lado del cliente. El servidor dicta la estructura estática y los datos, dejando explícitamente áreas designadas para la interactividad del cliente.

Los desarrolladores implementan este potente patrón utilizando la función auxiliar `createCompositeComponent`, que se ejecuta en el servidor. Esta función toma un componente renderizado en el servidor y define sus slots esperados del lado del cliente, especificando sus tipos. Luego, la función auxiliar construye una "composite source" —una carga útil ligera, declarativa y serializable. El servidor transmite esta "composite source" al cliente, delineando efectivamente la estructura renderizada del servidor y sus áreas interactivas designadas.

En el cliente, el envoltorio especial `<CompositeComponent>` recibe esta "fuente compuesta". El código del lado del cliente luego renderiza el componente obtenido del servidor *a través* de este envoltorio, permitiendo que la salida estática del servidor se renderice. Crucialmente, cualquier Client Component interactivo se pasa *al* slot definido de `<CompositeComponent>`, en lugar de anidarse directamente dentro del JSX del componente del servidor. Esto asegura que el componente del cliente se ejecute en su entorno adecuado, manteniendo la propiedad de su interactividad.

Este modelo explícito basado en slots elimina la ambigüedad de "¿dónde se está ejecutando este componente?" que a menudo afecta a los árboles profundos de `use client`. Refuerza la filosofía de cliente-primero central de TanStack Start, permitiendo a los desarrolladores integrar Server Components de forma tan granular como la obtención de JSON sin sacrificar la claridad. Para una comprensión más profunda del renderizado del lado del servidor de React, consulte Server Components - React. Los Composite Components aseguran un flujo claro y unidireccional, con el cliente controlando sus piezas interactivas, incluso al integrar estructuras proporcionadas por el servidor.

Los Composite Components remodelan fundamentalmente la arquitectura de React, invirtiendo el flujo de control convencional establecido por frameworks como Next.js. Este enfoque novedoso invierte completamente el guion: el código del cliente ahora dicta dónde residen los elementos interactivos, en lugar de que el servidor dicte dónde se pueden colocar los componentes del cliente. En cambio, los componentes del servidor proporcionan "slots" bien definidos, actuando como plantillas flexibles para el contenido del lado del cliente.

Este cambio de paradigma restablece una vital separación de preocupaciones. El código del servidor puede centrarse puramente en la obtención de datos, la lógica de negocio y la renderización de UI estáticas o dependientes del servidor. Proporciona la estructura fundamental y el contenido inicial, entregando eficientemente una base de rendimiento. El código del cliente, por el contrario, asume la plena propiedad de la interactividad, la gestión del estado y los elementos dinámicos de la UI, llenando los slots designados por el servidor.

Los desarrolladores obtienen un modelo potente y explícito para definir el límite cliente-servidor. Los componentes del cliente, como el ejemplo del contador que a menudo se usa para demostrar la interactividad, ya no requieren la directiva `'use client'`, a menudo confusa, cuando se integran a través de Composite Components. Su contexto es inherentemente del lado del cliente, lo que hace que su naturaleza interactiva sea evidente por sí misma y elimina el código repetitivo.

La visión de TanStack, como se describe en su Announcement, trata a los Server Components como una primitiva potente a la que optar, no como un valor predeterminado. Esta filosofía de cliente-primero brilla a través de los Composite Components, empoderando a los desarrolladores para construir aplicaciones complejas e híbridas con una claridad sin precedentes. El cliente se convierte en el orquestador de su propia experiencia interactiva, integrando sin problemas segmentos renderizados por el servidor.

Esta inversión arquitectónica previene el "desorden" de componentes de cliente profundamente anidados dentro de árboles de servidor, un punto de dolor común en los modelos server-first. Ofrece un modelo mental más intuitivo, alineándose con el desarrollo tradicional de React mientras aprovecha los beneficios de rendimiento del renderizado del servidor. El contrato explícito entre los slots del servidor y los rellenos del cliente clarifica la intención y simplifica la depuración.

Al dar al código del cliente control sobre su dominio interactivo, TanStack Start ofrece un camino radicalmente diferente y más amigable para el desarrollador para integrar Server Components. Este enfoque promete un futuro donde las capacidades del servidor de React aumentan, en lugar de dictar, la experiencia del cliente.

Más allá de la prop `children` básica, que ofrece un punto de inyección de contenido simple, TanStack Server Components desbloquean patrones de composición significativamente más sofisticados. Estos "slots" avanzados permiten a los desarrolladores diseñar componentes de servidor que dan forma dinámicamente a la experiencia de renderizado del lado del cliente, pasando datos calculados en el servidor directamente a componentes de cliente anidados. Esta capacidad va mucho más allá del contenido estático, permitiendo una verdadera colaboración cliente-servidor dentro del árbol de componentes.

Un patrón potente implica Render Props. Aquí, un componente de servidor define una prop que acepta explícitamente una función como su valor. Cuando el componente de servidor se renderiza, invoca esta función, pasando datos calculados en el servidor —como un `postID` o `authorID`— como argumentos. El componente de cliente proporcionado a este slot luego recibe y utiliza estos datos originados en el servidor, permitiendo una generación de UI de cliente altamente dinámica y basada en datos desde un padre renderizado en el servidor.

Una alternativa más simple y a menudo más ergonómica surge a través de Component Props. En lugar de una función, el propio componente de cliente se pasa directamente como una prop al componente de servidor. El componente de servidor, preconfigurado con conocimiento de la forma de datos esperada, luego inyecta inteligentemente las props de datos relevantes del lado del servidor directamente en este componente de cliente. Esto reduce el código repetitivo, agilizando el proceso de composición de la lógica del cliente con el contexto proporcionado por el servidor.

Un matiz arquitectónico crítico de estos slots dinámicos es su naturaleza opaca para el servidor. El componente de servidor entiende que necesita proporcionar datos específicos a un slot dado; sin embargo, no tiene conocimiento inherente del componente de cliente real que finalmente se renderizará allí. Esta estricta separación de preocupaciones garantiza la máxima flexibilidad, permitiendo a los desarrolladores de cliente intercambiar implementaciones de UI sin requerir ningún cambio en el componente del lado del servidor que proporciona los datos.

Estos mecanismos de slot avanzados redefinen fundamentalmente cómo interactúan los componentes de cliente y servidor. Proporcionan un contrato preciso para el flujo de datos, permitiendo a los componentes de servidor orquestar la carga de datos inicial para elementos interactivos del cliente sin necesidad de comprender o gestionar su estado interno o lógica de renderizado. Este enfoque explícito y basado en datos solidifica la filosofía de TanStack de 'client-first', ofreciendo una solución robusta para arquitecturas de aplicaciones complejas.

Los beneficios de rendimiento se extienden mucho más allá de la experiencia del desarrollador con el enfoque de TanStack hacia los Server Components. Al tratar los RSCs como flujos de datos granulares y recuperables, se integran perfectamente con las herramientas establecidas del lado del cliente, desbloqueando ganancias significativas en velocidad y eficiencia. Este modelo aborda directamente los cuellos de botella de rendimiento comunes en las aplicaciones web modernas.

De manera crucial, esta arquitectura permite estrategias robustas de client-side caching. TanStack Query, una piedra angular del ecosistema, ahora puede gestionar estos componentes renderizados en el servidor como cualquier otro dato. Los desarrolladores obtienen primitivas potentes para la obtención de datos, invalidación y precarga, asegurando que los componentes estén siempre actualizados y disponibles con una sobrecarga de red mínima. Esto mejora drásticamente los tiempos de carga percibidos y la capacidad de respuesta.

Las ganancias sustanciales de rendimiento provienen de la reducción de las cargas útiles de JavaScript. Las dependencias pesadas, como los analizadores de Markdown o los resaltadores de sintaxis, se ejecutan completamente en el servidor, sin llegar nunca al paquete del navegador del cliente. Esto da como resultado páginas más pequeñas y de carga más rápida que consumen menos ancho de banda y procesan menos scripts en el dispositivo del usuario.

Además, TanStack Start aprovecha el progressive streaming, enviando la interfaz de usuario al navegador a medida que se renderiza en el servidor. Los usuarios experimentan tiempos de carga percibidos más rápidos a medida que el contenido aparece de forma incremental, en lugar de esperar a que se hidrate una página completa. Esta retroalimentación inmediata mejora significativamente la satisfacción y el compromiso del usuario.

La seguridad mejorada representa otra ventaja clave. Los datos sensibles, incluidas las API keys y las consultas directas a la base de datos, permanecen seguros en el servidor, nunca expuestos al cliente. Esta salvaguarda arquitectónica minimiza las superficies de ataque y protege las operaciones críticas del backend de la inspección o manipulación del lado del cliente, una mejora significativa con respecto a las aplicaciones tradicionales con gran carga de cliente.

La flexibilidad del stack subyacente de TanStack amplifica aún más estos beneficios. Construidas sobre primitivas potentes como Vite y Nitro, las aplicaciones pueden implementarse en una amplia gama de proveedores de alojamiento, desde funciones serverless hasta entornos tradicionales de Node.js. Esta adaptabilidad garantiza que los desarrolladores puedan elegir la infraestructura más adecuada para sus necesidades de rendimiento y escalabilidad. Para una inmersión más profunda en las capacidades del framework, consulte la TanStack Start Overview | TanStack Start React Docs. Este enfoque integral consolida la posición de TanStack como una potente alternativa para construir aplicaciones React de alto rendimiento y seguras.

TanStack ha ofrecido una respuesta profunda al dilema de los Server Components de la comunidad React. Su implementación proporciona la potencia bruta de los Server Components – obtención de datos del lado del servidor, tamaños de bundle del cliente reducidos, seguridad mejorada y rendimiento de carga inicial mejorado – sin el enfoque dogmático y de todo o nada popularizado por Next.js. Los desarrolladores ahora pueden adoptar el renderizado y la lógica del lado del servidor como una característica opcional, integrándola tan granularmente como la obtención de JSON, en lugar de ser forzados a un paradigma predeterminado de 'server-first' para toda su aplicación.

Esto posiciona a TanStack Start no solo como una alternativa, sino como una visión convincente para el futuro del desarrollo de React. Se dirige directamente a los ingenieros que priorizan el control explícito, los modelos mentales claros y un framework que se adapta a las necesidades específicas de su proyecto, y no al revés. Al restablecer una filosofía de 'client-first', TanStack Start permite que los server components aumenten, en lugar de dictar, la arquitectura de la aplicación, ofreciendo una separación de preocupaciones más limpia y reduciendo la carga cognitiva.

La pregunta de si TanStack Start es un "Next.js killer" es a menudo hiperbólica en tecnología, sin embargo, TanStack ha abordado innegablemente los principales puntos débiles del panorama actual de RSC. La función explícita `renderServerComponent` y los Composite Components proporcionan un límite dramáticamente más claro entre la lógica del cliente y del servidor. Al ofrecer una solución refrescantemente pragmática y potente, una que respeta la autonomía del desarrollador y prioriza la claridad, TanStack Start podría de hecho ganarse los corazones y las mentes de la comunidad React. Mueve la conversación más allá de los paradigmas forzados, ofreciendo un enfoque verdaderamente adaptable y centrado en el desarrollador para las aplicaciones web modernas que muchos han anhelado.

¿Cuál es la principal diferencia entre los Server Components de TanStack y Next.js?

TanStack utiliza un modelo 'client-first', permitiéndote optar por los Server Components de forma granular. Next.js utiliza un modelo 'server-first' donde los componentes se renderizan en el servidor por defecto, requiriendo una directiva 'use client' para la interactividad.

¿Qué son los Composite Components en TanStack Start?

Son un patrón potente que permite a los componentes de servidor definir 'slots' (como children o props) que son rellenados por componentes de cliente. Esto mantiene clara la frontera cliente/servidor, ya que el componente de servidor no necesita saber sobre los componentes de cliente específicos que contendrá.

¿Se necesita 'use client' en los TanStack Server Components?

Aunque TanStack soporta la directiva 'use client' por familiaridad, no es el enfoque recomendado. El framework fomenta el uso de Composite Components para evitar la complicada dependencia de que los componentes de servidor rendericen y controlen directamente los componentes de cliente.

¿Cómo maneja TanStack la lógica del lado del servidor con los RSCs?

Utiliza funciones de servidor explícitas, a menudo envolviendo el helper 'renderServerComponent'. Esto hace que sea inequívoco que la lógica se está ejecutando en el servidor, proporcionando una experiencia de desarrollo clara y predecible.