[Next.js] Pre-rendering / getServerSideProps

 Next.js는 Pre-rendering을 제공한다

Pre-rendering 이란?? 

각 페이지에 대해 미리 HTML을 생성하고 생성된 각 HTML은 해당 페이지에 필요한 최소한의 JavaScript 코드와 연결하고 브라우저에서 페이지를 로드하면 해당 JavaScript 코드가 실행되는 것을 말한다. 

 

Next.js에는 static generation , server-side Rendering 두 가지의 pre-rendering이 있다. 

static generation : 빌드 시 HTML을 생성하는 사전 렌더링 방법 . 사전 렌더링 된 HTML은 각 요청에서 재사용된다.

server-side Rendering: 각 요청에 대해 HTML을 생성하는 사전 렌더링 방법이다

 

위 두 가지에 대해 설명이 되어있으니 어떨 때 사용하면 좋을지 좀 더 깊게 공부하고 싶다면 아래 페이지를 읽어보자

https://nextjs.org/learn/basics/data-fetching/two-forms

Learn | Next.js

 

 

getServerSideProps

(server-side Rendering의 방식)

데이터 요청할 때마다 html이 생성이 되기 때문에 데이터가 계속 바뀌는 페이지에서 사용한다. 

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

Data Fetching: getServerSideProps | Next.js

 

getServerSideProps  사용방법

// 이 안에서 어떤 코드를 쓰던 server에서 돌아가게 된다.
//  client가 아닌 server쪽에서만 작동하는것 -> 이걸 이용해 api키를 숨길수 있기도 하다

export async function getServerSideProps() {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
  return { props: { data } } 
}

 

 

 

아래 코드를 getServerSideProps를 사용해 바꿔보자

 

export default function Home() {
  const [movies, setMovies] = useState([]);
  useEffect(() => {
    (async () => {
      const { results } = await (await fetch(`/api/movie`)).json();
      setMovies(results);
      console.log(results);
    })();
  }, []);

  return (
    <div>
      {!movies && <h4>Loading...</h4>}
      {movies?.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 default function Home({ results }) {   // 아래 함수에서 내보낸 results를 props로 받는다 
  return (
    <div>
      {results?.map((movie) => (
        <div 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(`http://localhost:3000/api/movies`)).json();
  return {
    props: {
      results,
    },
  };
}

 

위 코드에서 getServerSideProps를 사용해서 바꾼 코드로 하게 되면

바뀌는 것 중 하나는 페이지 소스 보기를 하게 되면 달라진 코드양을 확인할수 있다.

이렇게 되면 검색엔진에서 좀 더 많은 정보들을 확인하고 검색 엔진 최적화(SEO)가 이뤄진다. 

 

 

[에러]TypeError: Only absolute URLs are supported

 

처음에 위에 있는 코드에서 그대로 가져와서 사용을 했는데

에러가 발생했다

 

'/api/movie' 는 프론트에서만 작동이 되기 때문에

앞에도 다 붙여줘야 하기 때문

 

`http://localhost:3000/api/movies`이렇게 고치고 다시 정상적으로 진행이 되었다.