I use Nextjs 14, Vanilla Extract, mongoDB, Vercel
It takes 2.5 sec at least and 5 sec maximum to move another pages. (with no cache)
And it takes 2 sec at least to change theme. (When I click the toggle button)
The reason I supposed is the way I use vanilla extract or layout(located in post folder)
Vanila Extract theme code is
/** rootlayout */
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const cookieStore = cookies();
const theme = cookieStore.get("theme");
return (
<html lang="ko-KR">
<link rel="icon" href="/favicon.ico" sizes="any" />
<body className={theme?.value === "light" ? ligthTheme : darkTheme}>
<Topbar />
<div className={styles.mainContentContainer}>
<main className={styles.mainContent}>
{children}
<Footer />
</main>
</div>
<BottomBar />
</body>
</html>
);
}
/** toggle button */
import { moon } from "../icon/moon";
import { sun } from "../icon/sun";
import { cookies } from "next/headers";
import { toggleBtn } from "./ToggleBtn.css";
import SVGmorph from "./SVGmorph";
export default function ToggleBtn() {
const theme = cookies().get("theme");
const handleTheme = async () => {
"use server";
if (theme?.value === "dark" || !theme?.value) {
cookies().set("theme", "light");
} else {
cookies().set("theme", "dark");
}
};
return (
<form action={handleTheme}>
<button className={toggleBtn}>
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<SVGmorph paths={[sun, moon, sun]} theme={theme?.value || "dark"} />
</svg>
</button>
</form>
);
}
and css in component
background: vars.themeColor.backgroundColor.glassGradientColorTop
I've tried everything for three days, but I can't find solution.
What is wrong with my code? I appreciate a little advice, so please help me...
source code : https://github.com/22JH/blog published url : https://www.joo-dev.com/
And when I deleted the post layout it becomes much better.(But it still takes a long time to change theme)
I tried delete svg morph and it still takes a long time.
I changed the fetch code (add api folder and route.ts). But it still takes a long time.
The biggest impact to your performance is everytime you fetch data you establish new connection to database using
connectToDB()function and you install to many dependecy.