CODEWITHSUNDEEP
styled-componentsserver-side-renderingnext.js13theming
Ahmad aziz
Ahmad aziz

Reputation: 43

How to know if SSR/SSG is being used in Nextjs 13 or not?

So i wanted to implement theming while using styled components and for that you have to use a ThemeProvider which uses Context so it cannot be in a server side component, but according to the docs ThemeProvider is supposed to be a top level component at the Layout. Which mean I would have to make Layout.tsx a client side component.

So what i did is that i created a provider.tsx component and made that into a client side component

provider.tsx

"use client";

import { ThemeProvider } from "styled-components"; 
import { darkTheme, lightTheme, GlobalStyles } from "@/themeConfig";

const Providers = ({ children }: { children: React.ReactNode }) => {
    return ( 
        <ThemeProvider theme={lightTheme}> 
            <GlobalStyles /> {children} 
        </ThemeProvider>   
    ); 
};
export default Providers;

and then used that it in Layout.tsx

import "./globals.css";
import StyledJsxRegistry from "@/lib/registry";
import Providers from "@/lib/providers"; 
import { Inter } from "next/font/google";

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

export default function RootLayout({children}: {children: React.ReactNode;}) { 
    return ( 
        <html lang="en"> 
            <StyledJsxRegistry> 
                <Providers> 
                    <body className={inter.className}>{children}</body> 
                </Providers> </StyledJsxRegistry> 
        </html>   
    ); 
}

Now what I wanna know is that since Providers is a client side component and is parent to the entire page/app does that mean every child will also be a client side component, if not then is this the right way to implement theming in NextJs13 using styled components, while keeping SSR active? How exactly can one know if SSR is being used?

Upvotes: 0

Views: 795

Answers (1)

BoxedFruits
BoxedFruits

Reputation: 86

Just console log it. If its being rendered on the server, it will show in the server logs. If it is being rendered on the client, it will show in the browser logs

Upvotes: 0

Related Questions