SSG
SSG(Static Site Generation)과 SSR(Server Side Rendering)은 Next.js의 상징이라고도 할 수 있다. 'Next.js를 써본 것 = SSR을 해본 것'이라고 생각한다는 분이 계신다는 얘기도 들었다(!). 하지만 Next.js에서 기본으로 제공하는 것은 SSG이다.
SSG란?
SSG는 간단하게 이야기하면 build 타임 때 미리 React 컴포넌트를 HTML 파일로 렌더링 해놓는 것이다. 이렇게만 들으면 그게 HTML 파일을 만들어 놓는 것과 크게 다른건지 의문이 생길 수 있다. Next.js의 강력한 기능은 바로 정적 페이지 생성 시 외부 데이터 fetching이 가능하다는 점이다! 이는 `getStaticProps`라는 간단한 함수를 이용하여 구현할 수 있다.
getStaticProps 동작 원리
getStaticProps를 이용하면 Next.js는 빌드 타임 때 해당 데이터를 미리 fetch해야 한다는 것을 인식하고 시행한다. 그후 Next.js는 fetch된 데이터를 json 파일로 생성한다. 그후 HTML 파일로 만들 때 해당 데이터를 사용한다.
getStaticProps 사용법
사용법은 아주 간단하다. 그냥 SSG할 페이지 컴포넌트 파일에 `getStaticProps` 함수를 async 함수로 export하면 된다.
// ./pages/index.js
import Head from "next/head";
import Link from "next/link";
import { getSortedPostsData } from "../lib/posts";
import styles from "../styles/Home.module.css";
export async function getStaticProps() {
const allPostsData = getSortedPostsData();
return {
props: {
allPostsData,
},
};
}
export default function Home({ allPostsData }) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
// ...생략
이런 간단한 방법으로 SSG를 구현할 수 있다. 이때 getStaticProps가 return한 값은 Home 컴포넌트에 props로 전달되기 때문에 그냥 사용하면 된다!
SSR
Next.js는 Server Side Rendering로 유명하지만, 사실 Next.js의 공식문서에서는 되도록 SSG를 사용하기를 권장하고 있다. 이유는 당연하게도 SSG가 훨씬 빠르기 때문이다. SSR은 유저의 요청마다 렌더링 후 페이지를 보내줘야 하지만, SSG는 가장 가까운 CDN 서버 캐시에서 그냥 페이지를 받아오기만 하면 된다. 즉, 유저의 요청마다 다른 정보를 보여주는게 아니라면 (실시간 데이터를 보여주는 사이트 등) SSG를 사용하는 것이 유리하다.
CSR이 필요한 경우
보안 등의 이유로 SEO가 필요없는 경우나 유저 맞춤 정보(로그인이 필요한 경우 등)를 제공하는 경우 등에는 CSR이 권장된다. 이 경우 Next.js는 데이터 fetching이 필요없는 부분은 정적 사이트로 빌드하고 데이터가 필요한 부분은 JS가 load된 후 렌더링 되기 때문에 유저는 첫화면으로 빈화면이 아닌 사전 렌더링된 정적 페이지를 볼 수 있다.
'Dev > JS Family, HTML, CSS' 카테고리의 다른 글
Nextjs 공식문서로 공부하기 - 동적 라우팅 (0) | 2023.03.05 |
---|---|
NextJS 공식문서로 공부하기 - 블로그 만들기 (1) | 2023.02.19 |
NextJS 공식문서로 공부하기 - Next.js 동작 원리 (0) | 2023.02.14 |
JSDoc 페이지를 GitHub Page로 배포하기 (1) | 2023.02.03 |
[TypeScript] 타입스크립트 입문(6) - JSDoc, 유틸리티 타입, 모듈, 타입선언, 네임스페이스 (0) | 2022.09.22 |