코드
import { useEffect, useState } from "react";
import Seo from "./Seo"
export default function Home({results}) {
return (
<div className="container">
<Seo title='Home' />
{}
{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() {
const {results} = await (await fetch('http://localhost:3000/api/movies')).json();
return {
props: {
results,
}
}
}
import Layout from "../components/Layout";
import '../styles/globals.css'
export default function App({Component, pageProps}) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
getServerSideProps
- 데이터가 유효할 때 화면이 보여지는 게 좋은지(server side rendering), Loading 화면을 보여준 뒤 데이터를 받는 게 좋은지 선택은 본인의 몫
- 함수 이름 절대 변경 불가!!! return에 있는 object의 props 이름도 절대 변경 불가!!!
- async가 필요하다면 async function 작성
- client에서는 /api/movies만 작성해도 됐지만 server에서는 전체 주소를 작성해줘야 함
- return object의 props에 있는 key value를 page의 props로 비구조할당으로 가져올 수 있음(변경된 변수는 모두 바꿔주기)
server side rendering과 client side rendering의 특징과 장단점