我正在使用 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);
}
}
);