Is possible to use getServerSideProps on client components inside app dir?

Question

So basically I want to use getServerSideProps on a client component in app directory

"use client";
import React, { useLayoutEffect, useState } from "react";
import VoxelDog from "../src/components/loaders/voxel-dog";
import FirstSection from "../src/components/reusable/FirstSection";
import FeaturesSection from "../src/components/reusable/FeaturesSection";
import BannerMobile from "../src/components/mobile/BannerMobile";

// get server side props from the server

const page = (
  props: any // get the props from the server
) => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth as number);

  useLayoutEffect(() => {
    function updateSize() {
      setWindowWidth(window.innerWidth);
    }
    window.addEventListener("resize", updateSize);
    updateSize();
    return () => window.removeEventListener("resize", updateSize);
  }, [windowWidth]);

  console.log(props.data);

  return (
    <>
      <div className="flex lg:flex hidden md:hidden md:mt-[60px] lg:mt-[60px] items-center justify-center">
        <div
          style={{
            width: windowWidth > 1300 ? windowWidth / 1.15 : windowWidth / 1.01,
          }}
          className="flex justify-between px-4 gap-3"
        >
          <div>
            <VoxelDog />
          </div>
          <div>
            <h1 className="text-4xl font-bold text-yellow-300">
              Welcome to learn with me
            </h1>
            <p
              className="
            text-white
            text-lg
            font-semibold
            tracking-wider
            mt-9
            lg:max-w-[540px]
            md:max-w-[400px]
          "
            >
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into
              electronic typesetting, remaining essentially unchanged. It was
              popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages.
            </p>
            <button
              className="mt-[40px] first-letter:
          uppercase bg-yellow-400 text-white font-bold py-3 px-9 rounded-2xl
          "
            >
              Browse different courses
            </button>
          </div>
        </div>
      </div>
      <div className="block mt-[40px] lg:hidden">
        <BannerMobile />
      </div>
      <div className="block lg:block hidden">
        <FirstSection />
        <br />
        <br />
        <FeaturesSection windowWidth={windowWidth} />
      </div>
    </>
  );
};

export async function getServerSideProps(context: any) {
  const res = await fetch("http://localhost:3000/api/courses");
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default page;

This will return undefined if I console log the props.data in terminal and browser console. I don`t know if I did something wrong here. The api i want to fetch is an internal one.

I tried to use getServerSideProps on a server component but it still does not work

Answer 1

Next.js version 13, there is a new feature that allows for server-side data fetching by default on all pages, including app directory. This is achieved by using the fetch method with the cache: 'no-store' option. This allows for server-side rendering of data on all pages, similar to how getServerSideProps function works. You can refer the official docunentation https://nextjs.org/blog/next-13#data-fetching on how to use this feature in Next.js version 13 and later.