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,25 +11,25 @@ const MoviePage: NextPage<MoviePageProps> = ({ movie }) => {
   return <MovieDetails movie={movie} />;
 };
 
-MoviePage.getInitialProps = async (ctx) => {
+export const getServerSideProps: GetServerSideProps<MoviePageProps> = async (
-  if (ctx.req) {
+  ctx
-    const response = await axios.get<MovieDetailsType>(
+) => {
-      `http://localhost:${process.env.PORT || 5055}/api/v1/movie/${
+  const response = await axios.get<MovieDetailsType>(
-        ctx.query.movieId
+    `http://localhost:${process.env.PORT || 5055}/api/v1/movie/${
-      }`,
+      ctx.query.movieId
-      {
+    }`,
-        headers: ctx.req?.headers?.cookie
+    {
-          ? { cookie: ctx.req.headers.cookie }
+      headers: ctx.req?.headers?.cookie
-          : undefined,
+        ? { cookie: ctx.req.headers.cookie }
-      }
+        : undefined,
-    );
+    }
+  );
 
-    return {
+  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,25 +11,23 @@ const TvPage: NextPage<TvPageProps> = ({ tv }) => {
   return <TvDetails tv={tv} />;
 };
 
-TvPage.getInitialProps = async (ctx) => {
+export const getServerSideProps: GetServerSideProps<TvPageProps> = async (
-  if (ctx.req) {
+  ctx
-    const response = await axios.get<TvDetailsType>(
+) => {
-      `http://localhost:${process.env.PORT || 5055}/api/v1/tv/${
+  const response = await axios.get<TvDetailsType>(
-        ctx.query.tvId
+    `http://localhost:${process.env.PORT || 5055}/api/v1/tv/${ctx.query.tvId}`,
-      }`,
+    {
-      {
+      headers: ctx.req?.headers?.cookie
-        headers: ctx.req?.headers?.cookie
+        ? { cookie: ctx.req.headers.cookie }
-          ? { cookie: ctx.req.headers.cookie }
+        : undefined,
-          : undefined,
+    }
-      }
+  );
-    );
 
-    return {
+  return {
+    props: {
       tv: response.data,
-    };
+    },
-  }
+  };
-
-  return {};
 };
 
 export default TvPage;