Haz que cada componente cliente sea seguro para renderizar en el servidor

Fixkamo-internal
Se descapó
26 de agosto de 2026 a las 3:03 UTC
Autor
kamo
Compromit
e029a0f

Los siguientes componentes de clientes de los servidores-renders, así que "window", document, .localStorage, Durante el render que produce el HTML. sesionar y el navegador no existen. Leer uno en un cuerpo de componente lanza ReferenceError en el servidor, y un lanzamiento allí es una página en blanco en lugar de una degradada. Cuatro componentes lo hicieron. FloatingChatWindow lee window.innerWidth/innerHeight en un use Inicador de Estado y de nuevo en sus limitaciones de arrastre; ChatBox computó su maximización altura de window.innerHeight; Lightbox y AddToContactsDialog se ha instalado en documento.cucucucha sin guardia. Los cuatro están detrás de una llamada que sólo los monta después de un acción de usuario, por lo que el servidor nunca llega a ellos hoy en día. Estos guardias son lo que mantiene que un detalles de la aplicación del que llaman en lugar de una suposición de carga. El inicializador de la posición de FloatingChatWindow también estaba siendo recomendado en cada render para un uso de valorDesecha después del primero; ahora es perezoso. Añade scripts/check-ssr-safe.mjs, que camina cada archivo de 'uso cliente' con el TypeScript La API del compilador y los informes leen que ocurren durante render. Corre en la prueba de npm. Conseguir el análisis correcto tomó tres correcciones, todas dignas de registro porque cada una es una manera de escribir este cheque erróneamente: - Tratar cualquier descripción de la función como "aplazado" lo hace informado ZERO. Un cambio componente ES una declaración de función, y su cuerpo corre durante la representación. Sólo un El minúsculo es un ayudante invocado más tarde. - "window" y "document" son identificadores normales. Atributo JSX llamado "window=", una clave de objeto "document" y una ventana de utile desestructurado: edición son etiquetas, no lee cuatro componentes reales usar exactamente esos. - El guardia idiomático no envuelve la lectura. Si (montado) de vuelta null se sienta varias declaraciones por encima de "createPortal" (x, documento.body) - . . . . . . . . . . . . . . . el identificador nunca lo encuentra. Cuatro componentes ya estaban a salvo de esta manera, y un Comprueba eso no puede ver que habría tenido gente "fijando" código correcto. Verificados contra controles positivos plantados en ambas direcciones: un componente no protegido es notificado, uno desprovisto montado no es. tsc --noEmita limpia sobre los cuatro componentes y sus importaciones transitivas; los 10 guardias pasan. Esto despeja el bloqueador en la eliminación de la puerta de montaje de MemberListProvider, que es lo que mantiene toda la aplicación autenticada fuera del HTML de los servidores. Eliminarlo es un cambio separado y aún quiere pasar por la ruta de humo, porque sería la primera vez estas rutas han sido echadas al servidor.

Todos los cambios

Como lo que ves enviaste?

Cada una de estas actualizaciones aterriza en su espacio de trabajo automáticamente. Empieza gratis y verlo crecer semana tras semana.

Arranzar gratis para siempreVer Precios