“Segmented Rendering” ist ein neues Muster und wird das Jamstack -Spiel für immer verändern. Versuchen wir, die Grenzen des statischen Renders zu überschreiten und zu erfahren, wie Sie sie auf personalisierte Inhalte anwenden können. Ein neues Muster für den Jamstack: Segmentierte Rendering 13 -min -Lesen Aktien auf Twitter, LinkedIn Quick Summary ↬ unter allen möglichen Architekturen für die Rendern einer Website, statisches Rendern ist der leistungsstärkste. Es gilt jedoch nur für öffentliche, generische Inhalte. Oder ist es? In diesem Artikel werden wir die Grenzen des statischen Renders überschreiten und lernen, wie man sie auf personalisierte Inhalte anwendet. Dieses neue Muster wird als “segmentiertes Rendering” bezeichnet und wird das Jamstack -Spiel für immer verändern. Unter allen möglichen Architekturen für die Rendern einer Website ist das statische Rendering am leistungsfähigsten. Es gilt jedoch nur für öffentliche, generische Inhalte. Oder ist es? In diesem Artikel werden wir die Grenzen des statischen Renders überschreiten und lernen, wie man sie auf personalisierte Inhalte anwendet. Dieses neue Muster wird als “segmentiertes Rendering” bezeichnet und wird das Jamstack -Spiel für immer verändern. Wenn Sie der Meinung sind, dass das statische Rendering auf generische öffentliche Inhalte beschränkt ist, die für jeden Benutzer Ihrer Website gleich sind, sollten Sie diesen Artikel auf jeden Fall lesen. Das segmentierte Rendering ist ein neues Muster für den Jamstack, mit dem Sie Inhalte statisch personalisieren können, ohne dass eine clientseitige Renderung oder das Rendern der Server auf der Server-Server-Seite vorhanden ist. Es gibt viele Anwendungsfälle: Personalisierung, Internationalisierung, Themen, Multi-Messen-, A/B-Tests. Konzentrieren wir uns auf ein Szenario, das für Blog-Besitzer sehr nützlich ist: Bearbeitung von Inhalten. Herzlichen Glückwunsch zu Ihrem neuen Job Wow, Sie wurden gerade befördert! Sie sind jetzt „Leiter der Performance“ beim Repairing Magazine, dem schwerwiegendsten Konkurrenten des Smashing Magazine. Das Reparaturmagazin hat ein sehr eigenartiges Geschäftsmodell. Die witzigen Witze in jedem Artikel sind nur für bezahlte Benutzer sichtbar. Warum hat der Programmierer die Straße überquert? Ich wette, Sie würden bezahlen, um die Antwort zu kennen. Ihre Aufgabe für heute ist es, diese Funktion mit den bestmöglichen Leistungen zu implementieren. Mal sehen, wie Sie das können. Tipp: Wir werden ein neues Muster mit dem Namen “segmentiertes Rendering” einführen. Die vielen Möglichkeiten, eine Webseite mit modernen JavaScript-Frameworks als nächstes zu rendern. Js Popularität beruht auf der Beherrschung der „Triforce of Rendering“: die Fähigkeit, das clientseitige Rendering, die Rendern und statische Rendern pro Equest in einem einzigen Framework zu kombinieren . CSR, SSR, SSG… Lassen Sie uns klarstellen, was sie reparieren, dass die Benutzeroberfläche der Zeitschrift auf einer modernen JavaScript -Bibliothek beruht, reagiert. Wie andere ähnliche UI-Bibliotheken bietet React zwei Möglichkeiten, Inhalte zu rendern: clientseitig und serverseitig. Das Client-Side-Rendering (CSR) findet im Browser des Benutzers statt. In der Vergangenheit hätten wir JQuery verwendet, um CSR zu machen. Das Server-Side-Rendering erfolgt auf Ihrem eigenen Server entweder zum Anfragen (SSR) oder zum Build-Time (static oder SSG). SSR und SSG existieren auch außerhalb des JavaScript -Ökosystems. Denken Sie zum Beispiel an PHP oder Jekyll. Lassen Sie uns sehen, wie diese Muster für unseren Anwendungsfall gelten. CSR: Das hässliche Lader-Problem-Client-Seite-Rendering (CSR) würde JavaScript im Browser verwenden, um witzige Witze nach dem Laden der Seite hinzuzufügen. Wir können “Fetch” verwenden, um die Witzeinhalte zu erhalten, und sie dann in den DOM einfügen. // server.js const wittyjoke = “Warum hat der Programmierer die Straße überquert? \ Es gab etwas, das er C.; app.get (“/api/witty-joke”, (req) => {if (ispaidUser (req)) {return {wittyjoke};} else {return {wittyjoke: null};}}); // client.js const clientArticle = () => {const {wittyjoke, laderingjoke} = customfetch (“/api/witty-jokes”); // das mag ich nicht … wenn (loadingjoke) return

Ugly Loader

; return (

{wittyjoke? wittyjoke: “Sie müssen bezahlen, um Witze zu sehen. \ Humor ist ein ernstes Geschäft.”}

); }; CSR umfasst redundante clientseitige Berechnungen und viele hässliche Lader. Es funktioniert, aber ist es der beste Ansatz? Ihr Server muss für jeden Leser witzige Witze dienen. Wenn irgendetwas den JavaScript -Code fehlschlägt, hat der bezahlte Benutzer keine Dosis Spaß und wird möglicherweise wütend. Wenn Benutzer ein langsames Netzwerk oder einen langsamen Computer haben, werden sie einen hässlichen Lader sehen, während ihr Witz heruntergeladen wird. Denken Sie daran, dass die meisten Besucher über ein mobiles Gerät stöbern! Dieses Problem wird nur noch schlimmer, wenn die Anzahl der API -Aufrufe zunimmt. Denken Sie daran, dass ein Browser nur eine Handvoll Anforderungen parallel ausführen kann (normalerweise 6 pro Server/Proxy). Das serverseitige Rendering unterliegt dieser Einschränkung nicht und wird schneller beim Abholen von Daten aus Ihren eigenen internen Diensten.SSR pro Anforderung: Bissen durch das erste Byte-pro-Request-Server-Side-Rendering (SSR) generiert den Inhalt auf Bedarf auf dem Server. Wenn der Benutzer bezahlt wird, gibt der Server den vollständigen Artikel direkt als HTML zurück. Andernfalls gibt es den langweiligen Artikel ohne Spaß zurück. // page.js: server-code async function getServersideProps (req) {if (ispaiduser (req)) {const {wittyjoke} = getWittyjoke (); return {wittyjoke}; } else {return {wittyjoke: null}; }} // page.js: client-code const ssrarticle = ({wittyjoke}) => {// No More Loader! Aber … // Wir müssen warten, bis “GetServersideProps” auf jeder Anfrage zurückgeführt werden kann (

{Wittyjoke? Wittyjoke: “Sie müssen bezahlen, um Witze zu sehen. Humor ist ein ernstes Geschäft.”}

); }; SSR entfernt clientseitige Berechnungen, jedoch nicht die Ladezeit. Wir verlassen uns nicht mehr auf das clientseitige JavaScript. Es ist jedoch nicht energieeffizient, den Artikel für jede Anfrage zu rendern. Die Zeit für das erste Byte (TTFB) wird ebenfalls erhöht, da wir warten müssen, bis der Server seine Arbeit beendet hat, bevor wir einige Inhalte sehen. Wir haben den hässlichen clientseitigen Lader durch einen noch hässlicheren leeren Bildschirm ersetzt! Und jetzt bezahlen wir sogar dafür! Die Cache Control-Strategie „Stale-während-Revalidate“ kann das TTFB-Problem reduzieren, indem eine zwischengespeicherte Version der Seite bis zum Aktualisierung geeignet ist. Es funktioniert jedoch nicht aus dem Feld für personalisierte Inhalte, da es nur eine Version der Seite pro URL untersuchen kann, ohne Cookies zu berücksichtigen, und die für die Bedienung bezahlten Inhalte erforderlichen Sicherheitsprüfungen nicht durchführen kann. Statisches Rendering: Der Schlüssel zum reichen Kundenproblem für Gast/schlechtes Kunden zu diesem Zeitpunkt treffen Sie das Problem des „Rich Guest/Poor Customer“: Ihre Premium -Benutzer erhalten die schlechteste Leistung, anstatt das Beste zu erhalten. Das clientseitige Rendering und das Rendering von Pro-Request-Server-Side-Side-Side-Side-Side-Side-Side-Seite beinhalten die meisten Berechnungen im Vergleich zum statischen Rendering, was nur einmal zur Bauzeit stattfindet. 99% der Websites, die ich kenne, werden entweder CSR oder SSR auswählen und leiden unter dem reichen Kundenproblem. Lassen Sie uns den 1% anschließen und unsere Kunden wieder reich machen. (Bildnachweis: Pxels) (große Vorschau) Mehr nach dem Sprung! Lesen Sie weiter unten ↓ Treffen Sie „Touch Design for Mobile Interfaces“, unser brandneues Smashing-Buch über das Design für Mobilgeräte mit bewährten, universellen, menschlich zentrierten Richtlinien. 400 Seiten, vollgepackt mit detaillierten Benutzerforschung und Richtlinien, die Sie sofort bewerben können. Der Versand beginnt Anfang Januar 2022. Springen zum Inhaltsverzeichnis. ↬ Tiefe in segmentierte Rendering-segmentierte Rendering ist nur eine intelligentere Möglichkeit, statische Rendering durchzuführen. Sobald Sie verstanden haben, dass es nur darum geht, Rendern zu zwischengespeichern und dann für jede Anfrage das richtige Rendern von zwischengespeichertem Render zu erhalten, wird alles klicken. Das statische Rendering bietet die besten Leistungen, aber weniger flexible statische Site Generation (SSG) erzeugt den Inhalt zur Build-Zeit. Dies ist der leistungsstärkste Ansatz, da wir den Artikel einmal für alle rendern. Es wird dann als reines HTML serviert. Dies erklärt, warum die Vorrenderung zur Bauzeit einer der Eckpfeiler der Jamstack-Philosophie ist. Als neu geförderter “Head of Performance” ist das definitiv das, was Sie wollen! Ab 2022 haben alle JamStack -Frameworks ungefähr den gleichen Ansatz des statischen Renderings: Sie berechnen eine Liste aller möglichen URLs; Sie rendern eine Seite für jede URL. const mywittyArticles = [“/How-to-Repair-a-Smashed-Magazine”, “/segmented-rendering-makes-französisch-web-dev-famous”, “/jamstack-is-so-2022-discover-haystack” ,]; Ergebnis des ersten Schritts des statischen Renderings: Berechnung einer Reihe von URLs, die Sie vorstellen werden. Für einen Blog ist es normalerweise eine Liste aller Artikel. In Schritt 2 rendern Sie einfach jeden Artikel, einen pro URL. Dies bedeutet, dass eine URL ausschließlich einer Version der Seite gleich ist. Sie können auch nicht für verschiedene Benutzer eine kostenlose und kostenlose Version des Artikels über dieselbe URL haben. Die URL /How-to-Repair-A-Smashed-Magazine liefert ohne Personalisierungsoption den gleichen HTML-Inhalt an alle. Es ist nicht möglich, Anfrage Cookies zu berücksichtigen. Das segmentierte Rendering kann noch einen Schritt weiter gehen und unterschiedliche Variationen für dieselbe URL machen. Lassen Sie uns lernen, wie. Entkoppelung der URL- und Seitenvariation Die naivste Lösung, um personalisierten Inhalten zu ermöglichen, besteht darin, der URL einen neuen Routenparameter hinzuzufügen, beispielsweise “mit Scherzen” gegenüber “Bland”. const Premiumurl = “/With-Jokes/How-to-Repair-a-Smashed-Magazin”; const FreeUrl = “/Bland/How-to-Repair-a-Smashed-Magazin”; Eine Implementierung mit Next.js wird grob aussehenSo wie folgt: Async-Funktion getStaticPaths () {return [// für bezahlte Benutzer “/with-jokes/how-to-repair-a-smashed-magazine”, // für kostenlose Benutzer “/Bland/How-to-Repair- A-Smashed-Magazin “,]; } asynchrische Funktion getStaticProps (RouteseParam) {if (RouteParam === “With-Jokes”) {const {wittyjoke} = getwittyjoke (); return {wittyjoke}; } else if (RouteParam === “Bland”) {return {wittyjoke: null}; }} Die erste Funktion berechnet 2 URLs für denselben Artikel, ein lustiger und ein langweiliger. Die zweite Funktion erhält den Witz, aber nur für die kostenpflichtige Version. Großartig, Sie haben 2 Versionen Ihrer Artikel. Wir können die „Segmente“ in „segmentiertem Rendering“ sehen – bezahlte Benutzer gegenüber kostenlosen Benutzern, mit einer gerenderten Version für jedes Segment. Aber jetzt haben Sie ein neues Problem: Wie können Benutzer auf die richtige Seite umleiten? Einfach: Benutzer buchstäblich auf die richtige Seite umleiten! Mit einem Server und allem! Es mag zunächst seltsam klingen, dass Sie einen Webserver benötigen, um ein effizientes statisches Rendering zu erzielen. Vertrauen Sie mir jedoch: Die einzige Möglichkeit, die besten Leistungen für eine statische Website zu erzielen, besteht darin, eine Serveroptimierung durchzuführen. Ein Hinweis zu „statischen“ Gastgebern Wenn Sie aus dem Jamstack -Ökosystem stammen, sind Sie möglicherweise in das statische Hosting verliebt. Was ist ein besseres Gefühl, als ein paar Dateien zu schieben und Ihre Website auf Github -Seiten zum Laufen zu bringen? Oder hosten eine vollwertige Anwendung direkt in einem Content Delivery Network (CDN)? “Statisches Hosting” bedeutet jedoch nicht, dass es keinen Server gibt. Dies bedeutet, dass Sie den Server nicht steuern können. Es ist immer noch ein Server, der für die Zeige jeder URL auf die richtige statische Datei verantwortlich ist. Das statische Hosting sollte als begrenzte, aber billige und leistungsfähige Option angesehen werden, um eine persönliche Website oder eine Landingpage zu hosten. Wenn Sie darüber hinausgehen möchten, müssen Sie die Kontrolle über den Server übernehmen, zumindest um Dinge wie Umleitung auf der Grundlage der Anforderungs -Cookies oder Header zu verarbeiten. Sie müssen jedoch keinen Backend -Experten anrufen. Wir brauchen keine ausgefallene Berechnung. Ein sehr grundlegender Umleitungsserver, der prüfen kann, ob der Benutzer bezahlt wird. Tolle Nachrichten: Moderne Gastgeber wie Vercel oder Netlify implementiert Edge -Handler, die genau das sind, was wir hier brauchen. Next.js implementiert diese Kantenhandler als „Middlewares“, sodass Sie sie in JavaScript codieren können. Die „Kante“ bedeutet, dass die Berechnungen dem Endbenutzer so nah wie möglich auftreten, anstatt einige große zentralisierte Server zu haben. Sie können sie als die äußeren Wände Ihrer Kerninfrastruktur sehen. Sie eignen sich hervorragend für die Personalisierung, die häufig mit dem tatsächlichen geografischen Standort des Benutzers zusammenhängt. Einfache Umleitung mit Next.js Middlewares Next. Im Gegensatz zu Cloud -Proxys wie AWS -Gateway- oder Open -Source -Tools wie NGINX werden Middlewares in JavaScript mit Webstandards geschrieben, nämlich der Fetch -API. In der Architektur „segmentierte Rendering“ sind Middlewares lediglich dafür verantwortlich, jede Benutzeranforderung auf die richtige Version der Seite zu verweisen: importieren {nexTesponse} aus “Next/Server”; Importtyp {nexTrequest} aus “next/server”; Async Function Middleware (req: nexTrequest) {// ispaidfromReq kann die Cookies lesen, das Authentifizierungs -Token erhalten, // und überprüfen Sie, ob der Benutzer tatsächlich ein kostenpflichtiges Mitglied ist oder nicht. const routeparam = ispaid? “With-Jokes”: “Bland”; return nexTesponse.redirect (`/$ {Routesparam}/How-to-Repair-a-Smashed-Magazine`); } Eine Middleware, die segmentiertes Rendering für bezahlte und kostenlose Benutzer implementiert. Das war’s. Ihr erster Tag als „Leiter der Performance“ ist vorbei. Sie haben alles, was Sie brauchen, um die bestmöglichen Leistungen für Ihr seltsames Geschäftsmodell zu erzielen! Natürlich können Sie dieses Muster auf viele andere Anwendungsfälle anwenden: Internationalisierte Inhalte, A/B -Tests, hell/dunkler Modus, Personalisierung… jede Variation Ihrer Seite macht ein neues „Segment“ aus: französische Benutzer, Personen, die die Dunkelheit bevorzugen Thema oder bezahlte Benutzer. Kirsche oben: URL schreibt um, aber hey, du bist der „Kopf der Leistung“, nicht der „Durchschnitt der Leistung“! Sie möchten, dass Ihre Web -App perfekt ist, nicht nur gut! Ihre Website ist in allen Metriken sicherlich sehr schnell, aber jetzt sehen Ihre Artikel-URLs wie folgt aus:/bucket-a/fr/light/with-shokes/3-tips-to-make-an-url-shorter, das ist nicht wirklich gut. Blick auf… segmentiertes Rendering ist großartig, aber der Endbenutzer muss sich seiner eigenen „Segmente“ nicht bewusst sein. Die Bestrafung für gute Arbeit ist mehr Arbeit. Fügen wir also eine letzte Note hinzu: Verwenden Sie anstatt URL -Umleitungen zu verwenden, und verwenden Sie URL -Umschreiben. Sie sind genau dieDas Gleiche, außer dass Sie keine Parameter in der URL sehen. // Eine Umschreibung ändert nicht die URL, die vom Endbenutzer gesehen wurde. Magazin “); Die URL /How-to-Make-An-URL-Schärfers ohne Route-Parameter zeigt jetzt die richtige Version der Seite an, abhängig von den Cookies des Benutzers. Der Routenparameter “existiert” in Ihrer App immer noch, aber der Endbenutzer kann ihn nicht sehen, und die URL bleibt sauber. Perfekt. Zusammenfassung zur Implementierung des segmentierten Renderings: Definieren Sie Ihre „Segmente“ für eine Seite. Beispiel: Bezahlte Benutzer gegen kostenlose Benutzer, Benutzer aus Unternehmen A gegenüber Benutzern von Unternehmen B oder C usw. Rendern Sie so viele statische Variationen einer Seite, die Sie benötigen, mit einer URL per Segment. Beispiel: /With-Jokes /My-Article, /Bland /My-Article. Jede Variation entspricht einem Segment, beispielsweise, bezahlte oder kostenlose Benutzer. Richten Sie einen sehr kleinen Umleitungsserver ein, der den HTTP -Anforderungsinhalt überprüft und den Benutzer je nach Segment auf die richtige Variation umleitet. Beispiel: Bezahlte Benutzer werden zu /mit Jokes /My-Article umgeleitet. Wir können feststellen, ob ein Benutzer bezahlt wird oder nicht, indem wir seine Anfrage Cookies überprüfen. Was kommt als nächstes? Noch mehr Leistung! Jetzt können Sie so viele Variationen derselben Seite haben, die Sie möchten. Sie haben Ihr Problem mit bezahlten Benutzern elegant gelöst. Besser, Sie haben ein neues Muster, segmentiertes Rendering implementiert, das die Personalisierung in den Jamstack bringt, ohne Leistungen zu beeinträchtigen. Letzte Frage: Was passiert, wenn Sie viele mögliche Kombinationen haben? Wie 5 Parameter mit jeweils 10 Werten? Sie können zur Bauzeit nicht eine unendliche Anzahl von Seiten machen-das würde zu lange dauern. Und vielleicht haben Sie in Frankreich keine bezahlten Benutzer, die das Lichtthema ausgewählt haben und zu A/B -Tests zu Bucket B gehören. Einige Variationen sind nicht einmal eine Renderung wert. Hoffentlich haben Sie mit modernen Frontend -Frameworks Sie versichert. Sie können ein mittleres Muster wie eine inkrementelle statische Regeneration von der nächsten oder aufgeschobenen statischen Erzeugung von Gatsby verwenden, um Variationen nur bei Bedarf zu machen. Die Personalisierung der Website ist ein heißes Thema, das leider für Leistung und Energieverbrauch kontrovers ist. Das segmentierte Rendering löst diesen Konflikt elegant und ermöglicht es Ihnen, Inhalte statisch zu machen, sei es für jedes Benutzersegment öffentlich oder personalisiert. Weitere Ressourcen zu diesem Thema Weiterlesen im Smashing Magazine (NL, IL)