fix: corrected initial fallback data load on details page (#3395)

src/pages/movie/[movieId]/index.tsx

@@ -1,7 +1,7 @@
 import MovieDetails from '@app/components/MovieDetails';
 import type { MovieDetails as MovieDetailsType } from '@server/models/Movie';
 import axios from 'axios';
-import type { NextPage } from 'next';
+import type { GetServerSideProps, NextPage } from 'next';
 
 interface MoviePageProps {
   movie?: MovieDetailsType;
@@ -11,8 +11,9 @@ const MoviePage: NextPage<MoviePageProps> = ({ movie }) => {
   return <MovieDetails movie={movie} />;
 };
 
-MoviePage.getInitialProps = async (ctx) => {
-  if (ctx.req) {
+export const getServerSideProps: GetServerSideProps<MoviePageProps> = async (
+  ctx
+) => {
   const response = await axios.get<MovieDetailsType>(
     `http://localhost:${process.env.PORT || 5055}/api/v1/movie/${
       ctx.query.movieId
@@ -25,11 +26,10 @@ MoviePage.getInitialProps = async (ctx) => {
   );
 
   return {
+    props: {
       movie: response.data,
+    },
   };
-  }
-
-  return {};
 };
 
 export default MoviePage;

src/pages/tv/[tvId]/index.tsx

@@ -1,7 +1,7 @@
 import TvDetails from '@app/components/TvDetails';
 import type { TvDetails as TvDetailsType } from '@server/models/Tv';
 import axios from 'axios';
-import type { NextPage } from 'next';
+import type { GetServerSideProps, NextPage } from 'next';
 
 interface TvPageProps {
   tv?: TvDetailsType;
@@ -11,12 +11,11 @@ const TvPage: NextPage<TvPageProps> = ({ tv }) => {
   return <TvDetails tv={tv} />;
 };
 
-TvPage.getInitialProps = async (ctx) => {
-  if (ctx.req) {
+export const getServerSideProps: GetServerSideProps<TvPageProps> = async (
+  ctx
+) => {
   const response = await axios.get<TvDetailsType>(
-      `http://localhost:${process.env.PORT || 5055}/api/v1/tv/${
-        ctx.query.tvId
-      }`,
+    `http://localhost:${process.env.PORT || 5055}/api/v1/tv/${ctx.query.tvId}`,
     {
       headers: ctx.req?.headers?.cookie
         ? { cookie: ctx.req.headers.cookie }
@@ -25,11 +24,10 @@ TvPage.getInitialProps = async (ctx) => {
   );
 
   return {
+    props: {
       tv: response.data,
+    },
   };
-  }
-
-  return {};
 };
 
 export default TvPage;