next JS 강의 정리 - 1 (nextJS & data Fetching)

패스트컴퍼스 강의를 듣고 정리한 내용입니다.

public폴더 - /접근 가능 ex) src= '/varcel.svg'

SSR - server side render

: 서버작동( 터미널에 찍힘 ) 서버 부하를 일으킴

export async function getServerSideProps(){
  console.log('server');

  return {
    props: {time : new Date().toISOString()}
  }
}

CSR - client side render

: 클라이언트 작동( 개발자도구 콘솔에 찍힘)

const [time,setTime] = useState();

    useEffect(()=>{

        setTime(new Date().toISOString())
},[])

SSG - static site Generation

: 정적인 사이트 생성한다

• yarn build 시 생성한다 , 새로고침 해도 시간변화 없음
• yarn dev로 바로 실행 시 SSR처럼 동작 꼭 yarn build 후 진행 (Generation 타이밍이 build 시점)
  ( * 생성한다 : 데이터를 가져와서 그려둔다 )
• 빌드 할 시점에 데이터를 가져와서 정적사이트를 생성해둠.
  (사용자 급증시 서버의 부하를 줄이기 위해 정적인 사이트에만 사용)

• getStaticProps : 일반 페이지

• getStaticPaths : [id].tsx 페이지 일땐 위 getStaticProps 랑 같이 사용. (같이 안쓰면 경고뜸)

  ex) 글이 유지되는 블로그 등에 사용

export async function getStaticProps(){
    console.log('server');

    return {
        props: {time : new Date().toISOString()}
    }
}

ISR - Incremental Static Regeneration

• SSG의 getStaticProps 를 같이 사용하나 revalidate를 추가로 써줘야함 (revalidate는 시간 딜레이를 줌)
• 특정 시간마다 업데이트를 해줘야 될 때 사용 -> SSR과 SSG가 revalidate를 사용해서 섞인 유형.

export async function getStaticProps(){
    console.log('server');

    return {
        props: {time : new Date().toISOString()},
        revalidate : 1,
    }
}