[내보내번] Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR)

내보내번(내가 보려고 내가 번역한...) 아티클 

※ 영어 전공자도 해외 유학파도 아니기에 번역에는 의역, 오역, 구글 번역이 무수히 많을 수 있으며, 개인적인 공부 목적으로 번역하다 보니 오타도 많을 수 있다. 정확한 내용은 해당 아티클을 직접 살펴보거나 다른 정보들을 더 찾아보는 것을 추천한다.

(하지만 댓글 피드백도 환영합니다😃 글을 읽어보시고 도움을 얻으셨다면 아티클 저자의 블로그에서 좋아요도 눌러주세요.)

Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) by Theodorus Clarence 원문 읽기 >>

Understanding Next.js Data Fetching (CSR, SSR, SSG, ISR) | theodorusclarence.com

 

👀 이 아티클을 번역하게 된 이유

사이드 프로젝트를 진행하면서 내가 자체적으로 만든 API가 있고 그 API에서 데이터를 가져와서 사용자에게 보여주어야 하는 화면이 있었다. 매번 데이터가 동일하게 보여지면 재미가 없으니 들어올 때마다 빠르게 로드가 되면서도 랜덤하게 보여지기를 원했고 크롬 Lighthouse의 점수도 어떻게든 높여보려고 혈안이 되어있었다. 그래서 Next.js Data Fetching 문서를 보며 이것저것 시도해봤던 기억이 난다. 명확하게 SSR, SSG, ISR을 이해하지 못한 상태에서 괜히 revalidate를 추가해서 숫자도 바꿔보고 다른 옵션도 넣어보고 그랬었는데... 우선 문제는 해결하고 난 뒤 한참 뒤에 제대로 짚고 넘어가면 좋지않을까 하는 생각에 여러 아티클을 뒤져봤다. 그러다 눈에 띈 아티클이 현재 번역하려고 하는 아티클이다. 살짝 훑어만 봤을 때부터 오! 굉장히 잘 정리된 느낌이다! 싶었지만 각잡고 읽어야한다는 생각에 한두달 미뤄두었다 이제야 번역해본다. 

[내보내번] Next.js docs - Data Fetching

---

Introduction 

When I started to learn Next.js, I got overwhelmed with the list of abbreviations that looks similar, I didn't know what it is and what is the difference. It is quite confusing because when using Create React App, we usually only use 1 strategy to fetch data from API which is using useEffect.

내가 처음으로 Next.js를 배우기 시작했을 때 뭔가 비슷해보이는 약어들의 목록을 보고 당황스러웠다. 그게 뭔지도 모르고 차이점도 몰랐었다. 꽤 헷갈렸는데 Create React App을 사용할 때 대개 한 가지 전략, useEffect를 사용하여 API로부터 데이터를 가져오기 때문이다. 

Next.js has many data fetching strategies. Although initially Next.js was well known to be a Server-Side Rendering Framework, it turns out that Next.js has 4 methods of Data Fetching. Here is the short explanation each so you get familiar with the abbreviation of CSR, SSR, SSG, ISR.

Next.js는 데이터를 가져오는 여러 전력들이 있다. Next.js가 처음에는 서버 사이드 렌더링 프레임워크로 잘 알려지긴 했지만, Next.js는 데이터를 가져오는 4가지 방법이 있게 되었다. 이제 여러분이 CSR, SSR, SSG, ISR이라는 약어에 익숙해지도록 짧게 설명을 진행하겠다. 

• CSR - Client-Side Rendering, this is the usual kind of data fetching using useEffect, it will fetch the data from the API every single page request on the client-side (after the page is rendered, then the function will run).
• SSR - Server-Side Rendering, will run a special function to fetch data from API every page request on the server-side (before the page is loaded, that special function will run first, creating a delay, then after that, it will serve the page).
• SSG - Static Site Generation, will run a special function to fetch data once when that page builds.
• ISR – Incremental Static Regeneration, this is a new thing, shortly put, a combination of SSG, and SSR, where it served statically, but at a certain time and certain condition that page will rebuild and fetch the data from the API again.
  
  
• CSR - Client-Side Rendering, 이것은 useEffect를 사용하여 데이터를 가져오는 것과 같은 종류의 방법으로, 클라이언트 측에서  매 싱글 페이지 요청마다 API로부터 데이터를 가져온다. (페이지가 렌더되고 난 후, 함수가 동작한다.)
• SSR - Server-Side Rendering, 서버 측에서 매 페이지 호출마다 특별한 함수를 동작시켜 API로부터 데이터를 가져온다. (페이지가 로드되기 전에, 그 특별한 함수가 먼저 동작하고 딜레이를 만들고 그 후에 페이지를 가져온다.) 
• SSG - Static Site Generation, 페이지가 빌드될 때 특별한 함수를 동작시켜 데이터를 가져온다. 
• ISR - Incremental Static Regeneration, 새로운 방법인데 짧게 설명하자면 SSG와 SSR의 결합으로 정적으로 제공하던 곳에서 특정 시간과 특정 조건에 해당 페이지가 재빌드되고 API에서 데이터를 다시 가져온다. 

Don't worry if you didn't get that, because I will be explaining it thoroughly, just familiarize the words first.

철저히 설명을 해줄테니 이해가 안된다해도 걱정 말라, 먼저 단어에 익숙해지도록 하자. 

---

I mentioned before that there is a special function that will run when using a specific data fetching method. Keep that in mind as I will show you what is that special function.

앞서 언급했던 것처럼 특정 데이터 가져오기 메서드를 사용할 때 동작하는 특별한 함수가 있다. 그 특별한 함수가 무엇인지 보여줄테니 참고하라. 

This code example will fetch a date-time from an API using axios, then render it on the page. It is useful to see the date-time so we can truly know when the API is hit.

여기의 코드 예시는 axios를 사용해서 API로부터 날짜와 시간을 가져오고 페이지에 렌더한다. 날짜와 시간을 보는 것이 유용한 것은 API에 언제 접근되는지 알 수 있기 때문이다. 

 

Client-Side Rendering (CSR)

Special Function: `useEffect`

Demo Site

Code Example

export default function CSRPage() {
  const [dateTime, setDateTime] = React.useState<string>();

  React.useEffect(() => {
    axios
      .get('https://worldtimeapi.org/api/ip')
      .then((res) => {
        setDateTime(res.data.datetime);
      })
      .catch((error) => console.error(error));
  }, []);

  return (
    <main>
      <TimeSection dateTime={dateTime} />
    </main>
  );
}

Demo

https://theodorusclarence.com/blog/nextjs-fetch-method#client-side-rendering-csr

Terms:

• PT → Preview Time, the time shown when the API is hit. Can be seen in the middle.
• RT → Real-Time, the real ticking time updating every second, can be seen on the right bottom corner
• PT → 미리보기 시간, API에 접근했을 때의 시간. 중간에 보여짐. 
• RT → 실제 시간, 매초 업데이트되는 실제 시간으로 우측 하단 코너에 보여짐.

Video Description:

1. Page reloads on 15:46:03 Real-Time (RT), then a LOADING indicator is shown
2. After about 1s, Preview Time is showing 15:46:04(PT)
   
   
3. 15:46:03 실제 시간(RT)에 페이지가 재로드되고 LOADING 표시가 보여짐
4. 1초 쯤 후에 미리보기 시간 15:46:04(PT)가 보여짐

Keys to Emphasize

1. useEffect function, this function is the key indicator that a page is using Client-Side Rendering.
2. LOADING indicator, because the data fetching runs after the page is rendered, the data is not fetched instantly, therefore showing a loading state.
3. Data is fetched on every page request, which is why the time shown is different for each reloads.
   
   
4. useEffect 함수, 이 함수는 페이지가 Client-Side Rending을 사용하고 있다는 핵심 요소이다.
5. LOADING 표시, 데이터 가져오기가 페이지가 렌더된 후 실행되기 때문에, 데이터는 즉시 패칭되는 것이 아니고 따라서 로딩 상태가 보여진다. 
6. 데이터는 매 페이지 요청마다 패치된다, 그렇기 때문에 각 재로드 마다 다른 시간이 보여진다. 

https://theodorusclarence.com/blog/nextjs-fetch-method#client-side-rendering-csr

---

Server Side Rendering (SSR)

Special Function: `getServerSideProps`

Demo Site

Code Example

export default function SSRPage({ dateTime }: SSRPageProps) {
  return (
    <main>
      <TimeSection dateTime={dateTime} />
    </main>
  );
}

export const getServerSideProps: GetServerSideProps = async () => {
  const res = await axios.get('https://worldtimeapi.org/api/ip');

  return {
    props: { dateTime: res.data.datetime },
  };
};

Demo

https://theodorusclarence.com/blog/nextjs-fetch-method#server-side-rendering-ssr

 

Video Description:

1. Clicked the link on 16:32:38(RT), a slight pause for 2s, then page loads showing 16:02:40(PT)

1. 16:02:38(RT)*에 링크를 클릭했고, 약 2초 정도의 멈춤 후에, 16:02:40(PT) 보이는 페이지가 로드된다. 
   (* 원문에 16:32:38이 오타인 것 같아서 번역시 16:02:38로 수정함.)

Keys to Emphasize

1. getServerSideProps function, this function is the key indicator that a page is using Server-Side Rendering.
2. DELAY before render, and no LOADING indicator, the data is fetched before the page is rendered, so there will be a slight delay where the API is being hit at the moment, then it will show the page without loading indicator
3. Data is fetched on every page request, which is why the time shown is different for each reloads.
   
   
4. getServerSideProps 함수, 이 함수는 페이지가 Server-Side Rending을 사용한다는 핵심 요소이다. 
5. 렌더 전 딜레이, 그리고 LOADING 표시가 없음, 데이터는 페이지가 렌더되기 전에 패치되고 그렇기 때문에 API가 접근하는 순간에 약간 딜레이가 발생한 후에 로딩 표시 없이 페이지에 보여진다. 
6. 데이터는 매 페이치 요청마다 패치된다, 이것이 각 재로드 마다 다른 시간이 보여지는 이유이다. 

https://theodorusclarence.com/blog/nextjs-fetch-method#server-side-rendering-ssr

---

CSR vs SSR

Here is the difference between CSR vs SSR, keep an eye on delay and loading indicators.

이제 CSR과 SSR 사이의 차이점에 대해 이야기하니 딜레이와 로딩 표시에 주의해보자. 

https://theodorusclarence.com/blog/nextjs-fetch-method#csr-vs-ssr

Video Description:

1. When clicking CSR, with no delay a LOADING text is visible for a second, then the Preview Time loads.
2. When clicking SSR, a slight delay happened, then the page loads.

1. CSR을 클릭하면 딜레이 없이 LOADING 텍스트가 잠깐 보여지고 Preview 시간이 로드된다. 
2. SSR을 클릭하면 약간의 딜레이 후에 페이지가 로드된다. 

Keys to Emphasize

1. CSR hit the API after the page loads.
2. SSR hit the API before the page loads.

1. CSR은 페이지 로드 후에 API에 접근한다. 
2. SSR은 페이지 로드 전에 API에 접근한다. 

https://theodorusclarence.com/blog/nextjs-fetch-method#csr-vs-ssr

Short addition

I will probably create a new post about the pros and cons of each method, but when using CSR the SEO is not really great because the data is only fetched after the page renders. This is useful and convenient when we are creating a page with a gated authentication, as you don't really need SEO for pages like the dashboard, edit profile page, etc.

아마도 각 메서드의 장단점에 대해 새로운 포스트를 작성할 것이긴 하지만 CSR을 사용할 때 SEO에는 그다지 좋지 않는데 왜냐하면 데이터가 페이지가 렌더된 후에만 가져와지기 때문이다. 이 방법은 대시보드나 프로필 수정 페이지와 같은 SEO가 별로 필요가 없는 게이트 인증이 있는 페이지를 생성할 때 유용하고 편리하다. 

But, for the SSR, although it creates a delay, data that was fetched is injected and helps SEO. This is quite useful for a thread or post that we need to get traffic into, like Reddit or some sort.

하지만 SSR에 대해서는 딜레이가 있기는 하지만 가져온 데이터가 주입되었고 SEO에도 도움이 된다. 이 방법은 Reddit이나 그와 비슷한 종류의 트래픽을 가져와야하는 스레드나 포스트에 유용하다. 

---

Static Site Generation (SSG)

Special function: `getStaticProps`

Demo Site

Code Example

export default function SSGPage({ dateTime }: SSGPageProps) {
  return (
    <main>
      <TimeSection dateTime={dateTime} />
    </main>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const res = await axios.get('https://worldtimeapi.org/api/ip');

  return {
    props: { dateTime: res.data.datetime },
  };
};

Demo

https://theodorusclarence.com/blog/nextjs-fetch-method#static-site-generation-ssg

Video Description:

1. Preview Time is showing 13:39:36(PT). But the real-time is 16:16:59(RT), about 3 hours late.
2. Reloading and going back and forth to the home page did not change anything.

1. 미리보기 시간은 13:39:36(PT)로 보여준다. 하지만 실제 시간은 16:16:59(RT)로 3시간 정도 늦다. 
2. 재로딩하고 앞뒤로 홈 화면으로 갔다 돌아왔다 해봐도 페이지는 아무것도 바뀌지 않는다. 

Keys to Emphasize

1. getStaticProps function, this function is the key indicator that a page is using Static Site Generation.
2. Fetched when running yarn build, the API will be hit ONLY when the application is building. This is why the time is at 13:39, while the real-time is 16:17.
3. Data will not change because no further fetch, which is why the time shown is the same for each reloads.

1. getStaticProps 함수, 이 함수는 페이지가 Static Site Generation을 사용하고 있다는 핵심 요소이다.
2. yarn build가 실행될 때 데이터를 가져옴, 애플리케이션이 빌드될 때에만 API에 접근한다. 이것이 실제 시간은 16:17인데도 13:39로 보여지는 이유이다. 
3. 추가 패치가 없기 때문에 데이터는 바뀌지 않는다, 그렇기 때문에 매번 재로드할 때마다 동일한 시간을 보여준다. 

https://theodorusclarence.com/blog/nextjs-fetch-method#static-site-generation-ssg

---

Incremental Static Regeneration

Special function: `getStaticProps` + `revalidate`

Demo Site

Code Example

export default function ISR20Page({ dateTime }: ISR20PageProps) {
  return (
    <main>
      <TimeSection dateTime={dateTime} />
    </main>
  );
}

export const getStaticProps: GetStaticProps = async () => {
  const res = await axios.get('https://worldtimeapi.org/api/ip');

  return {
    props: { dateTime: res.data.datetime },
    revalidate: 20,
  };
};

Demo

https://theodorusclarence.com/blog/nextjs-fetch-method#incremental-static-regeneration

Disclaimer: Revalidate time is set to 20 seconds.

주의: 갱신 시간은 20초로 설정되어 있음.

Video Description:

1. At first, it was 16:40:12(PT), and real-time when reloading is 16:40:25(RT) and 16:40:29(RT). In those 2 reload, Preview Time (PT) did not change.
2. Then, when 16:40:32(RT) (20s after initial), reload is done twice, the first time on 16:40:36(RT) and 16:40:40(RT). The Preview Time change to 16:40:37(PT) after the second reload.

1. 맨 처음 16:40:12(PT)였다. 그리고 재로딩될 때 실제 시간은 16:40:25(RT) 그리고 16:40:29(RT)이다. 이 2번의 재로드에서, 미리보기 시간 (PT)는 변하지 않는다.
2. 그리고, 16:40:32(PT)일 때 (처음으로부터 20초 후), 재로드를 2번 하였다. 첫 번째는 16:40:36(RT)에 그리고 16:40:40(RT)이었다. 미리보기 시간은 16:40:37(PT)로 두번째 재로드 후에 변경되었다. 

Keys to Emphasize

Now, this is might be confusing for you, but here is the key I want you to look at.

좀 헷갈릴 수도 있지만 여기에 독자들이 보았으면 하는 핵심이 있다. 

1. When in a 20-second cooldown span–16:40:12(RT) - 16:40:32(RT), reloading doesn't trigger changes. This is because the page is in a cooldown state, as we set on the revalidate key.
2. After the 20-second cooldown–16:40:32(RT), we did 2 reloads.
   1. First Reload at 16:40:36(RT), we know that it is not on the cooldown state anymore. The first visit after the cooldown state is off, is going to trigger page rebuild. Page rebuild meaning, only this certain page is going to be rebuild. Not the whole application. The fetch API will run in the background, but there will be no changes on the Preview Time
   2. Second Full Reload at 16:40:40(RT), the Preview Time change to 16:40:37(PT). Exactly a second after the page rebuild (which means the rebuild takes about 1s). This second reload is going to serve that rebuilt page from the previous reload.

1. 20초의 쿨다운 기간 때에–16:40:12(RT) - 16:40:32(RT), 재로드는 변경사항이 트리거되지 않는다. 이것은 우리가 revalidate 키를 설정해놓은대로 해당 페이지가 쿨다운 상태에 있기 때문이다.
2. 20초의 쿨다운 후에–16:40:32(RT), 2번의 재로드를 했다.
   1. 첫번째 재로드는 16:40:36(RT) 이었다. 이 시점은 더 이상 쿨다운 상태에 있지 않다는 것을 우리는 안다. 쿨다운 상태가 종료되고 난 후의 첫번째 방문은 페이지 재빌드를 트리거 한다. 페이지 재빌드의 의미는 해당되는 이 특정 페이지만 재빌드 된다는 것이다. 전체 애플리케이션이 재빌드 되는 것이 아니다. 패치 API는 백그라운드에서 동작하지만 미리보기 시간에는 변화가 없을 것이다. 
   2. 두번째 새로고침(*아래의 용어 설명이 나옴)는 16:40:40(RT)이다. 미리보기 시간은 16:40:37(PT)로 바뀌었다. 페이지 재빌드되고 정말 잠깐 후에 말이다. (이것은 재빌드하는데 약 1초 정도 걸린다는 뜻이다.) 이 두번째 재로드는 이전 재로드로부터 재빌드된 페이지를 보여줄 것이다. 

https://theodorusclarence.com/blog/nextjs-fetch-method#incremental-static-regeneration

https://theodorusclarence.com/blog/nextjs-fetch-method#incremental-static-regeneration

Revisiting Page vs Full Reload

https://theodorusclarence.com/blog/nextjs-fetch-method#revisiting-page-vs-full-reload

 

 

Terms:

1. Revisiting pages → navigating using next/link (going back to home, then to that page again)
2. Full reload → doing reload at a website (command+r)

1. 페이지 재방문 → next/link를 사용하여 이동하는 것 (홈으로 돌아갔다가 해당 페이지로 다시 오는 것)
2. 새로고침 → 웹사이트에서 새로고침/재로드하는 것 (command+r)

Video Description:

1. Revisiting pages at the first time 18:38:45(RT), will trigger rebuild, but after the second revisit, the Preview Time did not change.
2. After a full reload, then Preview Time is changed to 18:38:45(PT)

1. 18:38:45(RT)에 처음으로 페이지를 재방문 하는 것은, 재빌드를 트리거할 것이지만, 두 번째 재방문 후에 미리보기 시간은 변하지 않았다. 
2. 새로고침후에는, 미리보기 시간이 18:38:45(PT)로 바뀌었다.

Note:

1. The first reload does not have to be a full reload, we can go back to the home page, then to that page again (revisit), it will trigger the rebuild as long as we are not in the cooldown state.
2. But, the second reload must be a full reload. Going back to the home page, then to the page again won't change the new Preview Time.

1. 첫번째 재로드는 풀 재로드일 필요는 없다. 홈 화면으로 돌아갔다가 해당 페이지로 다시 돌아와도 된다(재방문). 이렇게 하는 것은 쿨다운 상태가 아닌 한 재빌드를 트리거할 것이다. 
2. 하지만, 두번째 재로드는 반드시 새로고침이어야만 한다. 홈 화면으로 돌아갔다가 해당 페이지로 다시 돌아오는 것은 새로운 미리보기 시간으로 바꾸지 않을 것이다. 

Now, this is a case where we are assuming that only 1 person is accessing the website. But, that reloads will happen every person visit while still respecting the cooldown state.

이것은 우리가 단 한 명만이 이 웹사이트에 접근한다고 가정했을 때이다. 그런데 이 재로드는 쿨다운 상태를 유지하면서 방문하는 모든 사람에게 발생한다. 

Is it going to be rebuilt every 20s then? 

그럼 매 20초마다 재빌드가 이루어지는가?

Nope.

그렇지 않다.

When the cooldown is off, if no one visits the page, then that page will not rebuild, even after long past the 20s.

쿨다운이 종료되고 아무도 페이지를 방문하지 않으면 페이지는 20초가 지난 후에도 재빌드 되지 않을 것이다. 

But, the first person that visits when the cooldown state is off, is going to trigger a rebuild. That person won't be seeing changes. But, the changes will be served for the next full reload.

하지만 첫 번째 사람이 쿨다운 상태가 종료되었을 때 방문하면 재빌드는 트리거 될 것이다. 그 사람은 바뀐 내용을 보지 못할 것이다. 하지만 해당 변화는 다음 새로고침 때에 보여질 것이다. 

https://theodorusclarence.com/blog/nextjs-fetch-method#revisiting-page-vs-full-reload

Conclusion

That's all, folks!

If you have understood this material, I suggest you to read more about How to choose between them. I provide 4 metrics for you to consider and some example!

이 글을 이해했다면, How to choose between them에 대해 더 읽어보기 바란다. 당신이 고려해야할 4가지 측정 항목과 몇 가지 예제도 제공한다. 

---

(글이 유익하셨으면 아티클 저자의 블로그에서 좋아요도 눌러주세요😃👍)

다음 아티클 How to choose between them 확인하러가기👇

[내보내번] How to choose between Next.js CSR, SSR, SSG, and ISR