Data Fetching

Next.js에서 Data를 Fetching 하는 방식은 4가지 방식이 있다.
CSR (Client Side Rendering)
SSR (Server Side Rendering)
SSG (Static Site Generation)
ISR (Incremental Static Regeneration)

CSR

Next.js에서의 CSR은 결국 React의 useEffect를 사용해서 data를 fetch 해오는 방식이다.
예시 1

import { useEffect, useState } from 'react'
import styles from '../styles/Home.module.css'
import axios from 'axios';

export default function Home() {
  const [dateTime, setDateTime] = useState(null);

  useEffect(async () => {
    try {
      const response = await axios.get('<https://worldtimeapi.org/api/ip>');
      setDateTime(response.data.datetime);
    }
    catch (e) {
      console.error(e);
    }
  },[]);

  return (
    <div className={styles.container}>
      {dateTime || "불러오는 중 ..."}
    </div>
  )
}

이 웹을 동작시켜보면 처음에는 브라우저에 "불러오는 중..."이 뜨다가 api 호출로 response를 받은 후에는 현재 시간이 나타난다.
CSR 방식은 client side(여기서는 브라우저)에서 페이지가 요청될 때마다 받아온 js 파일로 api 호출을 한다.
데이터를 받는 과정은 클라이언트가 js 파일을 받은 후 진행되기 때문에 처음에는 데이터가 없는 상태로 "불러오는 중..."이 먼저 뜨게 된다.