Next) SSG, ISR과 예시 코드

Next는 브라우저에서 기본적으로 pre-rendering(사전 렌더링)을 한다.

=> pre-rendering은 Server에서 DOM 요소들을 Build 하여 HTML 문서를 렌더링 하는 것을 말한다.

SSG

• SSG는 Static Site Generation
• 빌드 시 html에 데이터를 미리 담아서 파일을 만들고 접속하는 유저들에게 보여주는 방식

장점

• 이미 만들어진 html를 여러 사람들에게 보여주는 것
• 서버 부담이 적고
• 응답 시간이 빠름
• 보통 마케팅 페이지, 블로그 글 등 한번 만들고 변화가 적은 페이지에 적합함

단점

• 데이터가 바뀌면 다시 빌드해줘야 함
• 동적 컨텐츠를 사용하면 SSG는 좋지 않음

SSR이나 CSR을 사용하면 되는 거 아님?

-SSR

서버 부하가 높아짐

 

-CSR

초기 로딩 느림

seo 최적화가 안됨

SSR과 SSG의 차이

• SSR은 요청이 들어왔을 때 서버 측에서 렌더링이 발생
• SSG는 개발자가 개발을 완료하고 build하는 순간에 렌더링이 발생
• 따라서 데이터 변화가 적은 사이트에서는 SSG가 적합

SSG는 내용을 수정하기 힘들다는 단점이 있지만, SSR보다 빠르게 페이지를 가지고 올 수 있다.

ISR

• SSG 장점은 살리면서 최신 데이터를 반영할 수 있는 방법이 ISR
• ISR은 Incremental Static Regeneration이며 점진적으로 정적 페이지를 다시 생성한다는 의미
• 빌드 시 html에 데이터를 담는 것은 SSG와 동일하지만, 일정 시간이 지나면 페이지를 새로 생성(최신 데이터로 업데이트)

---

코드 예시

CSR

import React, { useEffect, useState } from "react";

export default function Csr() {
  const [users, setUsers] = useState<{ id: number; name: string }[]>([]);
  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/users");
      const users = await res.json();
      setUsers(users);
    };
    fetchData();
  }, []);

  return (
    <div>
      <h1>Client Side Rendering</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

 

• 그냥 React 코드처럼 해주면 됨

SSR

import React from "react";

interface Props {
  users: { id: number; name: string }[];
}
function Ssr({ users }: Props) {
  return (
    <div>
      <h1>Server Side Rendering</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await res.json();

  return {
    props: {
      users,
    },
  };
}

export default Ssr;

• next에서 SSR을 사용하려면 getServerSideProps를 사용하면 됨

SSG

import React from "react";
import { useRouter } from "next/router";

interface Props {
  users: { id: number; name: string }[];
}
function Ssg({ users }: Props) {
  const router = useRouter();

  if (router.isFallback) {
    <h1>Data is loading</h1>;
  }

  return (
    <div>
      <h1>Static Side Rendering</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await res.json();

  return {
    props: {
      users,
    },
  };
}

export default Ssg;

• SSR은 getStaticProps를 사용하면 됨
• 그러면 빌드 시 미리 html을 만들어준다.

ISR

import React from "react";
import { useRouter } from "next/router";

interface Props {
  users: { id: number; name: string }[];
}
function Isr({ users }: Props) {
  const router = useRouter();

  if (router.isFallback) {
    <h1>Data is loading</h1>;
  }

  return (
    <div>
      <h1>Incremental Static Rendering</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await res.json();

  return {
    props: {
      users,
    },
    revalidate: 60,
  };
}

export default Isr;

• ISR은 getStaticProps에 revalidate를 추가하면 됨
• revalidate에 적어주는 숫자는 초를 의미함
• 코드에서는 60을 적었기에 60초 뒤에 이 페이지는 자동으로 재생산

빌드 및 실행

빌드

npm run build

빌드가 된 결과 화면이다.

실행

-CSR

깜빡임이 있다.

 

-SSR

 

깜빡임이 없다.

-데이터가 바꼈을 때

• CSR, 깜빡임이 있고 최신 데이터 적용
• SSR, 깜빡임 없이 최신 데이터 적용
• SSG, 최신 데이터 적용이 안됨
• ISR, 처음엔 최신 데이터 적용 안됨 -> revalidate 설정 시간 후 최신 데이터 적용됨

-출처

https://www.youtube.com/watch?v=khcRPut9DMA