Can I use UseState with Server-Side-Rendering? Nextjs/JavaScript-CodePudding

Can you use useState (and other react hooks?) with Server Side Rendering? Everytime I am trying to run the code below I get the error TypeError: Cannot read property 'useState' of null. However, when I comment out the getServerSideProps function at the very bottom I have no problem running the code as intended. So my questions is can useState be used with Server Side Rendering in nextjs? If the answer is yes, then where am I going wrong in the code below?

 import React from "react";
    import { useRouter } from "next/router";
    import useSelectedGenreInfoExtractor from "../../hooks/useSelectedGenreInfoExtractor";
    import { useState } from "react";
    import { useEffect } from "react";
    import Navbar from "../../components/Navbar";
    import useFetchTrendingCatagory from "../../hooks/useFetchTrendingCatagory";
    import useFetchTopRatedCatagory from "../../hooks/useFetchTopRatedCatagory";
    import useFetchMovieGenreResults from "../../hooks/useFetchMovieGenreResults";
    import Moviegenreresults from "../../components/Moviegenreresults";
    
export default function genre(props) {
      const [myresultsfromhook, setMyresultsfromhook] = useState();
      const [myreturnedmovies, setMyreturnedmovies] = useState();
    
      const router = useRouter();
      const { genre } = router.query;
    
      if (genre == "Trending") {
        let mymovies = useFetchTrendingCatagory();
        console.log("This is a log of my props", props);
    
        return (
          <div>
            {/* <Navbar /> */}
            <div>{genre}</div>
            <Moviegenreresults movies={mymovies} />
          </div>
        );
      } else if (genre == "Top Rated") {
        let mymovies = useFetchTopRatedCatagory();
    
        return (
          <div>
            {/* <Navbar /> */}
            <div>{genre}</div>
            <Moviegenreresults movies={mymovies} />
          </div>
        );
      } else {
        let mymovies = useFetchMovieGenreResults(genre);
    
        return (
          <div>
            {/* <Navbar /> */}
            <div>{genre}</div>
            <Moviegenreresults movies={mymovies} />
          </div>
        );
      }
    }
    
    export async function getServerSideProps(context) {
      if (context.params.genre == "Trending") {
        let mymovies = useFetchTrendingCatagory();
        return {
          props: {
            results: mymovies.results,
          },
        };
      } else if (context.params.genr == "Top Rated") {
        let mymovies = useFetchTopRatedCatagory();
        return {
          props: {
            results: mymovies.results,
          },
        };
      } else {
        let mymovies = useFetchMovieGenreResults(genre);
        return {
          props: {
            results: mymovies.results,
          },
        };
      }
    }

CodePudding user response：

I think fundamentally the problem is the way you are using getServerSideProps.

Even thought the answer is you can not use useState inside getServerSideProps because this function run in the server, it is important to understand what getServerSideProps does and when, I think you can find very clear explanation about that in next docs.

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

Inside getServerSideProps use axios or the fetch api to get your data and pass it to the props.

I am not 100% sure but I thinnk inn your case you can also use Promise.all() to get the data from those three api calls.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

CodePudding user response：

useState should be inside the component, it is a React hook. serverside functions are independent of React components.

I think the issue is the name of the component should be with capital letter:

 // not genre
 export default function Genre(props)