Next) SSG, ISR과 예시 코드

리액트

Next) SSG, ISR과 예시 코드

5_hyun 2024. 1. 21. 23:05

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;