[NextJS] Server Side Rendering

Server Side Rendering

only server side rendering을 할지 정할 수 있게 해주는 function.

우리가 reload를 할 때 nextjs가 이 페이지를 pre render 해주는 것을 알고 있는데 이게 초기 상태이다.

 

fetch나 server에서 일어나는 data 관련된 작업을 모두 한 다음 API가 모두 완료 됐을 때 페이지를 render 시킬 수 있게 할 수 있다.

 

헤더와 푸터를 두고 로딩을 보여주거나 vs 데이터를 받을때까지 화면을 하얀색으로 띄우고 바로 보여주거나 선택할 수 있다.

 

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

export default function Home({ results }) {
  // 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>} */}
      {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>
      ))}
      <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() {
  // 함수 이름 바꾸면 안 됨!
  // 여기에 쓰는 코드는 클라이언트에 보이지 않는다
  // rewrites에 말고 여기에 API_KEY를 써도 된다

  const { results } = await (await fetch(`http://localhost:3000/api/movies`)).json();
  return {
    props: {
      results,
    },
  };
}