getServerSideProps

Next.js에서는 페이지의 내용들을 다양한 방식으로 렌더링 할 수 있다.

그 중 getServerSideProps() 함수를 사용하면 해당 페이지에서 Server Side Rendering을 할 수 있다.

getServerSideProps

getServerSideProps()에 어떤 코드를 쓰던간에 그 코드는 sever에서 돌아간다.

(기존 리액트는 특별한 조치가 없다면 client side rendering)

import React from "react";
import axios from "axios";
import Seo from "../components/Seo";

//getServerSideProps()함수가 리턴하는 props.results가 ./pages/_app.js 를 통해 Home컴포넌트의 props로 전달
export default function Home({ results }) {
  return (
    <>
         ..(생략)..
        {results.map((movie) => {
          return (
            <div className="movie" key={movie.id}>
              <img src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`} />
              <h4>{movie.original_title}</h4>
            </div>
          );
        })}
     </>
  );
}


export async function getServerSideProps() {

  const response = await axios.get(`http://localhost:3000/api/movies`);
  const results = await response.data.results;
  return {
    props: {
      results,
    },
  };
}

위와 같이 작성하면 로딩인디케이터가 필요하지 않게 된다.

서버에서 api요청을 완료한 후, html파일로 pre-render하기 때문이다.

 

즉 getServerSideProps() 함수를 사용하면 해당 페이지의 초기 html이 생성되도록 선택적으로 server-side-rendering을 할 수 있게 된다.

 

1. api요청이 서버에서 일어나고

2.서버에서 api응답을 받은 후

3. html이 pre-render된다.

( * react에서는 api응답을 받기 전까지 로딩인디케이터를 보여주었다. )

 

즉 api요청이 완료되기 전까지는 어떤 화면도 보이지 않을 것이다.

 

때문에 빈번한 업데이트, SEO가 굳이 필요하지 않을때, 데이터를 미리 렌더링할 필요가 없을 때는 getServerSideProps() 함수를 굳이 사용할 필요가 없다. 

공식문서에서는 데이터를 미리 렌더링 할 필요가 없다면 클라이언트에서 데이터를 가져오는것을 고려하라고 말하고 있다.

 

대신에 일부 정적 컴포넌트들(header, footer등)을 pre-render하고 클라이언트 측에서 데이터 패치 전까지 로딩인디케이터를 보여주는 것이 좋을 것 같다.

 

If your page contains frequently updating data, and you don’t need to pre-render the data, you can fetch the data on the client side

Next 공식문서

---

getServerSideProps()의 리턴값은 어떻게 컴포넌트로 전달되나

pages/_app.js를 살펴보자.

import Layout from "../components/Layout";

export default function App({ Component, pageProps }) {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  );
}

./pages/_app.js 내부의 App 컴포넌트의 프롭스에 Componet와 pageProps가 있다.

 

1. App컴포넌트의 프롭스인 Component에 Home 컴포넌트가 할당되어 렌더링된다.

2. Home컴포넌트 내부에 있는 getServerSideProps의 리턴값이 App컴포넌트의 프롭스인 pageProps에 할당된다.

 

아마 이해가 안갈테니 사진의 화살표를 보는게 나을것같다..

getServerSideProps()를 통한 props 전달 방식은 리액트에서의 props 전달과는 다른 next.js 만의 방식이다.

 

 

---

참고자료 

https://velog.io/@devstone/Next.js-100-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-feat.-initialProps-webpack-storybook#1-3-pre-rendering-%EC%96%B4%EB%96%A8-%EB%95%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EC%A7%80

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