Transferir el estado al cliente
Evitar solicitudes duplicadas mediante la transferencia de estado
Transferir el estado al cliente es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
El problema de las solicitudes duplicadas
Durante SSR, el servidor obtiene los datos para renderizar el HTML. Sin ayuda, el cliente vuelve a obtener esos mismos datos después de la hidratación, desperdiciando una solicitud y arriesgándose a mostrar un parpadeo del contenido.
TransferState al rescate
TransferState de Angular serializa los datos del servidor dentro del HTML y, después, el cliente los lee en lugar de volver a solicitarlos. Los datos viajan en una etiqueta de script incluida en la respuesta.
Cómo se transfieren los datos
El estado almacenado en el servidor se inserta como JSON dentro de la página. Al iniciarse, el cliente lo deserializa, por lo que el primer renderizado utiliza los mismos datos que usó el servidor.
<!-- embedded in SSR HTML -->
<script id="ng-state" type="application/json">{"users-1":[...]}</script>Usar makeStateKey
Cree una clave tipada con makeStateKey y, después, lea o escriba mediante el servicio TransferState.
import { makeStateKey, TransferState } from '@angular/core';
const USERS = makeStateKey<User[]>('users');
const state = inject(TransferState);
state.set(USERS, fetchedUsers);Patrón de leer y después obtener
Tanto en el servidor como en el cliente: si la clave existe en TransferState, úsela; de lo contrario, obtenga los datos. El servidor los obtiene y almacena; el cliente encuentra el valor almacenado y omite la llamada.
const state = inject(TransferState);
if (state.hasKey(USERS)) {
this.users = state.get(USERS, []);
} else {
this.http.get<User[]>('/api/users')
.subscribe(u => { this.users = u; state.set(USERS, u); });
}HttpClient lo hace automáticamente
Invocar provideClientHydration(withHttpTransferCacheOptions()) (habilitado de forma predeterminada con la hidratación) hace que HttpClient almacene en TransferState las respuestas GET del servidor. Así, las solicitudes idénticas del cliente se sirven desde la caché sin claves manuales.
provideClientHydration(withHttpTransferCacheOptions({ filter: (req) => req.method === 'GET' }))Evitar el parpadeo
Como el cliente reutiliza los datos transferidos, la vista hidratada coincide exactamente con el HTML del servidor y se evita el destello en el que el contenido desaparece y vuelve a cargarse.
Nota de seguridad
El estado transferido se inserta en el HTML público. Nunca incluya en TransferState secretos, tokens ni datos privados de usuarios que no expondría en el código fuente de la página.
Personalizado frente a automático
La caché de transferencia HTTP cubre automáticamente la mayoría de las solicitudes de datos basadas en GET. Use makeStateKey manual para transportar del servidor al cliente un estado calculado que no provenga de HTTP.
Ámbito de la caché
La caché de transferencia HTTP es específica de cada solicitud y se consume una sola vez en el cliente. Después de que la primera solicitud coincidente del cliente la lea, las siguientes llamadas se dirigen a la red con normalidad.
Verificar que funciona
Inspeccione la respuesta SSR y busque la etiqueta de script con el estado insertado. En la pestaña de red del navegador debería comprobar que la solicitud duplicada se omite justo después de la hidratación.
Comprobación rápida
Compruebe sus conocimientos sobre la transferencia de estado.
Resumen
Aprendió a transferir datos del servidor al cliente con TransferState y makeStateKey, utilizó la caché automática de transferencia HTTP, evitó solicitudes duplicadas y parpadeos, y mantuvo los datos privados fuera del estado insertado públicamente.
Preguntas frecuentes
¿La lección «Transferir el estado al cliente» es gratis?
Sí — el texto completo de «Transferir el estado al cliente» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Transferir el estado al cliente»?
Evitar solicitudes duplicadas mediante la transferencia de estado Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Transferir el estado al cliente»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué usar renderizado del lado del servidor
- Configurar Angular SSR
- Rutas del servidor y modos de renderizado
- Transferir el estado al cliente