CODEWITHSUNDEEP
javascriptnext.jsjsxnext.js13react-server-components
Leight
Leight

Reputation: 5

Next.js 13: Can this components use server component and client component together for better performance? How to achieve it?

Introduce

I'm curently learning server and client components in Next.js 13 and wants to implement it in my project. I have a container component that uses react-intersection-observer to determine which section is in view and updates the active state for the navbar. I want to fetch data securely in the about component using the server component and load Home and Divisions components quickly using the server component, as those components don't use any events or hooks.

Question

I'm confused about how to include the children components (About and Divisions) inside the corresponding sections in the ContainerClient component. I've unsure if it's possible or if there are any tricks or alternative approaches to achieve this.

page.tsx

// In Server Component what i want: 
import ContainerClient from '@/components/landingPage/ContainerClient';
import Home from '@/components/landingPage/Home';
import About from '@/components/landingPage/About';
import Divisions from '@/components/landingPage/Divisions';

export default function Page() {
return (
     <ContainerClient>
          <Home />
          <About />
          <Divisions /> 
      </ContainerClient>
)}

ComponentClient.tsx

'use client';
import React, { useEffect, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import Navbar from '../Navbar';
import NavbarMobile from '../NavbarMobile';

type Props = {
  children: React.ReactNode;
};

const ContainerClient: React.FC<Props> = ({ children }) => {
  const [active, setActive] = useState<string>('home');

  const [refHome, inViewHome] = useInView({
    threshold: 0.2,
  });
  const [refAbout, inViewAbout] = useInView({
    threshold: 0.2,
  });
  const [refDivisions, inViewDivisions] = useInView({
    threshold: 0.2,
  });

  useEffect(() => {
    if (inViewHome) {
      setActive('home');
    } else if (inViewAbout) {
      setActive('about');
    } else if (inViewDivisions) {
      setActive('divisions');
    }
  }, [inViewHome, inViewAbout, inViewDivisions]);
  return (
    <>
      <Navbar active={active} />
      <NavbarMobile active={active} />
      <main className="relative bg-primary overflow-x-hidden">
        {/* Home */}
        <section
          ref={refHome}
          className="relative max-w-[1800px] max-h-[1800px] 2xl:mx-auto w-full lg:h-[270vh] h-[200vh] bg-home-mobile lg:bg-home bg-primary bg-center bg-blend-screen bg-opacity-70 
            bg-[length:100vw_200vh] lg:bg-[length:110vw_270vh] over:bg-[length:1800px_1800px] flex flex-col"
          id="home"
        >
          {children}
        </section>
        {/* About */}
        <section  ref={refAbout}
      className="relative max-w-[1800px] max-h-[4000px] 2xl:mx-auto w-full h-max bg-about-mobile lg:bg-about bg-no-repeat bg-top bg-[length:170vw_150vh] lg:bg-[length:100vw_270vh] over:bg-[length:1800px_1800px] flex flex-col z-10">
        {/* I'm confused how to put About component children in here / it is imposible to do it / there are some tricks or way?*/}
        </section>
        {/* Divisions */}
        <section ref={refDivisions}>
          {/* I'm confused how to put Divisions component children in here / it is imposible to do it / there are some tricks or way?*/}
        </section>
      </main>
    </>
  );
};

I want to make the Home, About and Division components adopt a server component and still use react-intersection-observer to observe each section currently in view

Upvotes: 0

Views: 1022

Answers (1)

user17326573
user17326573

Reputation:

Try passing both the components as props and use them instead? I don't think there is straightforward way to get your component as children and just use them instead

Upvotes: 0

Related Questions