Gatsby에 Recoil 적용하기
하려는 것
Global client state 이용해서 DB 커넥션을 최소화 하려 한다.
하는 이유
각 페이지마다 조회 수를 보여줘야 하는데, 페이지 접근마다 DB 커넥션이 두번 발생한다. (페이지 조회 수 조회 및 증가)
너무 많이 커넥션을 생성하는 것 같아 커넥션을 최소한으로 줄이려고 했다.
처음 페이지 진입 했을 때만 DB를 이용해서 가져오고, 조회는 client에서 가지고 있다가 유저가 접근했을 때만 뷰 수를 증가한다.
뷰 카운트 추가 커넥션은 유지한다.
어떻게 할까
gatsby-browser.tsx gatsby-ssr.tsx gatsby-ssr.tsx 모두 아래와 같이 선언해준다. 두곳다 같이 해주어야 SSR이 된다.hydrate으로 인하여 SSR에서 그러진 markup과 browser에서 보여지는 markup과 같아야하기 때문이다.
import React from 'react'
import { RecoilRoot } from 'recoil'
export const wrapRootElement = ({ element }) => {
return <RecoilRoot>{element}</RecoilRoot>
}