Does using client component wrapper around RootLayout restrict the search engines bot to fetch those pages? #68042

projectashik · 2024-07-22T16:24:48Z

projectashik
Jul 22, 2024

Does using client component wrapper around RootLayout restrict the search engines bot to fetch those pages?

"use client"
import { MantineProvider } from "@mantine/core"
import "@mantine/core/styles.css"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import { type FC } from "react"
import { ToastContainer } from "react-toastify"
import "react-toastify/dist/ReactToastify.css"

interface BaseProviderProps {
  children: React.ReactNode
}

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      refetchOnReconnect: false,
    },
  },
})
const BaseProvider: FC<BaseProviderProps> = ({ children }) => {
  return (
    <QueryClientProvider client={queryClient}>
      <MantineProvider
        theme={{
          colors: {
            brand: [
              "#EDEFFC",
              "#D7DBF9",
              "#B0B8F2",
              "#8894EC",
              "#6574E7",
              "#3C50E0",
              "#1F33C6",
              "#172591",
              "#0F1961",
              "#080C30",
              "#04071A",
            ],
          },
          primaryColor: "brand",
        }}
        defaultColorScheme={"light"}
      >
        {children}
        <ToastContainer />
      </MantineProvider>
      <ReactQueryDevtools />
    </QueryClientProvider>
  )
}

export default BaseProvider

import BaseProvider from "@/providers/base-provider"
import { poppinsFont } from "@/utils/fonts"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"

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

export const metadata: Metadata = {
  title: {
    template: "%s | App",
    default: "App",
  },
  description: "App",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang='en'>
      <body className={poppinsFont.className}>
        <BaseProvider>{children}</BaseProvider>
      </body>
    </html>
  )
}

icyJoseph · 2024-07-22T18:28:57Z

icyJoseph
Jul 22, 2024
Collaborator

Hi,

No. Client Components are also SSR'd (rendered during build or on-request-demand on a server). So their HTML is part of what bots/crawler/SEO would see, without having to run JavaScript.

Why do Client Components get SSR'd to HTML? reactwg/server-components#4

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Does using client component wrapper around RootLayout restrict the search engines bot to fetch those pages? #68042

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Does using client component wrapper around RootLayout restrict the search engines bot to fetch those pages? #68042

Uh oh!

projectashik Jul 22, 2024

Replies: 1 comment

Uh oh!

Uh oh!

icyJoseph Jul 22, 2024 Collaborator

projectashik
Jul 22, 2024

icyJoseph
Jul 22, 2024
Collaborator