렌더링 예시_Next.js

정적렌더링

• 데이터가 늦게 뜰때 로딩화면을 그려주기
  ex)

const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  
 const [list,setList] = useState({})
 const [isLoding,setIsLoding] = useState(true);

   const API_URL = 
    `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;

	const getData = () => {
  axios.get(API_URL)
  .then(res => {
     setList(res.data)
     setIsLoding(false)//로딩이 끝나면 false로 바꿔주게
    })
	}

useEffect(()=>{
  getData();
},[])

    useEffect(()=>{
        if(id && id>0){
      getData();
        }
    },[id])

return(
  {isLoding ? (
    <div>Loding...</div>
  ) : (
      <ItemList list={list}/>
  )}
  )

서버 사이드 렌더링(SSR)

const Post = ({list}) => {
  
  return (
        <>
    {list && <Item list={list}/>}
    </>
   )
  
  export default Post
  
 export const getServerSideProps = async context => {
    const id = context.params.id
    const apiUrl =  `http://makeup-api.herokuapp.com/api/v1/products/${id}.json`;
    const res = await axios.get(apiUrl);
    const data = res.data

    return{
        props:{
            list: data,
        },
    }
}