뭐가 가장 중요할까?

홈페이지를 만들다 보면 가장 중요하다고 느껴지는 점이 무엇인가요?

• Google은 웹 페이지 로딩 시간이 사용자 행동에 미치는 영향을 연구한 바 있습니다. Google의 보고서에 따르면, 페이지 로딩 시간이 1초 증가할 때마다 사용자 이탈률이 2%씩 증가한다고 합니다.
• Amazon 또한 페이지 로딩 시간이 매출에 미치는 영향을 연구한 적이 있습니다. 그들의 연구에서는 페이지 로딩 시간이 1초 늘어날 때마다 매출이 1% 감소한다고 보고하였습니다.

어떻게 빠르게 렌더링할 수 있을까?

SSR (Server Side Rendering)

• 클라이언트가 페이지를 요청할 때마다 서버에서 HTML을 실시간으로 생성하여 제공합니다.

SSG (Static Site Generation)

• 빌드 타임에 HTML 파일을 미리 생성하여 요청 시 서버가 정적 파일을 제공합니다.

ISR (Incremental Static Regeneration)

• 정적 페이지를 미리 생성하면서도 특정 조건이나 주기에 따라 HTML을 업데이트할 수 있는 기능을 제공합니다.

어떤 렌더링 기법을 선택해야 할까?

나의 니즈 파악하기

1. 운영비용 0원
2. 디자인 커스텀 쉽게
3. SEO 최적화
4. 페이지 빠른 로딩
5. 데이터베이스 사용안하기

📦app
┣ 📂article
┃ ┗ 📂[slug]
┃ ┃ ┣ 📜article.module.scss
┃ ┃ ┣ 📜layout.tsx
┃ ┃ ┗ 📜page.tsx

generateStaticParams을 사용해보자

import { useReadMdxFile as getFiles, useReadMdx as getDetail } from '@/hooks/useReadMdx';

export async function generateStaticParams() {
  const posts = ((await getDetail()) as MDX.Metadata[]) ?? [];
  return posts?.map((post) => ({
    slug: post.path,
  }));
}

빌드 후

● /article/[slug] 11.4 kB 110 kB

○ (Static) prerendered as static content
● (SSG) prerendered as static HTML (uses getStaticProps)

generateStaticParams 이 없으면 어떻게 되는걸까?

├ ƒ /article/[slug] 11.4 kB 110 kB

ƒ (Dynamic) server-rendered on demand

export const revalidate = 60;

마치면서