Next.js Discord

Discord Forum

Getting results as undefined

Answered
Wuchang bream posted this in #help-forum
Open in Discord
Avatar
Wuchang breamOP
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;
Image
Answered by Ray
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;
View full answer

53 Replies

Avatar
Ray
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;
Answer
Avatar
Wuchang breamOP
why no need to use 'use server'?
Avatar
Ray
use server is only for server action
you are not using server action here
Avatar
Wuchang breamOP
and how should i implement getServerSideProps of page router similar to app router?
can u explain with example?
Avatar
Ray
just like this
Avatar
Wuchang breamOP
wdym by a server action
Avatar
Ray
the doc have good explanation
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
Avatar
Wuchang breamOP
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
Avatar
Ray
I don't see you are using useEffect here
Avatar
Wuchang breamOP
yeah cause i rendered it as a server side rendering
to hide my api keys ykyk
rather than fetching on client side
Avatar
Ray
wdym by this?
Avatar
Wuchang breamOP
uh like
i dont understand the meaning of server actions
Avatar
Ray
read the doc here
Avatar
Wuchang breamOP
you basically use it to send an api request only right
Avatar
Ray
Image
Avatar
Wuchang breamOP
oh i see
and i did as you said but i am getting an error of "fetch failed"
even removed the "use server"
Avatar
Ray
then check the url and the api key
Avatar
Wuchang breamOP
its perfectly fine
i am logging the results and i can see the json data
in terminal
Avatar
Ray
so its not fetch failed?
if you can see the result in terminal
Avatar
Wuchang breamOP
Image
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;
Avatar
Ray
where do you see the json data?
Avatar
Wuchang breamOP
the terminal
Avatar
Ray
you mean this?
Avatar
Wuchang breamOP
yus
Avatar
Ray
check your url and the api key
Avatar
Wuchang breamOP
should i be using "use server" in the banner component?
Avatar
Ray
no
Avatar
Wuchang breamOP
o
see
Image
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?
Avatar
Ray
you could pass the data to it
Avatar
Wuchang breamOP
oh
ok
i will try
thank you
but there is not really a point in using that rn
ig