[Next.js] (3) SSR, SSG

SSR(Server Side Rendering)과 SSG(Static Site Generation)

두 가지 방법을 사용하여 fetch를 진행 할 수 있기 때문에 Next.js에서 매우 중요한 부분이라고 할 수 있습니다.

---

SSR(Server Side Rendering)

import Header from "../components/Header";

export default function Home({ posts }) {
  console.table(posts);
  return (
    <div>
      <Header></Header>
      <h1>Welcome to My Blog</h1>
      <ul>
        {posts.map((post) => {
          return <li key={post.id}>{post.title}</li>;
        })}
      </ul>
    </div>
  );
}

export const getServerSideProps = async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`
  );
  const posts = await res.json(); // res를 json으로 변환하여 posts에 담는다.

  return {
    props: {
      posts: posts,
    },
  };
};

• getServerSideProps 함수 생성
• JSONPlaceholder(무료 api 제공 사이트)에서 임의의 API를 선정하여 가져옴

  JSONPlaceholder - Free Fake REST API

• fetch를 사용하여 해당 API를 호출하여 데이터를 받아옴
  (fetch는 axios 같이 서버에 데이터를 요청 할 때 사용하는 API이다.)
• 받아온 데이터는 .json을 사용하여 JSON 파일로 변환하여 return 함.

위와 같은 과정을 거치고 console.table()로 출력 해보면 아래와 같이 출력 되는 걸 볼 수 있다.

getServerSideProps를 사용하면 서버에 요청을 보내고, 데이터를 받아와 프론트엔드에서는 출력만 해주기 때문에 Server Side Rendering을 사용 할 수 있다.

위처럼 SSR을 사용하면 사용자가 index.js에 접속 할 때마다 매번 서버에 요청을 보내고, 데이터를 받아와 즉각적으로 사용자에게 화면을 보여 줄 수 있게 된다.

---

SSG(Static Site Generation)

getStaticProps(SSG)를 사용하면 Static Generation이 일어나게 됩니다.

export const getStaticProps = async () => {
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts?_start=0&_end=10`
  );
  const posts = await res.json(); // res를 json으로 변환하여 posts에 담는다.

  return {
    props: {
      posts: posts,
    },
  };
};

getServerSideProps(SSR)는 서버에서 데이터가 바뀌었을 때 즉각적으로 변경사항이 반영 되기 때문에 빈번한 데이터의 변화가 일어날 경우에 사용하는 것이 바람직하지만

 

Next.js에서는 getStaticProps(SSG)는 추천하고 있습니다. getStaticProps를 사용하면 사용하고 있는 api에 변경사항이 생기더라도 SSG처럼 즉각적으로 변경사항이 반영 되지 않습니다. 왜냐하면 build 시 이미 조회된 데이터를 저장하고 있기 때문에 api에서 데이터 변경이 발생 하더라도 그것을 사용하는 것이 아니라 이미 저장된 데이터를 사용합니다.

 

그렇다면 SSG를 사용하면 변경된 데이터는 사용하지 못하는 것 아닌가??라는 의문이 생깁니다.

이를 해결하기 위해서는 incremental Static Regeneration(ISR)을 사용하면 됩니다.

페이지에 즉각적으로 변경이 일어나지 않아도 되는 경우에는 SSG와 ISR을 사용하여 미리 데이터까지 들어가 있는 HTML을 만들어 놓고 해당 HTML을 사용자에게 보여줌으로써 상당히 빠른 로딩 속도와 처리 속도를 보여 줄 수 있을 뿐만 아니라 설정된 값에 따라서 regeneration을 일으켜 주면 데이터의 동기화 부분도 챙길 수 있습니다.

(build를 할 때마다 페이지를 새롭게 갱신 됩니다.)

 

❓ Incremental Static Regeneration(ISR)이란?

Next.js Incremental Static Regeneration 알게 된것! Revalidate = timeout

---

즉, SSR은 사용자가 사이트에 접속 할 때마다 서버에 요청을 보내고, 받아온 데이터를 화면에 출력 해주는 방식이고,

SSG는 build 시 파일을 생성하여서 바로바로 접근 할 수 있는 데, 접근 시에 데이터 조회가 일어나는 게 아니라
파일 생성 시 조회된 데이터를 저장하고 있다가 그 데이터를 보여주는 방식이다.

이때 ISR을 사용하여 일정 시간 후에 변경사항을 반영 할 수 있다.

---