React Vite Server Side Rendering?

Ich habe meine React-Website mit Vite erstellt und habe die Option React-SSR genommen, damit sie auf dem Server gerendert wird. Bis jetzt funktioniert alles, der Code wird im HTML-Seitenquelltext angezeigt. Aber zwei Dinge funktionieren noch nicht so gut. Die API-Daten werden noch nicht auf dem Server gerendert und ich habe es bereits gemäß der Dokumentation getan, aber es funktioniert nicht. Und die styled-components werden auch nicht auf dem Server gerendert, was eine Verzögerung von 1-2 Sekunden beim Aktualisieren verursacht.

1 Antwort

karotte1386824

16.05.2023, 08:47

Hast du schonmal versucht, die styled-components mit renderstylestostring von styled-components zu rendern? Das sollte das problem mit der verzögerung lösen Für die api-daten könnte es ein problem mit der konfiguration geben, Ich würde empfehlen, die dokumentation noch einmal sorgfältig durchzulesen und zu überprüfen, ob alle Schritte korrekt ausgeführt wurden

Ähnliche Fragen

Ist es noch sinnvoll, NextJS zu lernen?

SEO ist kein Punkt, wenn ich ehrlich bin. Heutzutage können auch Crawler normales React crawlen.

Als Zweites kommt das Server Side Rendering doch nur beim ersten Aufruf der Seite wirklich etwas bringt.

Danach ist es stinknormales React, das nicht mehr im Server für mich ausgeführt wurde und als HTML geschickt wird.

Natürlich sind 0.5-1 Sekunden wichtig, um den Nutzer ein gutes Gefühl zu geben und alles.

Aber warum sollte man sich den Stress mit NextJS antun? So wichtig wie mir diese 0.5 Sekunden auch sind. Man kann auch an anderen Ecken leichter optimieren und komprimieren.

React ist eine leichtgewichtige Bibliothek für ein bisschen Rendering und Next ein richtiges Framework.

Vielleicht ist da noch der Vorteil, das Leute ohne JavaScript wenigstens irgendwas sehen, aber wenn ich ehrlich bin, können einem Menschen mit JavaScript aus egal sein. Das sind fast alle Aluhutträger und die will man nicht in irgendeiner Art ansprechen als Kunde.

Auch keine Menschen die noch Internet Explorer und veraltete Smartphones nutzen. Da nehme ich lieber Rücksicht auf Sehbehinderte.

Was sagt ihr? Macht es noch Sinn, NextJS zu lernen? Warum nutzt ihr das?

...zur Frage

JavaScript Frage zu Next.js 13?

Mit Next.js 13 bzw. React 18 gibt es nun Server Components.

https://nextjs.org/blog/next-13#server-components

Bedeutet es, dass wir bei Next.js getServerSideProps/getStaticProps nicht mehr brauchen

...zur Frage

Wofür wird Next JS benutzt?

Im Internet steht

„It lets you build server-side rendering and static web applications using React“

Wenn ich also ne Website baue, benutze ich

JavaScript + React + Next Js + Etwas für mein Backend wie PHP?

Ich verstehe nicht ganz, wofür das jetzt benutzt wird. Kann Next JS bereits mein Backend sein?

...zur Frage

Nächste Schritte für Full Stack dev?

Hallo,

Ich bin auf der Suche nach einem genauen Weg oder Schritte die ich gehen kann nachdem ich mein ersten Full Stack Projekt mit Python Flask ( Backend) und Frontend ( plain HTML, CSS und JS) und Database mit MySQL fertig gecodet habe.

Was genau kann ich jetzt machen um weiter zu kommen. Mein Ziel ist es fähig zu sein komplette professionelle Websiten erstellen zu können die Industrie fähig sind, d.h. Für Firmen, restaurants etc. Oder halt einen job als Full Stack dev zu bekommen.

sollte ich anfangen ein CSS framework lernen, wie bootstrap oder tailwind, oder ist das nur für designer , pur Frontend devs wichtig.
Oder lieber Backend frameworks wie Node.js, oder frontend JS frameworks wir zb react.

Ich weiß einfach nicht genau wo ich weiter machen soll nachdem ich alle Grundlagen berherrsche.

...zur Frage

Frontend: was nach JS/welches Framework?

ist jetzt weit hergeholt aber, ich wollte neben Java (was ich in der Schule Lerne und auch weiter Lernen will) mich was mit HTML, CSS und JS beschäftigen, da ich es überall sehe bspl Youtube, instagram etc und ich Interesse bekommen habe. Jedoch gibt es einige Frameworks aber welche soll ich denn Lernen? Gibt halt react etc aber kenn mich da nicht so aus..

wie gesagt, es ist weit hergeholt weil ich noch die basics lernen muss aber das ist jetzt grob meine Interesse :)

...zur Frage

Wie schwer ist React?

...zur Frage

Welchen Techstack nutzt ihr als Web Developer im Beruf?

und was Techstack ihr. Front end backend fullstack ?

Angular Typescript node js mongo bootstrap oder sowas.
React js java scss
Vue js less php

Was für wichtige libraries nutzt ihr.

Und wenn es für euch ok ist, wo arbeitet ihr genau/ungefähr / welche branche.

Und wie lange/ welche position

Arbeitet ihr fest bei zb Meta oder Freiberuflich

(Kriegt ihr regelmässig aufträge von unternehmen oder kleinere durch fiverr)

...zur Frage

Carrd.co Button zu neue seite?

Man kann ja bei carrd.co solche Button erstellen und wenn man darauf drückt kommt man zu einer anderen Seite.

Ich habe allerdings sehr oft bei anderen Webseiten gesehen das sie auch solche Button hatten, allerdings führte es zwar zu einer anderen Seite aber trotzdem war es irgendwie die selbe webseite.

Das was ich habe... ich muss bei den Button ein Link eingeben.

Aber muss man wirklich immer wieder eine neue Webseite Seite erstellen oder geht es auch anders? Wenn ja wie?

...zur Frage

Welche Sprache soll ich danach lernen?

Also ich kann JavaScript jetzt gut. Bin dabei Node.js zu lernen. Danach React/React Native.

Ihr entscheidet. Welche Sprache soll ich danach lernen? Python oder C#?

...zur Frage

React Js App Deployen auf Webserver?

Ich habe jetzt mit

 npm run build

einen Ordner namens "build", wenn ich den über den FTP Zugang hochlade und die URL aufrufe erscheint nur eine Leere Weiße Seite.

Jedoch wenn ich es über andere Anbieter Deploye die das für mich übernehmen dann funktioniert alles einwandfrei.

Wie genau kriege ich das auch hin ?
Nutze All Inkl.

...zur Frage

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zur Frage

hi ich habe eine frage ich habe einen fabric Server gemacht mit und er crasht von der api?

auf den Server sind die mods

(ftb-ultimine-fabric-2001.1.2.jar)

(ftb-library-fabric-2001.1.4.jar)

(fabric-api-0.91.2+1.20.2.jar)

(architectury-10.0.17-fabric.jar)

und die mods / api lässt den Server abschmieren was mache ich da falsch er lädt normal bis er meint einen Fehler zu haben und dann zu crashen

(---- Minecraft Crash Report ----

// Ooh

java.lang.ClassCastException: class net.minecraft.class_8779 cannot be cast to class net.minecraft.class_161 (net.minecraft.class_8779 and net.minecraft.class_161 are in unnamed module of loader net.fabricmc.loader.impl.launch.knot.KnotClassLoader @3a82f6ef)

at dev.ftb.mods.ftblibrary.util.KnownServerRegistries.<init>(KnownServerRegistries.java:63)

at dev.ftb.mods.ftblibrary.FTBLibrary.serverStarted(FTBLibrary.java:32)

at dev.architectury.event.fabric.EventHandlerImpl.lambda$registerCommon$9(EventHandlerImpl.java:65)

at net.fabricmc.fabric.api.event.lifecycle.v1.ServerLifecycleEvents.lambda$static$2(ServerLifecycleEvents.java:49)

at net.minecraft.server.MinecraftServer.handler$zfa000$fabric-lifecycle-events-v1$afterSetupServer(MinecraftServer.java:2351)

at net.minecraft.server.MinecraftServer.method_29741(MinecraftServer.java:646)

at net.minecraft.server.MinecraftServer.method_29739(MinecraftServer.java:263)

at java.base/java.lang.Thread.run(Thread.java:833)

A detailed walkthrough of the error, its code path and all known details is as follows:

---------------------------------------------------------------------------------------

-- System Details --

Details:

Minecraft Version: 1.20.2

Minecraft Version ID: 1.20.2

Operating System: Linux (amd64) version 6.1.49-Unraid

Java Version: 17.0.7, Debian

Java VM Version: OpenJDK 64-Bit Server VM (mixed mode, sharing), Debian

Memory: 1545143776 bytes (1473 MiB) / 2147483648 bytes (2048 MiB) up to 4294967296 bytes (4096 MiB)

CPUs: 16

Fabric Mods:

architectury: Architectury 10.0.17

fabric-api: Fabric API 0.91.2+1.20.2

fabric-api-base: Fabric API Base 0.4.33+fce67b32a0

fabric-api-lookup-api-v1: Fabric API Lookup API (v1) 1.6.42+b1792f7da0

fabric-biome-api-v1: Fabric Biome API (v1) 13.0.14+b1792f7da0

fabric-block-api-v1: Fabric Block API (v1) 1.0.12+73761d2ea0

fabric-block-view-api-v2: Fabric BlockView API (v2) 1.0.1+73761d2ea0

fabric-command-api-v1: Fabric Command API (v1) 1.2.37+f71b366fa0

fabric-command-api-v2: Fabric Command API (v2) 2.2.16+b1792f7da0

fabric-commands-v0: Fabric Commands (v0) 0.2.54+df3654b3a0

fabric-containers-v0: Fabric Containers (v0) 0.1.78+df3654b3a0

fabric-content-registries-v0: Fabric Content Registries (v0) 5.0.5+b1792f7da0

fabric-convention-tags-v1: Fabric Convention Tags 1.5.8+b1792f7da0

fabric-crash-report-info-v1: Fabric Crash Report Info (v1) 0.2.20+f4b7e424a0

fabric-data-generation-api-v1: Fabric Data Generation API (v1) 13.1.8+b1792f7da0

fabric-dimensions-v1: Fabric Dimensions API (v1) 2.1.57+b1792f7da0

fabric-entity-events-v1: Fabric Entity Events (v1) 1.5.26+b1792f7da0

fabric-events-interaction-v0: Fabric Events Interaction (v0) 0.6.10+b1792f7da0

fabric-events-lifecycle-v0: Fabric Events Lifecycle (v0) 0.2.69+df3654b3a0

fabric-game-rule-api-v1: Fabric Game Rule API (v1) 1.0.42+a44e16a6a0

fabric-item-api-v1: Fabric Item API (v1) 2.1.33+b1792f7da0

fabric-item-group-api-v1: Fabric Item Group API (v1) 4.0.15+e3d2bf3fa0

fabric-lifecycle-events-v1: Fabric Lifecycle Events (v1) 2.2.27+b1792f7da0

fabric-loot-api-v2: Fabric Loot API (v2) 2.1.1+3ba460fba0

fabric-message-api-v1: Fabric Message API (v1) 6.0.2+e3d2bf3fa0

fabric-mining-level-api-v1: Fabric Mining Level API (v1) 2.1.55+f4b7e424a0

fabric-networking-api-v1: Fabric Networking API (v1) 3.1.2+95a8ac51a0

fabric-object-builder-api-v1: Fabric Object Builder API (v1) 12.1.2+2ff98d3ba0

fabric-particles-v1: Fabric Particles (v1) 1.1.4+f4b7e424a0

fabric-recipe-api-v1: Fabric Recipe API (v1) 2.0.11+52b3ebe5a0

fabric-registry-sync-v0: Fabric Registry Sync (v0) 4.0.9+b1792f7da0

fabric-rendering-data-attachment-v1: Fabric Rendering Data Attachment (v1) 0.3.39+73761d2ea0

fabric-rendering-fluids-v1: Fabric Rendering Fluids (v1) 3.0.30+f4b7e424a0

fabric-resource-conditions-api-v1: Fabric Resource Conditions API (v1) 2.3.11+239dafd8a0

fabric-resource-loader-v0: Fabric Resource Loader (v0) 0.11.12+b1792f7da0

fabric-screen-handler-api-v1: Fabric Screen Handler API (v1) 1.3.44+b1792f7da0

fabric-transfer-api-v1: Fabric Transfer API (v1) 3.3.12+4944b5a5a0

fabric-transitive-access-wideners-v1: Fabric Transitive Access Wideners (v1) 5.0.3+fce67b32a0

fabricloader: Fabric Loader 0.15.0

mixinextras: MixinExtras 0.3.0

ftblibrary: FTB Library 2001.1.4

ftbultimine: FTB Ultimine 2001.1.2

java: OpenJDK 64-Bit Server VM 17

minecraft: Minecraft 1.20.2

Server Running: true

Player Count: 0 / 20; []

Data Packs: vanilla, fabric

Enabled Feature Flags: minecraft:vanilla

World Generation: Stable

Is Modded: Definitely; Server brand changed to 'fabric'

Type: Dedicated Server (map_server.txt)

...zur Frage

React Fullstack mit welchem Backend?

Ich wollte NextJS lernen Fullstack React Framework aber ich stelle mir die Frage, mit was genau man das Ganze verwendet. In fast jedem YouTube-Video wird "Prisma" (davor noch nie gehört) mit einer anderen Datenbank genutzt, was das alles noch schwieriger macht.

Es gibt PostgreSQL, MongoDB, SQLite, usw..

Ich kenne normales SQL in Kombination mit PHP, aber die neuen modernen Sachen kenne ich nicht.

React und PHP harmonieren nicht so gut, es gibt auch wenig Online-Ressourcen und ich sehe da keine Zukunft für Stellenausschreibungen, weshalb ich diese Kombination gar nicht mehr nutzen will und backendseitig lieber von neu anfangen möchte. NextJS wäre bequem, da ich keine Router brauche, SSR habe, TS + Tailwind-Support.

Kann mir ein Fullstack-Entwickler von euch eine Roadmap empfehlen?

NextJS mit was als Datenbank, MERN-Stack vielleicht oder irgendwas anderes?

Ich bin bereit in Zukunft mehr zu lernen, aber erstmal einen Allrounder, in dem ich mein Wissen vertiefen kann.

...zur Frage

Welches CSS Framework und welches Planungstool sollte ich nutzen?

Hallo,

bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.

Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?
Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Gruß ebody

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen