Q1: 리액트에서 정적 웹사이트 생성(Static Site Generation, SSG)이란 무엇인가요?
A1: SSG는 빌드 시점에 모든 페이지를 미리 HTML 파일로 생성하여 서버 대신 CDN에서 빠르게 제공하는 방식입니다. 사용자 요청 시 서버 사이드 렌더링이 아닌 정적으로 생성된 HTML을 전달하므로 로딩 속도가 빠르고 SEO에 유리합니다.

---

Q2: 리액트에서 SSG를 구현하기 위한 대표적인 라이브러리는 무엇이 있나요?
A2: 대표적인 SSG용 리액트 프레임워크 및 라이브러리로는 다음이 있습니다.
- Next.js : React 기반의 프레임워크로, SSG와 서버사이드 렌더링(SSR)을 모두 지원합니다. `getStaticProps`와 `getStaticPaths` 함수를 사용해 빌드 시점에 페이지를 생성할 수 있습니다.
- Gatsby : 데이터 소스와의 풍부한 플러그인 에코시스템을 갖춘, 순수 SSG에 특화된 프레임워크입니다. GraphQL을 통해 데이터를 미리 가져와서 정적 페이지를 생성합니다.
- React Static : 비교적 가벼운 SSG 도구로, 간단한 설정으로 정적 사이트를 만들 수 있습니다.

---

Q3: Next.js에서 SSG를 사용하는 기본 방법은 무엇인가요?
A3: Next.js에서 SSG를 하려면 페이지 컴포넌트에 `getStaticProps` 함수를 작성합니다.

예:
```jsx
export async function getStaticProps() {
// 데이터 패칭
const data = await fetchMyData();
return {
props: { data }, // 빌드 시 props로 전달
};
}

export default function Page({ data }) {
return ;
}
```
동적 라우팅 시는 `getStaticPaths`로 빌드할 경로들을 정의합니다.

---

Q4: Gatsby에서 SSG를 하려면 어떻게 하나요?
A4: Gatsby는 빌드 시 모든 페이지를 정적으로 생성합니다.
- 페이지 생성은 `src/pages` 폴더 내 파일을 생성하거나
- `gatsby-node.js`의 `createPages` API를 사용해 프로그래밍 방식으로 동적 페이지를 생성할 수 있습니다. - 데이터는 GraphQL 쿼리를 사용해 빌드 타임에 가져옵니다.

예시:
```graphql
export const pageQuery = graphql`
query {
site {
siteMetadata {
title
}
}
}
`;
```

---

Q5: SSG 구현 시 주의할 점은 무엇인가요?
A5:
- 데이터가 자주 바뀌거나 사용자별 맞춤 콘텐츠인 경우 SSG만으로 적합하지 않을 수 있습니다.
- 빌드 시 모든 필요한 데이터를 사용할 수 있어야 합니다.
- Next.js 등에서는 빌드 후 재빌드 없이 새로운 페이지가 반영되지 않으므로, ISR(Incremental Static Regeneration) 같은 기능도 고려할 수 있습니다.
- 이미지 최적화, SEO, 캐싱 정책 등도 함께 신경 써야 빠른 정적 사이트를 구현할 수 있습니다.

---

Q6: SSG를 도입하면 리액트 SPA와 비교해 어떤 장점이 있나요?
A6:
- 초기 로딩 속도가 빠르다 (서버가 아닌 CDN에서 HTML 제공).
- SEO에 매우 친화적이다.
- 서버 부하 감소 및 비용 절감 효과가 있다.

---

요약
- 정적 웹사이트 생성을 위해 Next.js(`getStaticProps`), Gatsby(GraphQL + `createPages`) 등이 주로 사용된다.
- 프로젝트 목적에 따라 적합한 도구를 선택하고, 빌드 시 데이터 활용 가능 여부를 검토해야 한다.
- SSG는 빠른 로딩과 SEO 개선에 매우 효과적이다.

리액트에서 "정적 웹사이트 생성(Static Site Generation, SSG)"을 위한 라이브러리는 여러 가지가 있지만, 가장 널리 사용되는 라이브러리 중 하나는 Next.js 입니다.

Next.js는 리액트 기반의 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 웹사이트 생성을 모두 지원합니다.

이 글에서는 Next.js를 중심으로 정적 웹사이트 생성에 대해 설명하겠습니다.

Next.js 소개Next.js는 리액트 애플리케이션을 쉽게 만들 수 있도록 도와주는 프레임워크입니다.

정적 웹사이트 생성 기능을 통해 미리 HTML 파일을 생성하여 배포할 수 있으며, 이는 페이지 로딩 속도를 향상시키고 SEO(검색 엔진 최적화)에 유리합니다.

정적 웹사이트 생성(SSG) 사용법1. Next.js 설치 Next.js를 사용하기 위해 먼저 프로젝트를 생성하고 Next.js를 설치합니다.

다음 명령어를 사용하세요: ```bash npx create-next-app@latest my-static-site cd my-static-site ```2. 페이지 생성 Next.js에서는 `pages` 디렉토리에 파일을 생성하여 페이지를 만들 수 있습니다.

예를 들어, `pages/index.js` 파일을 생성하여 기본 페이지를 작성할 수 있습니다.

```jsx // pages/index.js import React from 'react'; const Home = () => { return (

Welcome to My Static Site

This is a static site generated with Next.js!

); }; export default Home; ```3. 정적 데이터 가져오기 Next.js는 `getStaticProps` 함수를 사용하여 정적 데이터를 가져올 수 있습니다.

이 함수는 빌드 시에 호출되어 페이지에 필요한 데이터를 미리 가져옵니다.

```jsx // pages/index.js import React from 'react'; const Home = ({ data }) => { return (

Welcome to My Static Site

{data.message}

); }; export async function getStaticProps() { const data = { message: 'This data is fetched at build time!' }; return { props: { data, }, }; } export default Home; ```4. 정적 페이지 생성 `getStaticPaths` 함수를 사용하여 동적 경로를 가진 페이지를 정적으로 생성할 수 있습니다.

예를 들어, 블로그 포스트와 같은 동적 콘텐츠를 생성할 수 있습니다.

```jsx // pages/posts/[id].js import React from 'react'; const Post = ({ post }) => { return (

{post.title}

{post.content}

); }; export async function getStaticPaths() { const paths = [ { params: { id: '1' } }, { params: { id: '2' } }, ]; return { paths, fallback: false }; } export async function getStaticProps({ params }) { const post = { title: `Post ${params.id}`, content: 'This is a static post.' }; return { props: { post, }, }; } export default Post; ```5. 빌드 및 배포 모든 페이지와 데이터를 설정한 후, 다음 명령어를 사용하여 애플리케이션을 빌드합니다.

```bash npm run build ``` 빌드가 완료되면, `out` 디렉토리에 정적 파일이 생성됩니다.

이 파일들을 웹 서버에 배포하면 됩니다.

결론Next.js는 리액트 애플리케이션에서 정적 웹사이트 생성을 간편하게 할 수 있는 강력한 도구입니다.

`getStaticProps`와 `getStaticPaths`를 활용하여 정적 페이지와 데이터를 쉽게 생성할 수 있으며, 빠른 로딩 속도와 SEO 최적화를 통해 사용자 경험을 향상시킬 수 있습니다.

Next.js를 사용하여 여러분의 정적 웹사이트를 만들어 보세요!