[ Next.js ] Static Site Generation vs Server Side Rendering

원문

---

Static Site Generation (SSG) 란?

서버에 배포하기 전에 빌드하는 단계에서 HTML 페이지를 생성하는 것을 말한다.

SSG 장점

• 페이지 로드 시간이 빠르다.
• 향상된 Search Ending Optimization (SEO)
• 서버에서 생성될 필요가 없기 때문에 비용적인 면에서 효율적이다.

Next.js 로 SSG 구현하기/실행하기 => getStaticProps 사용하기

빌드 단계에서 반환된 prop로 미리 페이지를 렌더하는 기술을 말한다.

사전에 data fetching 과 page content generation이 진행돼 정적 파일로 보관되어 유저가 request를 하자마자 제공할 수 있다.

export default function Home({ data }) {
 return (
   <main>
     {data.map((car) => (
       <div key={car.id}>
         <p>{car.name}</p>
         <p>{car.type}</p>
         <img src={car.image} alt="car" />
       </div>
     ))}
   </main>
 );
}
export const getStaticProps = async () => {
 const { data } = await Supabase.from("cars").select();
 return {
   props: {
     data: data,
   },
 };
};

Server-Side Rendering 이란?

브라우저로 완전히 렌더된 페이지가 전달되기 이전에 서버에서 HTML을 생성하는 것을 말한다.

SSR 장점

• CSR 에 비해 향상된 SEO : CSR은 크롤러가 HTML content 에 접근하려면 이전에 JS 코드를 실행해야 한다.
• 빠른 로딩 시간 : 클라이언트에서 JS가 로드되기 까지의 대기 시간을 없애준다.
• 보안: 데이터가 클라이언트에 노출될 일이 없기 때문에 간섭하거나 가로챌 수 없다.

Next.js로 SSR 구현/실행하기 => getServerSideProps 사용하기

export default function Home({ data }) {
 return (
   <main>
     {data.map((car) => (
       <div key={car.id}>
         <p>{car.name}</p>
         <p>{car.type}</p>
         <img src={car.image} alt="car" />
       </div>
     ))}
   </main>
 );

}
export const getServerSideProps = async () => {
 const { data } = await Supabase.from("cars").select();
 return {
   props: {
     data: data,
   },
 };
};

SSG vs SSR ?

SSG 가 SSR 에 비해 로딩 속도가 조금 더 빠르다.

When to use SSG & SSR

정적 데이터가 많고 트래픽이 높다면 SSG가 더 적합하다.

반면에, 내용이 자주 바뀌면서 SEO가 향상되길 바란다면 SSR이 적합하다.

하지만 사이트가 SEO를 요구하지 않는다면 (대시보드, 내용 관리 툴 등), CSR이 더 쉽고 light weight 한 선택일 수 있다.