子组件的 NextJS SSR答案

【问题标题】：NextJS SSR for child component子组件的 NextJS SSR
【发布时间】：2020-11-18 11:27:14
【问题描述】：

我正在使用下一个 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
    }
}

}

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

假设这不是页面组件（在 /pages 中）。

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

【讨论】：