3r3

[lean remnant]

"use client"

import Footer from '@/components/Footer'
import NavBar from '@/components/store/NavBar'
import SearchBar from '@/components/store/SearchBar'
import SideNav from '@/components/store/SideNav/SideNav'
import Banner from '@/components/store/home/banner/Banner'
import RecommendedSection from '@/components/store/home/recommended/RecommendedSection'
import { usePathname, useSearchParams, useRouter } from 'next/navigation'
import { Suspense, useEffect, useRef } from 'react'
import HomeTopSkel from './HomeTopSkel'

export default function Home() {
const router = useRouter()
const mainSectionRef = useRef<HTMLDivElement>(null)
const pathname = usePathname()
const searchParams = useSearchParams()

const handleMainSectionClick = () => {
if (searchParams.get('sideNav') === 'true') {
router.push(pathname);
}
};

useEffect(() => {
const mainSection = mainSectionRef.current;

if (mainSection) {

  mainSection.addEventListener('click', handleMainSectionClick)

  return () => mainSection.removeEventListener('click', handleMainSectionClick)
}

}, [searchParams.get('sideNav')])

return <div>
<SideNav />
<div className='relative z-10 mx-6' ref={mainSectionRef}>
<Suspense fallback={<HomeTopSkel />}>
<NavBar />
<SearchBar />
<Banner />
</Suspense>
<RecommendedSection />
<Footer />
</div>
</div>
}

When js is disabled, hometopskel is not displayed

[mossy phoenix]

Hi @lean remnant. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. However, it's important to note that the Suspense component from React, which you're using in your code, is used to wait for some code to load and display a loading state (like HomeTopSkel) in the meantime. If JavaScript is disabled, React and its features (including Suspense) won't work, which might be why HomeTopSkel is not displayed.

You can learn more about Suspense and its usage in Next.js from the official Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lean remnant kapa.ai is still learning and improving, please let us know how it did by reacting below

[lean remnant]

@mossy phoenix so loading.tsx doesnt require js to work, but suspense requires js?

[mossy phoenix]

Let me check the knowledge base for you. One moment! :books:

---

Yes, you're correct. The loading.tsx file in Next.js is a feature that allows you to create instant loading states built on React's Suspense. However, it's important to note that Suspense and other React features require JavaScript to function. If JavaScript is disabled, these features won't work as expected.

The loading.tsx file itself is a Server Component (https://nextjs.org/docs/app/building-your-application/rendering/server-components) by default, which means it's rendered on the server and sent to the client as HTML. This part doesn't require JavaScript on the client-side. However, the dynamic aspects of loading.tsx, such as displaying a loading state while waiting for data, would require JavaScript.

You can learn more about loading.tsx and Suspense from the official Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@lean remnant kapa.ai is still learning and improving, please let us know how it did by reacting below

[lean remnant]

@mossy phoenix say in loading.tsx, i have a static component called DisplayGray. In my page.tsx, i have a component DisplayGray with the same props, will nextjs rerender the component during hyration? or will the diffing algorithm make it not rerender?

[mossy phoenix]

Let me check the knowledge base for you. One moment! :books:

---

During the hydration process in Next.js (and React in general), the diffing algorithm compares the server-rendered HTML with what the React components render on the client side. If the output is identical, React will preserve the HTML and only attach event handlers, a process known as hydration.

In your case, if the DisplayGray component in loading.tsx and page.tsx have the same props and render the same output, React should be able to hydrate it without re-rendering. However, this assumes that the component is "pure" in the sense that given the same props, it will always render the same output.

It's important to note that hydration issues can occur if there's a mismatch between the server-rendered HTML and what the component renders on the client side. This is often due to differences in environment (like window size or presence of certain APIs), conditional rendering based on client-side only values, etc.

You can learn more about hydration from the official Next.js documentation (https://nextjs.org/docs/app/building-your-application/rendering/client-components) and React documentation (https://react.dev/reference/react-dom/client/hydrateRoot).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: