Gatsby 4에 새로 추가된 렌더링 옵션들

SSG 방식: Static Site Generation

SSG: Static Site Generation
SSG: Static Site Generation

DSG 방식: Deferred Static Generation

DSG: Deferred Static Generation
DSG: Deferred Static Generation
// gatsby-node.js

exports.createPages = ({ actions }) => {
actions.createPage({
path: '/dsg/',
component: require.resolve(`./src/dsg.js`),
defer: true
})
}

SSR 방식: Server-Side Rendering

SSR: Server Side Rendering
SSR: Server Side Rendering
import * as React from "react"

const SSRPage = () => (
<main>
<h1>SSR Page with Dogs</h1>
</main>
)

export default SSRPage

export async function getServerData() {}

3줄 요약

  1. 이제 Gatsby에서도 기존 SSG 방식 외에 DSG, SSR 등 다양한 렌더링이 가능해 짐.
  2. DSG, SSR 처리를 위한 워커(worker) 프로세스가 필요해짐. Gatsby Cloud?
  3. 빌드 시간과 사용자 경험 간 적절한 균형을 맞추기 위한 페이지 설계 필요!

참고자료

--

--

Hacking the @usefulparadigm

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store