Gatsby는 반응 기반 오픈 소스 프레임워크이자 빠른 정적 웹사이트 생성기입니다. 빌드 시 정적 HTML을 생성하고 브라우저에 완전한 페이지를 제공합니다.
Gatsby는 사전 로드를 사용하여 페이지에 필요한 리소스 로드 속도를 높입니다. 필요한 모든 CSS, 데이터 및 핵심 JavaScript는 페이지를 실행하고 페이지의 모든 링크를 미리 가져오기 시작합니다. 또한 WEBPACK이 별도의 번들에 대한 종속성을 가져오는 방식으로 컴파일하는 동안 코드 분할을 사용합니다.

Gatsby 대 NextJs 대 create-react-app

프레임워크의 선택은 프로젝트 자체에 따라 다릅니다.

Gatsby: 정적 HTML이며 우수한 SEO가 필요하고 자주 데이터 업데이트가 없을 때 사용할 수 있습니다

.

NextJs: 좋은 SEO가 필요하고 데이터가 자주 업데이트되는 경우 서버 측 렌더링 exp: facebook

CRA: 좋은 SEO 경험이 필요하지 않을 때 클라이언트 측 렌더링: 개인 대시보드

개츠비 시작하기:

글로벌 CLI 설치:

npm install -g gatsby-cli

새 사이트 만들기:

gatsby new my-gatsby-app

개발 서버 시작:

gatsby develop

개츠비 프로젝트 구조

Gatsby 애플리케이션을 생성하면 다음과 같은 프로젝트 구조를 찾을 수 있습니다.

|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

src 폴더: 이 디렉토리에는 사이트 헤더 또는 페이지 템플릿과 같이 사이트 프론트엔드에서 볼 수 있는 것(브라우저에서 볼 수 있는 것)과 관련된 모든 코드가 포함됩니다. "Src"는 "소스 코드"의 규칙입니다.

페이지: 파일 이름에 기반한 경로가 있는 페이지가 자동으로 생성됨

템플릿: 프로그래밍 방식으로 페이지를 만들기 위한 템플릿이 포함되어 있습니다.

html: 사이트의 각 페이지 또는 페이지에 사용자 정의 HTML을 삽입하려면 수정해야 함

static: webpack에서 처리하지 않습니다.

gatsby-config.js: Gatsby 사이트의 기본 설정 파일입니다. 여기에서 사이트 제목 및 설명, 포함하려는 Gatsby 플러그인 등과 같은 사이트(메타데이터)에 대한 정보를 지정할 수 있습니다.

gatsby-node.js: 이 파일은 Gatsby가 Gatsby 노드 API(있는 경우)의 사용을 찾을 것으로 예상하는 위치입니다. 이를 통해 사이트 빌드 프로세스의 일부에 영향을 미치는 기본 Gatsby 설정을 사용자 정의/확장할 수 있습니다.

gatsby-ssr.js: 이 파일은 Gatsby가 Gatsby 서버 측 렌더링 API(있는 경우)의 사용을 찾을 것으로 예상하는 위치입니다. 이를 통해 서버 측 렌더링에 영향을 미치는 기본 Gatsby 설정을 사용자 지정할 수 있습니다.

gatsby-browser.js: 이 파일은 Gatsby가 Gatsby 브라우저 API(있는 경우)의 사용을 찾을 것으로 예상하는 위치입니다. 이를 통해 브라우저에 영향을 미치는 기본 Gatsby 설정을 사용자 정의/확장할 수 있습니다.

Gatsby의 데이터 계층은 GraphQL로 구동되며 데이터를 구성 요소로 가져올 수 있습니다.