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:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and scripts -->
</head>
<body>
<div>Loading...</div>
<!-- Scripts for dynamic content loading -->
<script src="/_next/static/chunks/webpack.js?v=1741024116521" async=""></script>
<script>
(self.__next_f = self.__next_f || []).push([0]);
self.__next_f.push([2, null])
</script>
<script>
self.__next_f.push([1, "1:HL[\"/_next/static/css/app/layout.css?v=1741024116521\",\"style\"]\n0:D{\"name\":\"r1\",\"env\":\"Server\"}\n"])
</script>
.............
.............
.............
<!-- The content loads in a next js specific format in script tag which will render to website later -->
</body>
</html>
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 (
<html lang="en">
<body className="grid place-items-center relative">
<div className="max-w-[1200px]">
<GlobalContextProvider>
<LearningContextProvider>
<PractiseContextProvider>
<CirtificateContextProvider>
<Navbar />
<ThemeChanger />
<GlobalScript />
{children}
</CirtificateContextProvider>
</PractiseContextProvider>
</LearningContextProvider>
</GlobalContextProvider>
</div>
<Footer />
</body>
</html>
);
}
And this is my app/page.js:
import Link from "next/link";
import "@/app/globals.css";
export default function page() {
return (
<main className="bg_theme_bg_color text-color mt-10">
{/* Website content which I want on initial page response */}
</main>
);
}
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?