[NextJS] Mini_project_3

Server Side Rendering

export async function getServerSideProps() {
  
}

위에 코드를 사용해야만 한다
얘는 function name을 바꿀수 없습니다
무조건 getServerSideProps로 써야함
그러면 백엔드에서 rendering이 돌거야

그렇다면
API_KEY를 여기다가 쓴다면 아예 밖으로 보여지지 않겠지?
Server에서만 도니까!!

아래처럼 코드를 수정하면 우리가 이전에 fetch를 통해 받아왔던 부분이
server에서 일어나게 된다

export async function getServerSideProps() {
  const {results} = await (await fetch(`http://localhost:3000//api/movies`)).json(); // 여기에는 절대 주소로 넣어야함
  return {
    props: {
      results,
    },
  };
}

index.js 수정코드

import HeadTitle from '@/components/headTitle';

export default function Home({results}) {

  return (
    <div className='container'>
      <HeadTitle title="Home" />
        {results?.map((movie) =>(
          <div className='movie' key={movie.id}>
            <img src={`https://image.tmdb.org/t/p/w200${movie.poster_path}`} />
            <h4>{movie.original_title}</h4>
          </div>
        ))}
        <style jsx>{`
        .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          padding: 20px;
          gap: 20px;
        }
        .movie img {
          max-width: 100%;
          border-radius: 12px;
          transition: transform 0.2s ease-in-out;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
        }
        .movie:hover img {
          transform: scale(1.05) translateY(-10px);
        }
        .movie h4 {
          font-size: 18px;
          text-align: center;
        }
      `}</style>
    </div>
  );
}

export async function getServerSideProps() {
  const {results} = await (await fetch(`http://localhost:3000//api/movies`)).json(); // 여기에는 절대 주소로 넣어야함
  return {
    props: {
      results,
    },
  };
}

이러면 loading이 보이지 않고 한번에 page를 보여주게 된다.
왜냐고?
sever에서 rendering을 다 돌렸으니까아아아아

무조건 server side rendering이 좋다는건 아니야
개발자가 상황에 맞게 선택해서 보여주는게 중요하다