Getting results as undefined

[prisma jay]

I am trying to implement server side rendering using nextjs app router but I am getting results as undefined.

I even tried logging the movies variable and i am getting the required result.

import config from "@/config.json";

// Components
import Banner from "@/components/Banner";

const apiKey = process.env.API_KEY;

const Home: React.FC<{}> = async () => {
  const movies = await getPopularMovies();

  return (
    <div className="w-full h-[110vh] grid grid-rows-2 align-center justify-items-center py-10">
      <Banner
        movieName={movies.results[0].original_title}
        movieCover={`${config.tmdbImageURL}${movies.results[0].backdrop_path}`}
      />
    </div>
  );
};

const getPopularMovies = async () => {
  "use server";
  var json;
  try {
    const data = await fetch(
      `https://api.themoviedb.org/3/movie/popular?language=en-US&page=1&api_key=${apiKey}`,
      {
        method: "GET",
        cache: "no-store",
      }
    );
    json = await data.json();
  } catch (err) {
    console.error(err);
  }
  return json;
};

export default Home;

[fresh bloom]

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)

[golden hull]

first, you don't need to use 'use server' here and try this

import config from "@/config.json";

// Components
import Banner from "@/components/Banner";

const apiKey = process.env.API_KEY;

const Home: React.FC<{}> = async () => {
  const movies = await getPopularMovies();

  return (
    <div className="w-full h-[110vh] grid grid-rows-2 align-center justify-items-center py-10">
      <Banner
        movieName={movies?.results[0].original_title}
        movieCover={`${config.tmdbImageURL}${movies.results[0].backdrop_path}`}
      />
    </div>
  );
};

const getPopularMovies = async () => {
    const data = await fetch(
      `https://api.themoviedb.org/3/movie/popular?language=en-US&page=1&api_key=${apiKey}`,
      {
        method: "GET",
        cache: "no-store",
      }
    );
    return data.json();
};

export default Home;

[prisma jay]

why no need to use 'use server'?

[golden hull]

use server is only for server action

you are not using server action here

[prisma jay]

and how should i implement getServerSideProps of page router similar to app router?

[prisma jay]

can u explain with example?

[golden hull]

just like this

[prisma jay]

wdym by a server action

[golden hull]

the doc have good explanation

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

[prisma jay]

but i am sending a request to an api of a backend rather than using with useEffect hook

so ig its a server action only

[golden hull]

I don't see you are using useEffect here

[prisma jay]

yeah cause i rendered it as a server side rendering

to hide my api keys ykyk

rather than fetching on client side

[golden hull]

wdym by this?

[prisma jay]

uh like

i dont understand the meaning of server actions

[golden hull]

read the doc here

[prisma jay]

you basically use it to send an api request only right

[prisma jay]

oh i see

and i did as you said but i am getting an error of "fetch failed"

even removed the "use server"

[golden hull]

then check the url and the api key

[prisma jay]

its perfectly fine

i am logging the results and i can see the json data

in terminal

[golden hull]

so its not fetch failed?

if you can see the result in terminal

[prisma jay]

this is the component i am passing the props into

"use client";

import Link from "next/link";
import Image from "next/image";
import { Montserrat } from "next/font/google";

const montserrat = Montserrat({
  display: "swap",
  weight: ["200", "400", "500", "600", "700"],
  subsets: ["latin-ext"],
});

type BannerProps = {
  movieName: string;
  movieDescription?: string;
  movieCover: string;
  movieLink?: string;
  movieGenre?: string[];
};

const Banner: React.FC<BannerProps> = ({
  movieName,
  movieDescription,
  movieCover,
  movieLink,
  movieGenre,
}) => {
  return (
    <div className="w-[90vw] h-[75vh] bg-oxford-blue grid grid-cols-3">
      <section>
        <h1 className="text-white">{movieName}</h1>
      </section>
      <section className="flex items-center justify-center">
        {/* <Image src={movieCover} alt={movieName} fill={true} className="" /> */}
      </section>
    </div>
  );
};

export default Banner;

[golden hull]

where do you see the json data?

[prisma jay]

the terminal

[golden hull]

you mean this?

[prisma jay]

yus

[golden hull]

check your url and the api key

[prisma jay]

should i be using "use server" in the banner component?

[golden hull]

no

[prisma jay]

o

see

o nvm its working now

idk how

so this data is being fetched on the server side and i cant use redux with it right?

[golden hull]

you could pass the data to it

[prisma jay]

oh

ok

i will try

thank you

but there is not really a point in using that rn

ig