Next.js Discord

Discord Forum

SSR CSS loading Bug

Answered
Open in Discord
𝙈𝙖𝙧𝙫𝙞𝙣𝙆OP
I have a problem with my Root SSR Page. Everytime i switch of the Root page to a CSR page and then switch back. Some css is just all over the place. A button just keeps snapping to the bottom left, the h2 doesnt get the correct styling, and its just realy weird. I attached an example Video of what the problem is.

Here is my Code.

Root Page: 
import Link from "next/link";
export default function Home() {
  return (
    <>
      <div className="container" id="main">
        <h1 className="title a1">A1</h1>
        <h2 className="title">The Only Aftereffects</h2>
        <h2 className="title">Extension You'll Need!</h2>
        <Link className="link" href="/download">
          <button className="btn secondary" id="btn-download">
            Download
          </button>
        </Link>
      </div>
      <img src=".././bg1.png" className="bg1" />
      <div className="blob" id="blob-primary"></div>
      <div className="blob" id="blob-secondary"></div>
    </>
  );
}

Layout Page: 
import { Inter } from "next/font/google";
import "./globals.css";
import "./navbar.css";
import { Navbar } from "@/components/Navbar";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "A1",
  description: "Created by MarvinK",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Navbar />
        {children}
      </body>
    </html>
  );
}
Answered by 𝙈𝙖𝙧𝙫𝙞𝙣𝙆
View full answer

5 Replies

𝙈𝙖𝙧𝙫𝙞𝙣𝙆OP
Answer
𝙈𝙖𝙧𝙫𝙞𝙣𝙆OP
im also using useState in the Login page, and its only broken when i use the Navbar, to go to the root folder.
when i go back via the URL, its perfectly fine.
So im pretty sure it has something to do with the useState hook in the login page.
Or / and the event.preventDefault() methode