子组件的NextJS SSR

Question

我使用的是next js，所以我可以为这个组件呈现的页面获取SSR。问题是我有一个名为的组件，它是通过迭代API的结果来呈现的。问题是从这个组件呈现的内容没有出现在DOM上。我怎样才能让内容出现在DOM上？

/** @jsx jsx */
import { jsx } from 'theme-ui';
import { GetServerSideProps } from 'next';
import EntryComponent from 'src/components/hiphopleage/entry.component';
import { useEffect, useState } from 'react';
import { IPlaylist, IPlaylistItem, IProjectTrack } from 'src/_models/music.model';
import { uniqueId } from "lodash";
import { IPlayerItem } from 'src/_models/player.model';

const ViewLeagueComponent = (props) => {
   const [League, setLeague] = useState<IPlaylist>();
   const [Tracks, setTracks] = useState<IPlaylistItem[]>();
   const { PlayerState, dispatchPlayer } = useContext(PlayerContext);

   useEffect(() => {
     if (props.xleague.data) {
        setLeague(props.xleague.data.playlists[0]);
        setTracks(props.xleague.data.playlistSongs);
     }
   }, [props])


   return (
    <div sx={{ variant: "center", placeItems: "start center" }} className="col-12">
        <div className="col-12 col-md-10 py-3">
            {Tracks && Tracks.map((x: IPlaylistItem, i: number) => <EntryComponent entry={x} index={i} key={uniqueId()} />)}
        </div>
    </div>
)
}

export default ViewLeagueComponent;

export const getServerSideProps: GetServerSideProps = async (ctx) => {
const league = await fetch(`${API_URL}/music/playlists?category=league`);
const xleague = await league.json();

return {
    props: {
        xleague
    }
}

}

Answer 1

假设这不是一个页面组件(在/pages中)。

getStaticProps和getStaticPaths只能用于页面组件本身，而不能用于普通组件。