Getting results as undefined

Answered

Wuchang bream posted this in #help-forum

Wuchang breamOP

2024-01-13T17:41:54.000Z

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;

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

@Wuchang bream 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. tsx 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;

Ray

2024-01-13T17:45:54.000Z

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

Wuchang breamOP

2024-01-13T17:46:20.000Z

why no need to use 'use server'?

Ray

2024-01-13T17:46:36.000Z

use server is only for server action

you are not using server action here

Wuchang breamOP

2024-01-13T17:46:58.000Z

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

@Ray you are not using server action here

Wuchang breamOP

2024-01-13T17:47:06.000Z

can u explain with example?

@Ray first, you don't need to use `'use server'` here and try this ts 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;

Ray

2024-01-13T17:47:12.000Z

just like this

Wuchang breamOP

2024-01-13T17:47:24.000Z

wdym by a server action

@Wuchang bream can u explain with example?

Ray

2024-01-13T17:47:29.000Z

the doc have good explanation

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

Wuchang breamOP

2024-01-13T17:48:18.000Z

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

Ray

2024-01-13T17:48:55.000Z

I don't see you are using useEffect here

Wuchang breamOP

2024-01-13T17:49:08.000Z

yeah cause i rendered it as a server side rendering

to hide my api keys ykyk

rather than fetching on client side

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

Ray

2024-01-13T17:49:37.000Z

wdym by this?

Wuchang breamOP

2024-01-13T17:49:43.000Z

uh like

i dont understand the meaning of server actions

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

Ray

2024-01-13T17:50:06.000Z

read the doc here

Wuchang breamOP

2024-01-13T17:50:11.000Z

you basically use it to send an api request only right

@Wuchang bream you basically use it to send an api request only right

Ray

2024-01-13T17:50:38.000Z

Wuchang breamOP

2024-01-13T17:51:29.000Z

oh i see

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

even removed the "use server"

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

Ray

2024-01-13T17:52:12.000Z

then check the url and the api key

Wuchang breamOP

2024-01-13T17:52:19.000Z

its perfectly fine

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

in terminal

Ray

2024-01-13T17:52:45.000Z

so its not fetch failed?

if you can see the result in terminal

Wuchang breamOP

2024-01-13T17:53:02.000Z

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;