Rendering vs Pre-rendering

-	rendering	Pre-rendering
공통점	자바스크립트를 이용해 HTML 코드를 생성	〃
생성 시기	클라이언트에서 HTML 코드가 로드된 이후	클라이언트에서 HTML 코드가 로드되기 이전

---

렌더링의 종류

-	CSR	SSR	SSG	ISR
의미	Client-Side Rendering	Server-Side Rendering	Static-Site Generation	ncremental Static Regeneration
방식	브라우저에서 HTML 파일 로딩시 JS로 렌더링	브라우저에서 페이지에 접속하는 순간 서버에서 HTML을 렌더링해서 전달	페이지를 요청할 때마다 서버에서 렌더링. 단, 정적 페이지의 경우 빌드할 때 렌더링 하고 페이지 요청시 이미 렌더링 된 페이지를 반환	일정 주기마다 페이지를 빌드(컨텐츠가 업데이트 되면 제대로 된 정보를 보여줄 수 없는 SSG의 단점을 보완하고자 탄생)
빌드 시간	짧다	짧다	길다	길다
SEO	불리함	유리함	유리함	유리함
페이지 요청에 따른 응답 시간	보통	길다	짧다	짧다
최신 정보 여부	O	O	X	⃤

---

실습하기

HTML 생성 시기에 따라서 크게 Server-Side Rendering과 Static-Site generation으로 나뉜다.

-	Server-Side Rendering	Static-Site generation
렌더링 시기	Build	Runtime

SSR - getServerSideProps

pages/ssr/[id].js

const Post = ({ post }) => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      Post: {id}
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  );
};

export default Post;

export async function getServerSideProps(context) {
  const { params } = context;
  const { id } = params;

  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  );
  const post = await response.json();

  return {
    props: {
      post,
    }, // will be passed to the page component as props
  };
}

• getServerSideProps는 서버에서만 실행되고 브라우저에서는 실행되지 않음
• getServerSideProps는 런타임시에만 실행
• getServerSideProps는 context 객체를 통해 URL Query 파라미터에 접근
  (Post 페이지에서는 next router를 통해 접근)
• getServerSideProps의 return 값은 Post 페이지의 props로 전달

SSG

getStaticProps

getServerSideProps와 대부분 일치하나 context를 통해 UTL Query 파라미터에 접근할 수 없다는 차이점이 있다.

getStaticProps

어떤 paths를 Static Site Generation 할 지 정해두는 역할로 getStaticProps에서 dynamic routes를 제공하기 위해 사용한다. 그러므로 getStaticPaths을 사용하기 위해선 getStaticProps가 선행되어야 한다.

pages/posts/[id].js

// Generates `/posts/1` and `/posts/2`
export async function getStaticPaths() {
  return {
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    fallback: false, // can also be true or 'blocking'
  }
}

// `getStaticPaths` requires using `getStaticProps`
export async function getStaticProps(context) {
  return {
    // Passed to the page component as props
    props: { post: {} },
  }
}

export default function Post({ post }) {
  // Render post...
}

getStaticPaths의 return값은 getStaticProps의 props로 전달된다.

fallback

-	false	true	blocking
getStaticPaths에서 제공하지 않는 페이지 요청시	404로 연결	fallback으로 설정한 페이지 반환 ➡️ 해당 페이지를 서버에서 생성 ➡️ 해당 페이지 반환	페이지를 서버에서 생성한 이후 반환

ISR

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },

    revalidate: 10,
  }
}

getStaticProps에 revalidate 속성을 추가한 것. 조건의 개념으로 예제에서는 페이지에 요청이 들어오고나서 10초 후에 다시 한 번 페이지를 빌드한다.