[NextJS] NextJS 시작하기 - 6. Server-Side Rendering 설정하기 (getServerSideProps)

1. Server-Side Rendering 특징

• 유저에게 보여주기 위한 모든 UI를 서버가 준비하는 것이다.
• 서버는 필요한 모든 데이터를 받아 HTML 안에 넣어 클라이언트에게 전달한다.
• 즉, 클라이언트는 온전한 HTML(데이터 포함)을 받아 유저에게 화면을 보여준다.
• 이렇게 HTML에 모든 정보가 포함되어 있어 SSR은 SEO에 좋다.

 

ex. SSR에서 API fetch를 하는 경우

서버에서 API에 대한 작업(호출->응답)이 완료되었을 때 페이지가 렌더링된다.

이때 유저는 로딩화면을 보지 않고 바로 데이터가 포함된 화면을 볼 수 있다.

단, API 응답이 느린 경우 유저는 아무것도 없는 빈 화면을 보게 된다.

 

 

2. getServerSideProps

Next가 React와 다른 가장 큰 차이점은 SSR를 선택할 수 있다는 것이다. 

각 페이지에 대해 개별적으로 SSR을 설정할 수 있다. 어떻게 설정하는지 알아보자.

 

1. getServerSideProps 함수를 export하면 된다. (반드시 저 이름)
2. props라는 이름의 객체를 return한다.
   • 이 값은 _app.js 컴포넌트의 pageProps로 넘어가서
   • 현재 페이지의 props로 사용된다.

export function getServerSideProps() {
  const results = {
    name: "next",
    age: 2,
  }
  //whatever you want
  return {
    props: {
      results,
    },
  };
}

이 함수 내에서 작성되는 코드는 서버에서 동작하는 것으로 브라우저에서 확인할 수 없다.

-> 이 함수 내부에서 API를 fetch할 때는 서버 측 URL을 사용해야 한다.

-> 이 함수 내부에 API KEY를 넣으면 키가 노출되지 않는다.

 

 

기존 코드 전체

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

export default function Home() {
  const [movies, setMovies] = useState();
  useEffect(() => {
    (async () => {
      const { results } = await (await fetch(`api/movies`)).json();
      setMovies(results);
    })();
  }, []);
  
  return (
    <div className='container'>
      <Seo title='Home' />
      {!movies && <h4>Loading...</h4>}
      {movies?.map((movie) => (
        <div className='movie' key={movie.id}>
          <h4>{movie.original_title}</h4>
        </div>
      ))}
    </div>
  );
}

 

getServerSideProps 적용 코드 전체

• 컴포넌트에 results가 props로 넘어온다.
• 컴포넌트 내부에 API 호출 부분이 필요없다.
• 컴포넌트 내부에 로딩 부분이 필요없다.

import Seo from '../components/Seo';

export default function Home({ results }) {
  return (
    <div className='container'>
      <Seo title='Home' />
      {results?.map((movie) => (
        <div className='movie' key={movie.id}>
          <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,
    },
  };
}

 

이렇게 only SSR로 페이지를 구성하고, 브라우저에서 HTML을 확인해보면 모든 데이터가 들어가 있는 것을 확인할 수 있다.