NestJs Server Side rendering

Server Side rendering

서버에서 api데이터를 모두 로딩한 후 해당 데이터를 이용하여 html을 완성 후

클라이언트 사이드에서 html을 다운로드하여 렌더링

Server Side

// 함수명은 고정 ; 함수명 오타 주의
export async function getServerSideProps() {
const response = await fetch(
    `https://api.themoviedb.org/3/movie/popular?api_key=${process.env.API_KEY}`
  );
  const { results } = await response.json();
  
  return {
  
  
  	props : {results}
  
  
  }

}

// component props로 값을 받아 사용 
export default function Home({results}) {
  return <>
          {results?.map((movie: any) => ()}    
      </>

Client Side

export default function Home() {

	const [] = useState<[]| null> (null);
    
    useEffect(() => {
      (async () => {
        const response = await fetch("/api/movies");

        const data = await response.json();
        console.log(data, new Date());
        setMovies(data.results);
      })();
    }, []);
    
	return <>
    	{movies?.map((movie: any) => ()}    
    </>
}