Gatsby

Gatsby와 SEO Gatsby는 정적 사이트 생성과 동적 서버 사이드 렌더링을 결합해 SEO를 최적화하는 데 유리한 플랫폼이다. 아래는 Gatsby의 SEO 관련 주요 특징이다. 정적 사이트 생성(Static Site Generation, SSG): 정적 사이트를 생성하므로, 모든 페이지의 HTML이 미리 생성된다. 이는 검색 엔진 크롤러가 콘텐츠를 쉽게 찾고 인덱싱할 수 있도록 한다. 서버사이드 렌더링(Server-Side Rendering, SSR) 지원: 동적 콘텐츠에 대한 서버사이드 렌더링을 지원한다. 이를 통해 초기 로딩 속도를 개선하고, 소셜 미디어 미리보기와 같은 기능을 구현할 수 있다. 예상 로딩(Prefetching): 링크가 마우스를 올리거나 포커스를 받았을 때 미리 데이터를 가져와..

Gatsby는 사이트 내에서 마크다운 파일로 페이지 생성을 할 수 있다. 마크다운 파일을 읽고 이해하기 위해 플러그인을 추가하고, 그 파일로부터 페이지를 자동 생성한다. 파일 시스템으로부터 Gatsby로 파일 읽어오기 아래 플러그인을 사용해 파일을 읽고 Gatsby가 GraphQL 데이터 레이어에 파일 노드를 생성하도록 할 수 있다. npm install gatsby-source-filesystem 개츠비 설정 파일인 gatsby-config.js를 열어 gatsby-source-filesystem 플러그인을 추가한다. path 옵션은 파일을 검색할 디렉토리를 설정하는 방법이다. // gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-s..