증분 정적 생성

정적 생성은 배포 전에 모든 페이지를 HTML 파일로 만들어 두는 방식입니다. 요청이 와도 서버가 계산할 게 없으니 화면이 빠르게 뜨고, 사람이 몰려도 파일을 내려 주기만 하면 되니 비용이 거의 늘지 않습니다. 문제는 그 파일이 만들어진 순간의 내용에 멈춰 있다는 점입니다.

그래서 글자 하나를 고치려고 전체를 다시 만들어야 했습니다. 문서 5천 개를 정적으로 뽑는 사이트에서 한 문서의 오타를 고치면, 나머지 4999개까지 처음부터 다시 만드는 빌드가 돌고 그게 20분 걸립니다. 하루에 열 번 고치면 하루의 3시간이 빌드를 기다리는 데 들어갑니다.

편집자 쪽에서는 이 불편이 늘 같은 대화로 나타났습니다. "방금 가격 고쳤는데 사이트에는 언제 반영돼요?" 하고 물으면 "지금 빌드 걸었으니까 20분 뒤요" 라는 답이 돌아옵니다. 급하면 배포를 앞당겨 달라고 부탁하게 되고, 그 부탁이 하루에 몇 번씩 쌓이면 개발자는 빌드 버튼을 누르는 사람이 됩니다.

서버 렌더링으로 바꾸면 최신성 문제는 사라지지만 요청마다 서버가 화면을 새로 그리게 됩니다. 하루에 한 번 바뀌는 페이지를 초당 수백 번 다시 그리는 셈이라 서버 비용이 그만큼 올라갑니다. 증분 정적 생성은 이 둘 사이를 갈라 잡은 방식입니다. 평소에는 정적 생성처럼 만들어 둔 파일을 그대로 주다가, 정해 둔 시간이 지난 페이지만 뒤에서 조용히 다시 만듭니다.

페이지마다 다시 만들 주기를 초 단위로 적어 두면 나머지는 프레임워크가 처리합니다. 배포와 무관하게 페이지 하나 단위로 돌아간다는 점이 정적 생성과 갈리는 지점입니다.

1. 배포할 때 페이지를 미리 만듭니다. 여기까지는 정적 생성과 같습니다. 만들어진 HTML 은 파일로 저장돼 요청을 기다립니다.
2. 페이지마다 유효 기간을 붙입니다. 상품 상세는 60초, 공지 목록은 600초처럼 내용이 바뀌는 속도에 맞춰 정합니다. 숫자가 작을수록 최신에 가깝고 다시 만드는 횟수가 늘어납니다.
3. 유효 기간 안에 들어온 요청에는 저장해 둔 파일을 그대로 줍니다. 이 구간에서는 정적 생성과 성능이 같습니다.
4. 유효 기간이 지난 뒤 첫 요청이 오면, 그 사람에게는 일단 옛 파일을 주고 뒤에서 새 페이지를 만듭니다. 기다리게 하지 않는 대신 그 한 명은 한 번 더 옛 내용을 봅니다.
5. 새로 만들기가 끝나면 저장된 파일이 교체됩니다. 그다음 요청부터 새 내용이 나갑니다. 만들다가 실패하면 옛 파일이 그대로 남아 화면이 깨지지는 않습니다.

주기를 기다릴 수 없는 변경은 따로 신호를 보내 즉시 다시 만들 수 있습니다. 관리 도구에서 글을 저장할 때 해당 주소만 다시 만들라는 요청을 보내는 식이고, 이때는 유효 기간과 상관없이 그 페이지만 새로 만들어집니다. 가격 정정이나 잘못 나간 문구처럼 몇 분도 기다릴 수 없는 경우에 씁니다.

페이지 수가 많고, 내용이 가끔 바뀌고, 누가 보든 같은 화면이면 잘 맞습니다. 상품 상세, 블로그 글, 도움말 문서, 채용 공고가 전형적입니다. 페이지덱의 도움말 문서 900개가 여기 해당합니다. 전체 빌드는 14분이 걸리지만 문서 하나를 고쳐 다시 만드는 데는 2초가 걸립니다.

반대로 사람마다 다른 화면에는 쓰지 못합니다. 장바구니, 알림함, 대시보드처럼 로그인한 사람에 따라 내용이 달라지는 화면은 저장해 둔 파일 하나로 여럿에게 줄 수 없습니다. 이런 화면은 서버 렌더링이나 클라이언트 렌더링으로 그립니다. 브라우저가 로그인 정보를 들고 데이터를 따로 받아 그리는 방식입니다.

실시간에 가까운 값에도 맞지 않습니다. 남은 재고 수량이나 경매 호가처럼 초 단위로 바뀌는 값을 유효 기간 60초짜리 페이지에 넣으면 최대 60초 묵은 숫자가 보입니다. 한 페이지 안에서 대부분은 정적으로 두고 재고 숫자만 브라우저가 따로 받아 오게 나누는 식으로 섞어 씁니다.

한계는 둘입니다. 유효 기간이 지난 뒤 첫 방문자는 반드시 한 번 옛 내용을 봅니다. 그리고 저장된 페이지는 서버마다 따로 쌓여서, 여러 지역에 나눠 둔 환경이라면 A 지역은 새 내용이고 B 지역은 아직 옛 내용인 시차가 몇 분 생길 수 있습니다.

"이 페이지 ISR 로 돌리고 유효 기간 60초 줬어요."

최신성을 1분까지 양보하는 대신 서버 부담을 정적 파일 수준으로 낮췄다는 뜻입니다.

"수정했는데 왜 안 바뀌어요? 아, 아직 재생성 안 돌았네요."

유효 기간이 남아 저장된 옛 파일이 나가는 중이라는 말입니다.

"가격은 실시간이어야 하니까 그 부분만 클라이언트에서 받아 오죠."

페이지 전체를 서버 렌더링으로 바꾸지 말고 바뀌는 조각만 떼어 내자는 제안입니다.

페이지덱의 도움말 문서가 이 방식으로 나갑니다. 문서를 고치는 사람은 개발팀이 아니라 고객 성공팀이라 하루에도 여러 번 수정이 들어옵니다. 예전에는 수아가 문구를 고칠 때마다 태오에게 배포를 부탁했고, 태오는 그때마다 14분짜리 빌드를 돌렸습니다.

지금은 수아가 관리 도구에서 저장을 누르면 그 문서 한 장만 다시 만들어집니다. 태오는 배포에서 빠졌고 반영까지 걸리는 시간은 2초가 됐습니다. 대신 새로 생긴 질문이 있습니다. 가끔 수아가 "저장했는데 그대로예요" 라고 하는데, 열에 아홉은 유효 기간 안에 들어온 요청이라 옛 파일이 나간 경우입니다. 태오는 그때마다 한 번 더 새로 고쳐 보라고 답합니다.

다시 만들기가 저장한 순간에 바로 일어난다고 생각하는 경우가 많습니다. 데이터를 고치면 화면이 따라 바뀌는 게 익숙하니 그렇게 읽힙니다. 실제로는 유효 기간이 지난 뒤 누군가 그 페이지를 방문해야 다시 만들기가 시작됩니다. 방문자가 없는 페이지는 유효 기간이 하루가 지나도 그대로 있습니다. 이걸 모르면 아무도 안 들어오는 페이지를 계속 새로 고치며 왜 안 바뀌는지 찾게 됩니다.

유효 기간을 짧게 줄수록 좋다고 여기는 것도 흔합니다. 최신에 가까워 보이니 1초를 주고 싶어집니다. 그러면 요청이 올 때마다 새로 만들게 돼서 서버 렌더링과 부담이 같아지는데, 방문자는 옛 화면까지 한 번씩 보게 됩니다. 두 방식의 단점만 겹치는 설정입니다. 기간은 그 내용이 실제로 바뀌는 간격에 맞춰 잡고, 더 빨라야 하는 변경은 따로 신호를 보내 처리합니다.