영화페이지를 inspect 하면 많~은 정보가 담겨있다.

로딩을 보여주고 싶지 않을 때

rewrite대신에 serverSide rendering 을 해준다. with ‘await’

⇒ page가 유저에게 보여지기 전에 props를 받아오는 function을 만드는 것!

위의 await와 loading 을 모두 지워주고

아래에서 (서버사이드프롭스) 실행하도록 한다.

index.js

import { useEffect, useState } from "react";
import Seo from "./components/Seo";

// const API_KEY = "10923b261ba94d897ac6b81148314a3f"; // next.config.js로 이동

export default function Home(<u>{result}</u>) {
  
  return (
    <div className="container">
      <Seo title="Home" />
      
      {/*화면 출력*/}
      {<u>**results**</u>?.map((movie) => (
        <div className="movie" key={movie.id}>
          <img src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} />
          <h4>{movie.original_title}</h4>
        </div>
      ))}

      {/* 스타일 */}
      <style jsx>{`
        .container {
          ...
      `}</style>
    </div>
  );
}
**export** **async** function  **getServerSideProps**() {
   const {result } = **await** (await fetch(`/api/movies`)).json();
   **return** {
			props: {
				<u>results</u>,
			}
		}
} //* asyncc를 써준것은 await를 써주었기 때문에..(?)

getServerSideProps에서는 객체를 return하는데,

그 객체에는 props라는 key가 있고,

key안에는 원하는 데이터를 아무거나(result) 넣을 수 있다.

✨아무거나 넣은 이것은 어디서 가져오나??

맨 위에~ 컴포넌트(page)에게 prop로 넣어준다!

export default function Home( **{result}** ) { ....