Sieben Abschnitte stoppen Hydratation

Performancekamo-marketing
Verschifft
19. August 2026 um 20:37 UTC
Autor
Kamo
Ausschuss
7ba3b84

Schritt B. TrustBar, WhatReplacesWhat, HowItWorks, UseCases, Features, CTAStrip und Die Preise sind jetzt Server-Komponenten. Sie geben HTML und versenden kein JavaScript. Das einzige, was sie auf dem Client gehalten hatte, war Analytik. Nicht eins von den sieben hatten Zustand, ein ref oder eine Wirkung - ihre gesamte Interaktivität war .onClick={() =? trackEvent(...) auf einem Link, und diese einzelne Requisite zog sich hin Jeder Abschnitt ganze Baum in Hydratation. Es ist ein "Daten-Track"-Attribut jetzt, von einem delegierten Zuhörer gelesen, der einmal für die Seite montiert wurde. Bewusst NICHT "data-analytics-event", und das ist der Grund, warum TrackedClicks existiert anstatt des eigenen Attributs des Trackers: Analytics installiert einen Capture-Phase-Hörer und, für jeden Anker, der es trägt, ruft verwerflich(), wartet seine Beacon, dann setzt location.href - Drehen einer Client-Navigation in "Warte für Analytik, dann hard reload", gemessen auf dieser Website bei 1,5-8s toter Zeit pro Klick, und verboten direkt von **************** Der Zuhörer berührt sich hier nie die Veranstaltung: kein verhindernDefault, keine StoppPropagation, keine Wartezeiten. Alle fünf Ereignisnamen überleben, verifiziert gegen die Pre-Conversion Quellen cta-startfrei, cta-view-preis, cta-contact-sale, nav-click, home-feature-learn-mehr. Die gerenderten Zähler sind höher als die Anzahl der Call-Sites weil sich die Call-Sites innerhalb von ".map" befinden: zwölf Feature-Karten, sechs Pläne. Alle 22 Attribute landen auf dem <a&a&gt; oder <button" selbst und jedem Data-Track-Props-Wert Parses als JSON. HomeClient ist nicht mehr eine Client-Komponente, die die Änderung, die die Rest möglich - eine Client-Komponente kann keinen Server importieren, also die Direktive an der Spitze dieser eine Datei hatte die Entscheidung über die Rendering-Strategie für die ganze Seite. Seine "dynamischen" Wrapper und Suspense Grenzen gingen mit ihm: sie waren Code-splitting Komponenten, die alle sowieso hydratisiert, und Reservierung Für Inhalte, die der Server bereits produziert hatte, "min-h-[600px]" für Inhalte. Die beiden Ostereier immer noch brauchen "sssr: false", so dass sie hinter ihrer eigenen kleinen Client-Grenze sitzen. Acht Komponenten bleiben auf dem Client, und die Liste ist jetzt eine ehrliche: SharedNavigation, JumpToBar, ScrollProgress und Hero für Scrollen und Playback Zustand; ShippedStrip, weil es holt; FAQ für seine Akkordeon; SignupSection für seine Form; Footer für Back-to-Top. DER HANDEL, denn dieser ist nicht kostenlos. Der gerenderte Baum einer Server-Komponente ist serialisiert in die RSC-Flug-Nützlast sowie die HTML, so dass das Dokument wuchs während das JavaScript geschrumpft ist: JS-Stücke 261.999 - 243.579 Gzip (-18.420, und 23 Stück) Dokument 39,895 - 53,877 gzip (+13,982) netto -4,438 Bytes sind in der Nähe einer Wäsche. Der Punkt ist die andere Achse: sieben weniger Komponente Bäume zum Hydrat, gegen Skript-Auswertung mit 922 ms und einer LCP gemessen "Element render Verzögerung" von 1.810 ms. Das sind die Kosten, auf die dies abzielt, und es ist nicht sichtbar in einer Attributzahl. Es ist auch der Grund, warum dies als seine eigene Verpflichtung landet. Wenn ein Lauf etwas anderes sagt, kehrt Dieser stellt die Kundenzusammensetzung wieder her, ohne die Arbeit von Step A zu berühren.

Alle Änderungen

Wie, was Sie sehen Versand?

Jedes dieser Updates landet automatisch in Ihrem Arbeitsbereich. Starten Sie frei und beobachten Sie es Woche für Woche wachsen.

Free Forever startenPreisgestaltung anzeigen