I have a Next.js website where I am using client-side features like context providers. However, I am not getting the full HTML content on the initial HTML response. Instead, the content is loaded dynamically in the browser, which impacts SEO. The initial HTML response contains placeholders and scripts, but the actual content is missing. Here's a snippet of the initial HTML response I receive:

    
        
    
    
        
Loading...
        
        
        
        
         .............
         .............
         .............
         
    

This is the structure of my app/layout.js:

import "@/app/globals.css";
import Navbar from "@/components/en/Navbar";
import Footer from "@/components/en/Footer";
import LearningContextProvider from "@/context/bn/LearningSectionNavigationBarContext";
import PractiseContextProvider from "@/context/bn/PractiseSectionContext";
import GlobalContextProvider from "@/context/GlobalContext";
import CirtificateContextProvider from "@/context/bn/CirtificateContext";
import ThemeChanger from "@/components/en/ThemeChanger";
import GlobalScript from "@/scripts/GlobalScripts";

export const metadata = {
  // Metadata configuration
};

export default async function RootLayout({ children }) {
  return (
    
      
        

          
            
              
                
                  
                  
                  
                  {children}
                
              
            
          
        
        

And this is my app/page.js:

import Link from "next/link";
import "@/app/globals.css";

export default function page() {
  return (
    

      {/* Website content which I want on initial page response */}
    
  );
}

Question: How can I ensure that the full HTML content is rendered on the initial load in Next.js, especially when using client-side context providers, to improve SEO? What adjustments or code changes are necessary to achieve this?