Als Beispiel wenn ich Redux nutzen möchte muss ich es um einen Provider wickeln und ein YouTuber hatte es mal erklärt wieso daraus dann nicht alle Untergeordneten Components auch automatisch Client Side werden aber ich habe es nicht verstanden wieso das so ist. Was genau passiert da im Hintergrund.
/app/layout.tsx :
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./assets/styles/globals/globals.scss";
import { StoreProvider } from "@/store/StoreProvider";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "",
description: "",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<StoreProvider>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</head>
<body className={inter.className}>
{children}
</body>
</html>
</StoreProvider>
);
}
/app/StoreProvider.tsx :
'use client';
import { store } from "./store";
import { Provider } from "react-redux";
export const StoreProvider = ({ children }
: { children : React.ReactNode}) => {
return <Provider store={store}>{children}</Provider>;
}
Denn normlerweise wenn ich "use client" in einer Contact.tsx benutze wird auch "ContactForm.tsx" automatisch use client.
Eigentlich sollte man ja nur einzelne Buttons use client machen wenn möglich damit Contact dennoch ohne JavaScript das erste mal gerendered wird für den Nutzer.
Bin gerade darauf gekommen weil ich das gleiche jetzt nochmal für einen Darkmode Provider mit TailwindCSS machen wollte wie im Video hier https://www.youtube.com/watch?v=7zqI4qMDdg8&ab_channel=DaveGray
Er sagt keine angst eure ganzen Server Components bleiben Server Components nur ich verstehe Sprachlich/Akustisch nicht was er da auf englisch genau meint obwohl ich gut englisch kann.
