如何使用服务器端获取 next13 中的数据?

问题描述 投票:0回答:0

我正在使用 next13。 我听说在 next13 中,所有文件都在服务器端呈现,而不需要使用 serversideProps 函数。

但是,如果不做“use Client”,就会出错。这里不使用useEffect怎么通过服务端渲染导入电影数据呢?我也在使用 redux-toolkit。

(主页.tsx)

  "use client";

  export default function Home() {
    const { movies } = useSelector((state: RootState) => state.post);

    const dispatch = useAppDispatch();

    useEffect(() => {
      const getmovie = async () => {
        dispatch(LoadMovies(API_KEY));
      };

      getmovie();
    }, []);

    return (
      <Container>
        <CardWrapper>
          {movies.map((v) => {
            return <Card movie={v} />;
          })}
        </CardWrapper>
      </Container>
    );
  }

(动作.tsx)

  export const LoadMovies = createAsyncThunk(
    "post/LoadMovies",
    async (data: any, { rejectWithValue }) => {
      try {
        const response = await axios.get(
          `https://api.themoviedb.org/3/${"movie/top_rated"}?api_key=${data}&language=en-US&page=1`
          // { next: { revalidate: 10000 } }
        );
        console.log("response:", response);
        return response.data.results;
      } catch (error: any) {
        console.error(error);
        return rejectWithValue(error.response.data);
      }
    }
  );
javascript reactjs next
© www.soinside.com 2019 - 2024. All rights reserved.