Rendre chaque composant client sûr à rendre sur le serveur

Fixkamo-internal
Expédié
26 août 2026 à 03:03 UTC
Auteur
kamo
Commite
e029a0f

Prochains composants clients de réactifs de serveur, donc « fenêtre », « document », « localStorage », Le système de stockage et le navigateur n'existent pas pendant le rendu qui produit le HTML. La lecture d'un corps d'un composant lance ReferenceError sur le serveur, et un jet là est une page blanche plutôt que une page dégradée. Quatre composantes l'ont fait. FlotatingChatWindow lire window.innerWidth/innerHauteur dans un l'initialisateur d'État et encore dans ses contraintes de traînée; ChatBox a calculé son maximisation hauteur de window.innerHeight; Lightbox et AddToContactsParatorial portalled into document.body sans garde. Tous les quatre sont derrière un appelant qui ne les monte qu'après un action de l'utilisateur, donc le serveur ne les atteint jamais aujourd'hui - ces gardes sont ce qui garde que un détail de mise en œuvre de l'appelant plutôt qu'une hypothèse de charge. FloatingChatWindow, le initialiseur de position est également en cours de recalcul sur chaque rendu pour a use ReferenceState Frais après le premier; c'est paresseux maintenant. Ajout des scripts/check-ssr-safe.mjs, qui parcourent tous les fichiers "utilisateur client" avec le TypeScript L'API du compilateur et les rapports se lisent qui se produisent pendant le rendu. Il passe par un test npm. Obtenir l'analyse correctement a pris trois corrections, toutes intéressant l'enregistrement parce que chacun d'eux est un moyen d'écrire cette vérification à tort: - Le fait de traiter toute déclaration de fonction par "d'avance" en fait le rapport à zéro. A React Le composant est une déclaration de fonction, et son corps court pendant le rendu. Uniquement a Un cas inférieur est un assistant invoqué plus tard. - Les "fenêtres" et les "documents" sont des identificateurs ordinaires. Un attribut JSX nommé « Winow », une clé d'objet "document:" et une fenêtre d'élément déstructuré: édification . . . . . . . . . . . . . . . ne pas lire - quatre composants réels utilisent exactement ceux-ci. - La garde idiomatique n'enroule pas de manière lexique. Si (monté) retour nuls se trouve plusieurs déclarations ci-dessus «createPortal(x, document.body)», donc en relançant de l'identifiant ne le trouve jamais. Quatre composants étaient déjà sûrs de cette manière, et un vérifier que cela ne pouvait pas voir qu'il aurait eu des gens qui "fixent" le code correct. Vérifié par rapport aux contrôles positifs plantés dans les deux sens: un composant non surveillé est a reporteda a monté-gardé en garde n'est pas. tsc --noEmit nettoyez sur les quatre composants et leurs importations de transit; les 10 gardes passent. Ceci permet d'effacer le bloqueur en supprimant la porte de montage MemberListProvider, qui est ce qui conserve l'application authentifiée de l'ensemble du HTML rendu par le serveur. Enlever son élimination est un changement séparé et toujours veut un passage de fumée de route, parce que ce serait la première fois ces routes ont jamais été remises par serveur.

Tous les changements

Comme ce que tu vois expédier ?

Chacune de ces mises à jour atterrit automatiquement dans votre espace de travail. Commencez gratuitement et regardez-le grandir semaine après semaine.

Commencez gratuitement pour toujoursPrix de visualisation