Nextjs for landing page with both ssr and some csr | Next.js | Page 1

steel parcel Apr 23, 2024, 1:06 PM

#

Trying to use nextjs for building my landing page but facing issues with using both ssr and csr in same component.
I have a component navbar

import navbar_logo from "../../assets/Vector.svg";
import styles from "./Navbar.module.scss";
import scrollIntoSection from "../../utils/scrollIntoSection";
import HamburgerIcon from "../../assets/navbar/Hamburger_Icon.svg";

const Navbar: React.FC<NavbarProps> = ({ navbarItems }) => {
    const [scrolled, setScrolled] = useState(false);

    useEffect(() => {
      const handleScroll = () => {
        setScrolled(window.scrollY > document.querySelector("#hero").offsetHeight);
      };
      window.addEventListener("scroll", handleScroll);
      return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    return (
      <nav className={styles.stickyNav}>
        <div className="nav-container maxWidth_1200">
          <img src={navbar_logo} alt="Company logo" className="nav-logo-img-container" />
          <ul>
            {navbarItems.map((item, idx) => (
              <li key={idx} onClick={() => scrollIntoSection(item)}>{item}</li>
            ))}
          </ul>
        </div>
      </nav>
    );
};

type NavbarProps = { navbarItems: string[] };

export default Navbar;

When i try running this it shows some errors like: ``You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.`

I expected next to handle ssr and csr implicitly, but if i decalre the component as "use client", that doesn't give the SEO benefits. Can someone suggest how do i use ssr and csr both at the same time.

ebon kernelBOT Apr 23, 2024, 1:06 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

fervent mortar Apr 23, 2024, 1:06 PM

#

use client still is server prerendered

#

you can prove that by running your site and disabeling js (make sure you do actual start as dev is sometimes not as nice)

#

if you know pages dir, use client is basicly that... the RSC is a new thing that doesnt have the hydration on client

#

so basicly import your useclient and that small part will be clientable, and the rest will be easy work for client

steel parcel Apr 23, 2024, 1:08 PM

#

any references @fervent mortar

fervent mortar Apr 23, 2024, 1:09 PM

#

fervent mortar so basicly import your useclient and that small part will be clientable, and the...

but all will still be readonly for seo

fervent mortar Apr 23, 2024, 1:09 PM

#

steel parcel any references <@657067112434499595>

yes, the docs: https://nextjs.org/docs/app/building-your-application/rendering/client-components

steel parcel Apr 23, 2024, 1:12 PM

#

Thanks

fervent mortar Apr 23, 2024, 1:14 PM

#

no problem, do you have any more questions about this?

steel parcel Apr 23, 2024, 1:19 PM

#

Yes so just want to clear, then ssr is only useful when we need to use some service requiring secrets which shouldn't be exposed in browser, so the connections are made on server side. I can't think of any other usecase where we need it

fervent mortar Apr 23, 2024, 1:20 PM

#

its simpler, sends less stuff to client (as you just send basicly html instead of the react code and such), and you can use async function natively

#

also can do fetching on server with suspense for loading skeletons

steel parcel Apr 23, 2024, 1:23 PM

#

Let's say i didn't had requirement for usestate, then using ssr vs csr what difference does each make

fervent mortar Apr 23, 2024, 1:26 PM

#

basicly what i said above (if it doesnt make sense feel free to say that)

#

and if you use no use hooks and anything client, you should just use server and make everything simpler (after all both ways are rendered on server, one just renders and sends code to client)

steel parcel Apr 23, 2024, 1:33 PM

#

Thanks 🙂

ebon kernelBOT Apr 23, 2024, 1:36 PM

#

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1232316591543423016 message)

#

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1232316591543423016 message)

steel parcel Apr 23, 2024, 2:38 PM

#

@fervent mortar What if we abstract out the client functionality in separate component

"use client"
import React, { useEffect, useState } from 'react';
import styles from "./Navbar.module.scss";

const NavbarClient: React.FC = () => {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > document.querySelector("#hero").offsetHeight);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // Apply dynamic CSS class based on scroll state
  useEffect(() => {
    const nav = document.getElementById('nav');
    if (nav) {
      if (scrolled) {
        nav.classList.add(styles.scrolled);
      } else {
        nav.classList.remove(styles.scrolled);
      }
    }
  }, [scrolled]);

  return null;  // This component does not render anything itself
};

export default NavbarClient;```


and we use this component in NavbarServer component, so that our html is rendered with rsc.
here is the NavbarServer component:
```import React from 'react';
import navbar_logo from "../../assets/Vector.svg";
import styles from "./Navbar.module.scss";
import scrollIntoSection from "../../utils/scrollIntoSection";
import NavbarClient from './NavbarClient';

const NavbarServer: React.FC<NavbarProps> = ({ navbarItems }) => {
  return (
    <nav className={styles.stickyNav}>
      <div className="nav-container maxWidth_1200">
        <img src={navbar_logo} alt="Company logo" className="nav-logo-img-container" />
        <ul>
          {navbarItems.map((item, idx) => (
            <li key={idx} onClick={() => scrollIntoSection(item)}>{item}</li>
          ))}
        </ul>
        {/* Client-specific component that handles dynamic behaviors */}
        <NavbarClient />
      </div>
    </nav>
  );
};

type NavbarProps = { navbarItems: string[] };

export default NavbarServer;```

What difference does it make?

#

@rough turtle any comments?

rough turtle Apr 23, 2024, 2:50 PM

#

@steel parcel you can call client components from server components, it wont make a difference since either way your client component is getting server rendered once

#

you cant call a server component from a client component tho, you can only import it as props and render that

#Nextjs for landing page with both ssr and some csr