Next.JS Seltsamer BUG: Flüssigkeitszufuhr fehlgeschlagen
Hintergrund Ich habe gestern versucht, den Renderer der Artikeltabelle selbst zu schreiben. Nach einem bestimmten Speichervorgang erschien plötzlich der folgende Fehler: „Hydration failed because the initial UI does not match that was were rendered on the server.“ Finden Sie das offizielle Dokument des Problems Überprüfen Sie zunächst die offizielle Beschreibung des Problems anhand des Fehlerprotokolls: The Offiziell wird dieses Problem auf zwei mögliche Gründe zurückgeführt: - Die Serverseite und die Browserseite werden im Rendering-Prozess beurteilt, was zu unterschiedlichen Rendering-Ergebnissen führt. Häufige Probleme sind: - Beurteilen, ob das Fenster außerhalb des React-Hooks existiert und das Ergebnis beeinflussen - Mögliche Gründe, die der Beamte nicht erwähnt, sind: Umgebungsvariablen, die nur auf der Serverseite verfügbar sind, werden während des Rendering-Prozesses verwendet, wie z. B. process.e
Verwenden von CSP und Nonce in Next.js, um XSS-Angriffe zu verhindern
XSS-Angriff Ein XSS-Angriff bezieht sich normalerweise auf das Einfügen von böswilligem Anweisungscode in die Webseite durch ausgeklügelte Methoden, indem die bei der Webseitenentwicklung hinterlassenen Schlupflöcher ausgenutzt werden, sodass Benutzer den Code laden und ausführen können. Gängige Methoden zur Verhinderung von XSS-Angriffen - In der Phase des Website-Designs müssen Sie darauf achten, Benutzereingabeinhalte zu filtern und zu codieren - Verwenden Sie DangerlySetInnerHTML mit Vorsicht in Next.js - Verwenden Sie einen geeigneten CSP, um die Skriptausführung einzuschränken Für den dritten Punkt können Sie Die Verwendung von Nonce maximiert die Schwierigkeit böswilliger Angriffe. Was ist Nonce Normalerweise gewährleistet CSP (Content Security Policy) die Sicherheit verschiedener Inhalte über den Host. Daher kann CSP nur "one size fits all" für Inline-Skripte, entweder ausführen oder blockieren. Auf dieser Grundlage schlug CSP das Konzept von Nonce: Nonce vor
Hallo Welt
Dies ist der erste Beitrag aus dem Hyper Blog. Das Schreiben dieses Blogs hat mich monatelang hin und her gebracht. Es ist zwar immer noch nicht perfekt, aber zumindest die Grundfunktionen sind vorhanden. Der Architekturblog wird mit Next.js umgesetzt, was den Vorteil hat, die Vorteile von React und die schnelle Antwort von statischem HTML zu nutzen. Nach dem Testen und nach der Bereitstellung auf dem Server kann SSG die Zugriffsantwortverzögerung erheblich reduzieren. Gleichzeitig übernimmt die gesamte Website das i18n-Framework für die mehrsprachige Anpassung, und der Inhalt des Artikels wird automatisch über die Google Cloud Translate API übersetzt. Der Front-End-Editor-Editor verwendet Editor js zum Rendern, das in reinem JSON gespeichert werden kann, was bequem und sauber ist. Natürlich gibt es während dieser Zeit unzählige Fallstricke, und wir werden später darüber sprechen. zufällige Bilder
Next.js+Docker+Github Actions realisieren eine automatische Bereitstellung
Next.js-Konfiguration: Bildgröße reduzieren und Standalone-Modus aktivieren Um das Volumen von Next.js nach dem Build zu reduzieren, können Sie den Standalone-Modus direkt in next.config.js konfigurieren: [Codeblock] Nach der Konfiguration Next.js wird automatisch in der Build-Phase sein Führen Sie Tree Shaking durch und kopieren Sie fast alle notwendigen Dateien nach /.next/standalone. Im nächsten Schritt kann es direkt in das Docker-Image kopiert und in das Repo gepusht werden. Beachten Sie jedoch Folgendes: - Im Standalone-Modus werden die Ordner public und ./next/static nicht in den Standalone-Modus kopiert. Next.js ist der Ansicht, dass diese statischen Dateien standardmäßig über CDN verteilt und nicht auf dem Server bereitgestellt werden sollten.
Behebung von Skalierungsproblemen der DaVinci Resolve-Benutzeroberfläche
Wenn Sie DaVinci auf einem Bildschirm mit einer Auflösung von 2K+ unter Windows verwenden, wird der Text sehr klein sein. Die meisten Tutorials im Web ändern entweder die Skalierung des Systems oder setzen die hohe DPI-Skalierung der Anwendung auf "System". Ersteres führt dazu, dass die Benutzeroberfläche anderer Programme geändert wird, und letzteres führt dazu, dass die Schriftart nach dem Vergrößern sehr unscharf wird. Also habe ich nach einigem Hin und Her eine Lösung gefunden, die die Schrift nicht verwischt. Poste zuerst die Lösung und erläutere dann die Lösung des Problems. Lösung Geben Sie env in das Windows-Suchfeld ein und wählen Sie unten Umgebungsvariablen - Neu aus. Neue Umgebungsvariablen Erstellen Sie zwei neue Sätze von Umgebungsvariablen: Nachdem Sie ganz auf OK geklickt haben, öffnen Sie DaVinci erneut - Sie sind fertig! Der UI-Text ist endlich klar, der Kern des Problems ist die QT-Engine.