Practice Project 2 - Server Side Rendering

 

1. Server Side Rendering

next.js 의 한 기능에 대해 공부할 것이다.

이건 우리가 페이지가 오직  server side render만 할지 선택할 수 있게 한다.

 

우리가 reload 할 때 next.js가 해당 page를 html 형태로 export 하던지 pre render 하는 걸 알고 있다.

우리는 html이 우리 app 의 initial state(초기 상태)라는 것도 안다.

그래서 html에서 loading화면 같은 걸 기대할 수도 있다.

 

그래서 페이지를 inspect (개발자 도구)하면 어딘가에 loading같은 게 있을 것이다.

하지만 어떤 회사나 개발자들은 pre-rendering 된 이 loading을 유저에게 보여주기 싫을 수도 있다.

fetch라던지 server에서 일어나는 data 관련된 작업을 모두 한 다음에 API가 모두 완료되었을 때 비소로 페이지를 render 하려고 할 것이다.

 

여기서 next.js의 중요한 기능을 다룰텐데, 바로 get server side props이다.

그냥 간단히 getServerSideProps라는 function을 export 하면 된다.

이름이 굉장히 중요하며, 다른 걸로 바꾸면 안된다!

 

이 함수 안에 무엇을 쓰든지간에 해당 코드들은 server에서 돌아갈 것이다.

이걸 이용해서 api key를 숨길 수도 있다,

rewrite를 쓸 수도 있지만 getServerSideProps는 server에서만 동작하니깐 client에게 절대 보여지지 않을 것이다.

 

일단 index.js에서 작성했던 api를 불러오는 부분을 지우자.

그리고 getServerSideProps 함수로 와서 모든 async와 fetch를 해줄 것이다.

 

// index.js

...

export async function getServerSideProps() {
  const { results } = await (await fetch('https://localhost:3000/api/movies')).json();
  
}

 

그리고 하나의 object를 리턴해줄 것인데, 그 object는 props라고 불리는 key 혹은 property를 가질 것이다.

props key 안에는 원하는 데이터 아무거나 넣을 수 있다.

이 props 안에 우리의 results가 들어가면 되겠다!

 

// index.js

...

export async function getServerSideProps() {
  const { results } = await (await fetch('https://localhost:3000/api/movies')).json();
  return {
    props: {
      results,
    },
  };
}

 

의문점은 이 results를 어디서 가져오냐는 것이다,

정답은 index.js에서 정의한 component Home의 prop 안에 넣는 것이다.

 

// index.js

export default function Home({results}) {
  return (
    <div className="container">
      <Seo title="Home" />
      {!results && <h4>Loading..</h4>}
      {results?.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>
      ))}
    </div>
  );
}

export async function getServerSideProps() {
  const { results } = await (await fetch('https://localhost:3000/api/movies')).json();
  return {
    props: {
      results,
    },
  };
}

 

다시 말하지만 getServerSideProps는 server에서 실행될 것이다.

우리가 여기서 무엇을 return 하던지, 리턴한 값을 props로써 page에게 주게된다.

 

이제 원한다면 server side를 통해 props를 page로 보낼 수 있다.

그 이유가 바로 _app.js에서 pageProps라는 props가 필요한 이유이다.

 

우리가 홈페이지 (index.js)로 갈 때 next.js가 Home component를 받아서 render하기위해 _app.js의 Component 자리에 넣을 것이다.

이 후 next.js는 index.js에서 방금 작성해준 getServerSideProps 함수를 호출할 것이다.

해당 함수 안에서 api를 호출하고 결과값 (results)인 props를 반환할 것이다.

그리고 next.js는 props인 results 값을 _app.js의 pageProps 자리에 넣을 것이다.

결과로는 Home component에서 prop으로 적은 result로 받아올 것이다.

 

이렇게 server에서 데이터를 받아오면 pre- rendering으로 바로 data부터 받아오기때문에 loading이 일어나지 않는다.