{"content_id":"nz3psdk2a0","slug":"low-involvement-web-static-generation-html-cache","locale":"ko","schema_type":"TechArticle","category":"knowledge_base","category_name":"지식 베이스","title":"저관여웹 정적 생성과 HTML 캐시 기준","summary":"저관여웹의 기술 설계에서는 초기 HTML에 담긴 본문과 CDN의 HTML 캐시를 함께 확인해야 합니다. TTFB 0.8초는 성능 개선의 참고값이며, 캐시 적용 범위와 수정 후 갱신도 설계 대상입니다.","sponsorship_disclosure":null,"affiliate_disclosure":null,"commerce_disclosure":null,"author":{"name":"인조이스 편집팀","url":"https://injoys.com/ko/about"},"key_points":["초기 HTML에 핵심 본문을 담으면 JavaScript 실행에 대한 의존을 줄일 수 있습니다.","Google은 JavaScript를 실행하므로 React 사용만으로 검색 수집 실패를 판단할 수 없습니다.","TTFB 0.8초 이하는 성능 개선의 참고값이며 페이지 전체 로딩 시간을 뜻하지 않습니다.","Cloudflare CDN은 기본적으로 HTML을 캐시하지 않으므로 공개 페이지의 캐시 규칙을 확인해야 합니다.","HTML 캐시에는 로그인 페이지 제외와 콘텐츠 수정 후 갱신 정책이 필요합니다."],"content_markdown":"저관여웹의 검색 수집을 돕으려면 초기 HTML에 핵심 본문을 담아야 합니다. 공개 콘텐츠에는 정적 생성과 CDN의 HTML 캐시가 유용합니다. 다만 TTFB 0.8초 달성만으로 검색 노출을 보장할 수는 없습니다.\n\nTTFB 수치의 근거는 2025년 11월 18일 갱신된 web.dev 문서입니다.\n\n## 저관여웹에서 먼저 확인할 기술 조건\n\n이 글에서 저관여웹은 필요한 정보를 짧게 확인하는 웹사이트를 뜻합니다. 렌더링과 전송 속도는 이런 사이트의 기술 점검 항목입니다. 다만 두 항목만으로 검색 노출의 차이를 모두 설명할 수는 없습니다.\n\n검색 수집은 로봇이 페이지를 가져오는 과정입니다. 색인 생성은 가져온 내용을 검색 대상으로 처리하는 과정입니다. Google은 수집된 모든 페이지가 색인에 포함되지는 않는다고 설명합니다. [Google 크롤링 예산 안내](https://developers.google.com/crawling/docs/crawl-budget)\n\n| 점검 항목 | 확인할 내용 | 해결하려는 문제 |\n| --- | --- | --- |\n| 초기 HTML | 제목과 핵심 본문이 응답에 포함되는지 | 본문을 읽기 위한 추가 실행 의존 |\n| 렌더링 | JavaScript 실행 후 내용이 정상적으로 나타나는지 | 실행 오류나 차단으로 인한 누락 |\n| TTFB | 첫 응답이 도착하기까지 걸리는 시간 | 연결과 서버 응답의 지연 |\n| HTML 캐시 | 공개 문서를 CDN에서 재사용하는지 | 원본 서버까지 반복해서 요청하는 비용 |\n| 색인 상태 | Google이 해당 URL을 어떻게 처리했는지 | 수집 성공과 검색 등록을 혼동하는 문제 |\n\n## React 페이지가 빈 HTML로 보이는 이유\n\nReact 페이지의 초기 HTML은 구현 방식에 따라 달라집니다. 브라우저에서 본문을 만드는 방식은 CSR이라고 부릅니다. 이 방식에서는 첫 응답에 본문 없이 실행용 코드만 담길 수 있습니다.\n\nGoogle은 Chromium을 이용해 JavaScript를 실행합니다. 페이지는 수집 이후 렌더링을 기다릴 수 있습니다. 차단된 페이지나 파일은 렌더링 대상에서 제외될 수 있습니다. 모든 로봇이 JavaScript를 실행하는 것도 아닙니다. [Google JavaScript SEO 기본 안내](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics)\n\n따라서 화면이 정상이라는 사실만으로 수집 상태를 판단하지 마세요. 초기 응답에 본문이 있는지부터 확인하세요. Google이 렌더링한 결과는 Search Console의 URL 검사로 확인할 수 있습니다.\n\n## 정적 생성과 서버 렌더링 비교\n\n공개 본문의 갱신 방식에 따라 HTML 생성 방법을 선택할 수 있습니다. 정적 생성은 요청 전에 HTML을 만드는 방식입니다. 서버 렌더링은 요청을 받았을 때 서버에서 HTML을 만듭니다. React에서도 이런 방식을 사용할 수 있습니다. [web.dev 렌더링 방식 안내](https://web.dev/articles/rendering-on-the-web)\n\n| 방식 | HTML을 만드는 시점 | 검토하기 좋은 상황 | 운영상 확인할 점 |\n| --- | --- | --- | --- |\n| 클라이언트 렌더링 CSR | 브라우저에서 JavaScript를 실행할 때 | 사용자 조작이 많은 화면 | 본문 표시까지 필요한 실행과 요청 |\n| 정적 생성 SSG | 빌드나 콘텐츠 생성 시점 | 방문자에게 같은 내용을 보여주는 공개 문서 | 수정 후 재생성과 배포 |\n| 서버 렌더링 SSR | 페이지 요청을 처리할 때 | 요청마다 최신 내용을 구성하는 화면 | 데이터 조회와 HTML 생성 시간 |\n| 사전 렌더링 | 배포 전에 앱을 실행해 HTML을 확보할 때 | 기존 앱의 초기 본문을 미리 제공할 때 | 이후 기능에 필요한 JavaScript |\n\n정적 생성과 CDN은 서로 다른 역할을 합니다. 정적 생성은 HTML을 만드는 시점에 관한 선택입니다. CDN은 콘텐츠를 전달하고 재사용하는 구조입니다. 서버에서 만든 HTML도 조건에 맞으면 CDN에 캐시할 수 있습니다.\n\n## TTFB 0.8초는 무엇을 뜻하나요?\n\nTTFB는 페이지 이동 시작부터 첫 응답 바이트까지의 시간입니다. web.dev는 대부분의 사이트에 **0.8초 이하**를 대략적인 목표로 제시합니다. 이는 페이지 전체가 표시되는 시간과 다릅니다. TTFB 자체는 Core Web Vitals 항목도 아닙니다. [web.dev TTFB 설명](https://web.dev/articles/ttfb)\n\nTTFB에는 서버 내부 처리 외의 지연도 포함됩니다. DNS 조회는 도메인의 접속 주소를 찾는 과정입니다. TCP와 TLS 연결에도 시간이 걸릴 수 있습니다. 주소를 다른 곳으로 보내는 리디렉션도 영향을 줍니다.\n\n- DNS 조회와 연결 준비 시간\n- 네트워크를 통한 요청과 응답의 이동 시간\n- 원본 서버의 데이터 조회와 HTML 생성 시간\n- 첫 응답 전까지 발생하는 리디렉션 시간\n\n서버가 서울에 있다는 사실만으로 0.8초 초과를 단정할 수는 없습니다. 접속 위치와 연결 재사용 여부에 따라 결과가 달라집니다. Google의 크롤러는 주로 미국 IP 주소를 사용합니다. 다만 다른 국가의 IP 주소에서도 접속할 수 있습니다. [Google 크롤러 기술 특성](https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en)\n\n지속적인 응답 지연은 Google의 수집 용량에 영향을 줍니다. 서버 오류도 수집량 감소의 원인이 됩니다. 그렇다고 0.8초를 한 번 넘으면 수집이 중단되는 규칙은 아닙니다. 수집 수요에는 페이지 품질과 갱신 빈도도 관여합니다. [Google 크롤링 예산 안내](https://developers.google.com/crawling/docs/crawl-budget)\n\n## CDN에서 HTML 캐시를 확인해야 하는 이유\n\nCloudflare CDN은 기본적으로 HTML을 캐시하지 않습니다. 이미지나 CSS가 캐시되어도 본문 문서는 별도로 확인해야 합니다. 다른 CDN의 기본 동작은 해당 서비스 문서에서 확인하세요.\n\n\u003e The Cloudflare CDN does not cache HTML or JSON by default.\n\u003e\n\u003e Cloudflare, Default cache behavior\n\n이 문장은 HTML과 JSON이 기본 캐시 대상이 아니라는 뜻입니다. 공개 HTML은 Cache Rules로 캐시 대상에 포함할 수 있습니다. 실제 저장 여부에는 응답 헤더와 쿠키 등의 조건도 작용합니다. [Cloudflare 기본 캐시 동작](https://developers.cloudflare.com/cache/concepts/default-cache-behavior/)\n\n캐시는 저장해 둔 응답을 다시 사용하는 기능입니다. CDN에 연결했다고 모든 문서가 전 세계에 즉시 복제되지는 않습니다. Cloudflare는 요청을 처리하는 데이터센터에 콘텐츠를 캐시합니다. 캐시에 없는 요청은 원본 서버 조회가 필요할 수 있습니다. [Cloudflare 캐시 시작 안내](https://developers.cloudflare.com/cache/get-started/)\n\n공개 HTML에 캐시 규칙을 적용할 때는 개인화 페이지를 제외하세요. Cloudflare는 동적 HTML 캐시로 다른 사람의 정보가 전달될 수 있다고 경고합니다. 로그인이나 계정 페이지는 캐시하지 마세요. [Cloudflare Cache Everything 주의사항](https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/)\n\n## 페이지 조건별 캐시 적용 기준\n\n방문자에게 같은 내용을 보여주는지가 캐시 범위의 출발점입니다. 공개 설명문은 공동으로 재사용하기 좋은 대상입니다. 로그인 상태에 따라 내용이 달라지는 응답은 별도로 처리해야 합니다.\n\n| 페이지 조건 | 검토할 구성 | 함께 확인할 사항 |\n| --- | --- | --- |\n| 방문자에게 동일한 설명문 제공 | 정적 생성과 공개 HTML 캐시 | 수정 후 재생성·캐시 갱신 |\n| 공개 본문에 자주 바뀌는 수치 포함 | 본문과 변동 데이터의 갱신 방식 분리 | 수치의 기준 시점과 실패 시 표시 |\n| 요청 시점의 최신 공개 정보 필요 | 서버 렌더링과 조건부 캐시 검토 | 허용 가능한 정보 지연 |\n| 로그인·계정·결제 화면 | 공용 HTML 캐시에서 제외 | 인증 쿠키와 사용자별 응답 |\n| 언어별 공개 문서 제공 | 언어별 URL과 각 문서의 캐시 | 번역문 연결과 언어별 갱신 |\n\n실시간 데이터를 나중에 불러오면 정적 본문을 유지하기 쉽습니다. 그러나 검색에 필요한 핵심 내용을 전부 나중으로 미루지는 마세요. 초기 HTML을 제공하는 목적과 충돌할 수 있기 때문입니다.\n\n## 흔한 실수와 확인 기준\n\n기술 이름이나 설정 화면만으로 결과를 판단하면 오류를 놓치기 쉽습니다. 실제 HTML과 응답 헤더를 함께 확인하세요. 다음은 서로 구분해야 할 상태입니다.\n\n| 흔한 판단 | 확인해야 할 기준 |\n| --- | --- |\n| React 사이트는 검색 로봇이 읽지 못함 | 초기 HTML과 Google의 렌더링 결과 |\n| TTFB 0.8초면 화면도 모두 표시됨 | 첫 응답 이후 본문 표시까지 걸리는 시간 |\n| CDN을 연결했으니 HTML도 캐시됨 | HTML 요청의 캐시 상태 |\n| 정적 파일이면 항상 최신 내용임 | 마지막 생성 시점과 배포된 내용 |\n| 빠르게 응답하면 검색 등록도 완료됨 | Search Console의 색인 처리 상태 |\n| 캐시 적중 결과 하나로 글로벌 속도를 판단함 | 접속 지역과 캐시 적중 여부별 측정 결과 |\n\nCloudflare의 `CF-Cache-Status`는 캐시 상태를 보여주는 헤더입니다. `HIT`는 캐시에서 응답을 찾았다는 뜻입니다. `MISS`는 요청 당시 캐시에 없어 원본에서 가져왔다는 뜻입니다. `DYNAMIC`은 캐시 대상으로 처리되지 않은 상태입니다. [Cloudflare 캐시 응답 설명](https://developers.cloudflare.com/cache/concepts/cache-responses/)\n\n## 콘텐츠 수정 후 캐시 갱신\n\n정적 파일과 CDN 캐시는 수정 내용을 반영하는 경로까지 설계해야 합니다. 원본을 고쳐도 이전 캐시가 남으면 옛 내용이 전달됩니다. HTML과 JSON을 함께 발행한다면 두 형식의 내용도 맞춰야 합니다.\n\n다음은 문서와 데이터 파일을 함께 운영할 때의 점검 순서입니다.\n\n1. 원문 데이터에서 변경 내용을 확정하세요.\n2. 같은 변경본으로 HTML과 데이터 파일을 다시 생성하세요.\n3. 새 파일을 배포한 뒤 변경된 URL의 캐시를 갱신하세요.\n4. 각 URL을 다시 요청해 수정 내용이 일치하는지 확인하세요.\n\nCloudflare는 URL별 캐시 삭제를 권장합니다. 캐시 삭제는 저장된 응답을 제거하는 작업입니다. 정적 HTML을 새로 만드는 작업은 별도로 필요합니다. 따라서 파일 생성과 캐시 갱신을 같은 배포 절차에 연결하세요. [Cloudflare 캐시 삭제 안내](https://developers.cloudflare.com/cache/how-to/purge-cache/)\n\n갱신 간격은 콘텐츠가 허용하는 정보 지연에 맞춰 정하세요. 설명문과 실시간 수치에 같은 주기를 적용할 필요는 없습니다. 짧은 캐시 유효기간만으로 모든 갱신 문제를 해결할 수는 없습니다.\n\n## 다국어 사이트의 hreflang 기준\n\n`hreflang`은 같은 콘텐츠의 언어·지역별 주소를 연결하는 정보입니다. 번역문을 만들어 주는 기능은 아닙니다. Google이 방문자에게 적절한 언어 버전을 찾도록 돕습니다.\n\n| 구현 위치 | 표시 방법 | 선택할 때 확인할 점 |\n| --- | --- | --- |\n| HTML | 문서의 `head`에 대체 언어 링크 표시 | 각 페이지 템플릿에서 관리 가능한지 |\n| HTTP 헤더 | 응답의 `Link` 헤더에 표시 | 서버에서 헤더를 관리 가능한지 |\n| 사이트맵 | 언어별 URL 관계를 사이트맵에 표시 | 문서 목록을 일괄 관리 가능한지 |\n\nGoogle은 이 방법들을 동등하게 취급합니다. 따라서 HTML 안에만 넣어야 하는 것은 아닙니다. 각 언어 문서는 자기 자신을 포함해 대체 언어 문서를 표시해야 합니다. 서로 대응하는 페이지 사이의 연결도 확인하세요. [Google 다국어 페이지 안내](https://developers.google.com/search/docs/specialty/international/localized-versions)\n\n## 배포 결과 확인 순서\n\n배포 후에는 본문 전달과 캐시 동작을 따로 검증하세요. 속도 측정값에는 측정 지역과 캐시 상태를 함께 남기세요. 다음 순서로 확인하면 문제 지점을 구분하기 쉽습니다.\n\n1. 브라우저 개발자 도구에서 HTML 문서 응답을 확인하세요. 핵심 본문이 응답에 포함되는지 살펴보세요.\n2. Search Console의 URL 검사에서 렌더링된 HTML을 확인하세요. 실제 색인 처리 상태도 별도로 점검하세요.\n3. HTML 응답의 캐시 헤더를 확인하세요. Cloudflare에서는 `CF-Cache-Status`를 읽으세요.\n4. 주요 접속 지역에서 같은 문서를 측정하세요. 캐시에 없는 요청과 적중한 요청을 구분하세요.\n5. 콘텐츠를 수정한 뒤 갱신 결과를 확인하세요. 로그인 페이지가 캐시에서 제외되는지도 점검하세요.\n\nCloudflare는 과도한 동적 HTML 캐시가 로그인을 깨뜨릴 수 있다고 경고합니다. 로그인 폼과 인증된 페이지는 캐시하지 마세요. 수정 후에는 인증 쿠키가 유지되는지도 확인하세요. [Cloudflare 로그인 문제 안내](https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/)\n\n## AI 코딩에 전달할 구현 조건\n\nAI에게는 기술 이름과 함께 검증 가능한 결과를 요청하세요. 초기 HTML의 내용과 캐시 제외 범위를 명시하는 방식이 유용합니다. 아래 문구는 공개 지식 페이지를 만드는 경우의 요청 예시입니다.\n\n```text\n공개 지식 페이지의 핵심 본문을 초기 HTML에 포함하세요.\n공개 문서는 정적 생성을 우선 검토하세요.\n변동 데이터의 갱신 방식을 별도로 설명하세요.\nCDN의 HTML 캐시 적용 여부를 확인하세요.\n로그인·계정·결제 페이지는 공용 캐시에서 제외하세요.\n콘텐츠 수정 시 정적 파일 재생성과 캐시 갱신을 연결하세요.\n다국어 페이지가 있으면 hreflang 연결을 구성하세요.\n초기 HTML, 캐시 상태, 수정 반영 여부의 확인 방법을 제시하세요.\n```","content_html":"\u003cp\u003e저관여웹의 검색 수집을 돕으려면 초기 HTML에 핵심 본문을 담아야 합니다. 공개 콘텐츠에는 정적 생성과 CDN의 HTML 캐시가 유용합니다. 다만 TTFB 0.8초 달성만으로 검색 노출을 보장할 수는 없습니다.\u003c/p\u003e\n\u003cp\u003eTTFB 수치의 근거는 2025년 11월 18일 갱신된 web.dev 문서입니다.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%EC%A0%80%EA%B4%80%EC%97%AC%EC%9B%B9%EC%97%90%EC%84%9C-%EB%A8%BC%EC%A0%80-%ED%99%95%EC%9D%B8%ED%95%A0-%EA%B8%B0%EC%88%A0-%EC%A1%B0%EA%B1%B4\" class=\"anchor\" id=\"저관여웹에서-먼저-확인할-기술-조건\"\u003e\u003c/a\u003e저관여웹에서 먼저 확인할 기술 조건\u003c/h2\u003e\n\u003cp\u003e이 글에서 저관여웹은 필요한 정보를 짧게 확인하는 웹사이트를 뜻합니다. 렌더링과 전송 속도는 이런 사이트의 기술 점검 항목입니다. 다만 두 항목만으로 검색 노출의 차이를 모두 설명할 수는 없습니다.\u003c/p\u003e\n\u003cp\u003e검색 수집은 로봇이 페이지를 가져오는 과정입니다. 색인 생성은 가져온 내용을 검색 대상으로 처리하는 과정입니다. Google은 수집된 모든 페이지가 색인에 포함되지는 않는다고 설명합니다. \u003ca href=\"https://developers.google.com/crawling/docs/crawl-budget\"\u003eGoogle 크롤링 예산 안내\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e점검 항목\u003c/th\u003e\n\u003cth\u003e확인할 내용\u003c/th\u003e\n\u003cth\u003e해결하려는 문제\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"점검 항목\"\u003e초기 HTML\u003c/td\u003e\n\u003ctd data-label=\"확인할 내용\"\u003e제목과 핵심 본문이 응답에 포함되는지\u003c/td\u003e\n\u003ctd data-label=\"해결하려는 문제\"\u003e본문을 읽기 위한 추가 실행 의존\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"점검 항목\"\u003e렌더링\u003c/td\u003e\n\u003ctd data-label=\"확인할 내용\"\u003eJavaScript 실행 후 내용이 정상적으로 나타나는지\u003c/td\u003e\n\u003ctd data-label=\"해결하려는 문제\"\u003e실행 오류나 차단으로 인한 누락\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"점검 항목\"\u003eTTFB\u003c/td\u003e\n\u003ctd data-label=\"확인할 내용\"\u003e첫 응답이 도착하기까지 걸리는 시간\u003c/td\u003e\n\u003ctd data-label=\"해결하려는 문제\"\u003e연결과 서버 응답의 지연\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"점검 항목\"\u003eHTML 캐시\u003c/td\u003e\n\u003ctd data-label=\"확인할 내용\"\u003e공개 문서를 CDN에서 재사용하는지\u003c/td\u003e\n\u003ctd data-label=\"해결하려는 문제\"\u003e원본 서버까지 반복해서 요청하는 비용\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"점검 항목\"\u003e색인 상태\u003c/td\u003e\n\u003ctd data-label=\"확인할 내용\"\u003eGoogle이 해당 URL을 어떻게 처리했는지\u003c/td\u003e\n\u003ctd data-label=\"해결하려는 문제\"\u003e수집 성공과 검색 등록을 혼동하는 문제\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003ch2\u003e\n\u003ca href=\"#react-%ED%8E%98%EC%9D%B4%EC%A7%80%EA%B0%80-%EB%B9%88-html%EB%A1%9C-%EB%B3%B4%EC%9D%B4%EB%8A%94-%EC%9D%B4%EC%9C%A0\" class=\"anchor\" id=\"react-페이지가-빈-html로-보이는-이유\"\u003e\u003c/a\u003eReact 페이지가 빈 HTML로 보이는 이유\u003c/h2\u003e\n\u003cp\u003eReact 페이지의 초기 HTML은 구현 방식에 따라 달라집니다. 브라우저에서 본문을 만드는 방식은 CSR이라고 부릅니다. 이 방식에서는 첫 응답에 본문 없이 실행용 코드만 담길 수 있습니다.\u003c/p\u003e\n\u003cp\u003eGoogle은 Chromium을 이용해 JavaScript를 실행합니다. 페이지는 수집 이후 렌더링을 기다릴 수 있습니다. 차단된 페이지나 파일은 렌더링 대상에서 제외될 수 있습니다. 모든 로봇이 JavaScript를 실행하는 것도 아닙니다. \u003ca href=\"https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics\"\u003eGoogle JavaScript SEO 기본 안내\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e따라서 화면이 정상이라는 사실만으로 수집 상태를 판단하지 마세요. 초기 응답에 본문이 있는지부터 확인하세요. Google이 렌더링한 결과는 Search Console의 URL 검사로 확인할 수 있습니다.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%EC%A0%95%EC%A0%81-%EC%83%9D%EC%84%B1%EA%B3%BC-%EC%84%9C%EB%B2%84-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B9%84%EA%B5%90\" class=\"anchor\" id=\"정적-생성과-서버-렌더링-비교\"\u003e\u003c/a\u003e정적 생성과 서버 렌더링 비교\u003c/h2\u003e\n\u003cp\u003e공개 본문의 갱신 방식에 따라 HTML 생성 방법을 선택할 수 있습니다. 정적 생성은 요청 전에 HTML을 만드는 방식입니다. 서버 렌더링은 요청을 받았을 때 서버에서 HTML을 만듭니다. React에서도 이런 방식을 사용할 수 있습니다. \u003ca href=\"https://web.dev/articles/rendering-on-the-web\"\u003eweb.dev 렌더링 방식 안내\u003c/a\u003e\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e방식\u003c/th\u003e\n\u003cth\u003eHTML을 만드는 시점\u003c/th\u003e\n\u003cth\u003e검토하기 좋은 상황\u003c/th\u003e\n\u003cth\u003e운영상 확인할 점\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"방식\"\u003e클라이언트 렌더링 CSR\u003c/td\u003e\n\u003ctd data-label=\"HTML을 만드는 시점\"\u003e브라우저에서 JavaScript를 실행할 때\u003c/td\u003e\n\u003ctd data-label=\"검토하기 좋은 상황\"\u003e사용자 조작이 많은 화면\u003c/td\u003e\n\u003ctd data-label=\"운영상 확인할 점\"\u003e본문 표시까지 필요한 실행과 요청\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"방식\"\u003e정적 생성 SSG\u003c/td\u003e\n\u003ctd data-label=\"HTML을 만드는 시점\"\u003e빌드나 콘텐츠 생성 시점\u003c/td\u003e\n\u003ctd data-label=\"검토하기 좋은 상황\"\u003e방문자에게 같은 내용을 보여주는 공개 문서\u003c/td\u003e\n\u003ctd data-label=\"운영상 확인할 점\"\u003e수정 후 재생성과 배포\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"방식\"\u003e서버 렌더링 SSR\u003c/td\u003e\n\u003ctd data-label=\"HTML을 만드는 시점\"\u003e페이지 요청을 처리할 때\u003c/td\u003e\n\u003ctd data-label=\"검토하기 좋은 상황\"\u003e요청마다 최신 내용을 구성하는 화면\u003c/td\u003e\n\u003ctd data-label=\"운영상 확인할 점\"\u003e데이터 조회와 HTML 생성 시간\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"방식\"\u003e사전 렌더링\u003c/td\u003e\n\u003ctd data-label=\"HTML을 만드는 시점\"\u003e배포 전에 앱을 실행해 HTML을 확보할 때\u003c/td\u003e\n\u003ctd data-label=\"검토하기 좋은 상황\"\u003e기존 앱의 초기 본문을 미리 제공할 때\u003c/td\u003e\n\u003ctd data-label=\"운영상 확인할 점\"\u003e이후 기능에 필요한 JavaScript\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003e정적 생성과 CDN은 서로 다른 역할을 합니다. 정적 생성은 HTML을 만드는 시점에 관한 선택입니다. CDN은 콘텐츠를 전달하고 재사용하는 구조입니다. 서버에서 만든 HTML도 조건에 맞으면 CDN에 캐시할 수 있습니다.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#ttfb-08%EC%B4%88%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%84-%EB%9C%BB%ED%95%98%EB%82%98%EC%9A%94\" class=\"anchor\" id=\"ttfb-08초는-무엇을-뜻하나요\"\u003e\u003c/a\u003eTTFB 0.8초는 무엇을 뜻하나요?\u003c/h2\u003e\n\u003cp\u003eTTFB는 페이지 이동 시작부터 첫 응답 바이트까지의 시간입니다. web.dev는 대부분의 사이트에 \u003cstrong\u003e0.8초 이하\u003c/strong\u003e를 대략적인 목표로 제시합니다. 이는 페이지 전체가 표시되는 시간과 다릅니다. TTFB 자체는 Core Web Vitals 항목도 아닙니다. \u003ca href=\"https://web.dev/articles/ttfb\"\u003eweb.dev TTFB 설명\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003eTTFB에는 서버 내부 처리 외의 지연도 포함됩니다. DNS 조회는 도메인의 접속 주소를 찾는 과정입니다. TCP와 TLS 연결에도 시간이 걸릴 수 있습니다. 주소를 다른 곳으로 보내는 리디렉션도 영향을 줍니다.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eDNS 조회와 연결 준비 시간\u003c/li\u003e\n\u003cli\u003e네트워크를 통한 요청과 응답의 이동 시간\u003c/li\u003e\n\u003cli\u003e원본 서버의 데이터 조회와 HTML 생성 시간\u003c/li\u003e\n\u003cli\u003e첫 응답 전까지 발생하는 리디렉션 시간\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e서버가 서울에 있다는 사실만으로 0.8초 초과를 단정할 수는 없습니다. 접속 위치와 연결 재사용 여부에 따라 결과가 달라집니다. Google의 크롤러는 주로 미국 IP 주소를 사용합니다. 다만 다른 국가의 IP 주소에서도 접속할 수 있습니다. \u003ca href=\"https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en\"\u003eGoogle 크롤러 기술 특성\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e지속적인 응답 지연은 Google의 수집 용량에 영향을 줍니다. 서버 오류도 수집량 감소의 원인이 됩니다. 그렇다고 0.8초를 한 번 넘으면 수집이 중단되는 규칙은 아닙니다. 수집 수요에는 페이지 품질과 갱신 빈도도 관여합니다. \u003ca href=\"https://developers.google.com/crawling/docs/crawl-budget\"\u003eGoogle 크롤링 예산 안내\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#cdn%EC%97%90%EC%84%9C-html-%EC%BA%90%EC%8B%9C%EB%A5%BC-%ED%99%95%EC%9D%B8%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0\" class=\"anchor\" id=\"cdn에서-html-캐시를-확인해야-하는-이유\"\u003e\u003c/a\u003eCDN에서 HTML 캐시를 확인해야 하는 이유\u003c/h2\u003e\n\u003cp\u003eCloudflare CDN은 기본적으로 HTML을 캐시하지 않습니다. 이미지나 CSS가 캐시되어도 본문 문서는 별도로 확인해야 합니다. 다른 CDN의 기본 동작은 해당 서비스 문서에서 확인하세요.\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003eThe Cloudflare CDN does not cache HTML or JSON by default.\u003c/p\u003e\n\u003cp\u003eCloudflare, Default cache behavior\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003cp\u003e이 문장은 HTML과 JSON이 기본 캐시 대상이 아니라는 뜻입니다. 공개 HTML은 Cache Rules로 캐시 대상에 포함할 수 있습니다. 실제 저장 여부에는 응답 헤더와 쿠키 등의 조건도 작용합니다. \u003ca href=\"https://developers.cloudflare.com/cache/concepts/default-cache-behavior/\"\u003eCloudflare 기본 캐시 동작\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e캐시는 저장해 둔 응답을 다시 사용하는 기능입니다. CDN에 연결했다고 모든 문서가 전 세계에 즉시 복제되지는 않습니다. Cloudflare는 요청을 처리하는 데이터센터에 콘텐츠를 캐시합니다. 캐시에 없는 요청은 원본 서버 조회가 필요할 수 있습니다. \u003ca href=\"https://developers.cloudflare.com/cache/get-started/\"\u003eCloudflare 캐시 시작 안내\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e공개 HTML에 캐시 규칙을 적용할 때는 개인화 페이지를 제외하세요. Cloudflare는 동적 HTML 캐시로 다른 사람의 정보가 전달될 수 있다고 경고합니다. 로그인이나 계정 페이지는 캐시하지 마세요. \u003ca href=\"https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/\"\u003eCloudflare Cache Everything 주의사항\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A1%B0%EA%B1%B4%EB%B3%84-%EC%BA%90%EC%8B%9C-%EC%A0%81%EC%9A%A9-%EA%B8%B0%EC%A4%80\" class=\"anchor\" id=\"페이지-조건별-캐시-적용-기준\"\u003e\u003c/a\u003e페이지 조건별 캐시 적용 기준\u003c/h2\u003e\n\u003cp\u003e방문자에게 같은 내용을 보여주는지가 캐시 범위의 출발점입니다. 공개 설명문은 공동으로 재사용하기 좋은 대상입니다. 로그인 상태에 따라 내용이 달라지는 응답은 별도로 처리해야 합니다.\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e페이지 조건\u003c/th\u003e\n\u003cth\u003e검토할 구성\u003c/th\u003e\n\u003cth\u003e함께 확인할 사항\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"페이지 조건\"\u003e방문자에게 동일한 설명문 제공\u003c/td\u003e\n\u003ctd data-label=\"검토할 구성\"\u003e정적 생성과 공개 HTML 캐시\u003c/td\u003e\n\u003ctd data-label=\"함께 확인할 사항\"\u003e수정 후 재생성·캐시 갱신\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"페이지 조건\"\u003e공개 본문에 자주 바뀌는 수치 포함\u003c/td\u003e\n\u003ctd data-label=\"검토할 구성\"\u003e본문과 변동 데이터의 갱신 방식 분리\u003c/td\u003e\n\u003ctd data-label=\"함께 확인할 사항\"\u003e수치의 기준 시점과 실패 시 표시\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"페이지 조건\"\u003e요청 시점의 최신 공개 정보 필요\u003c/td\u003e\n\u003ctd data-label=\"검토할 구성\"\u003e서버 렌더링과 조건부 캐시 검토\u003c/td\u003e\n\u003ctd data-label=\"함께 확인할 사항\"\u003e허용 가능한 정보 지연\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"페이지 조건\"\u003e로그인·계정·결제 화면\u003c/td\u003e\n\u003ctd data-label=\"검토할 구성\"\u003e공용 HTML 캐시에서 제외\u003c/td\u003e\n\u003ctd data-label=\"함께 확인할 사항\"\u003e인증 쿠키와 사용자별 응답\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"페이지 조건\"\u003e언어별 공개 문서 제공\u003c/td\u003e\n\u003ctd data-label=\"검토할 구성\"\u003e언어별 URL과 각 문서의 캐시\u003c/td\u003e\n\u003ctd data-label=\"함께 확인할 사항\"\u003e번역문 연결과 언어별 갱신\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003e실시간 데이터를 나중에 불러오면 정적 본문을 유지하기 쉽습니다. 그러나 검색에 필요한 핵심 내용을 전부 나중으로 미루지는 마세요. 초기 HTML을 제공하는 목적과 충돌할 수 있기 때문입니다.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%ED%9D%94%ED%95%9C-%EC%8B%A4%EC%88%98%EC%99%80-%ED%99%95%EC%9D%B8-%EA%B8%B0%EC%A4%80\" class=\"anchor\" id=\"흔한-실수와-확인-기준\"\u003e\u003c/a\u003e흔한 실수와 확인 기준\u003c/h2\u003e\n\u003cp\u003e기술 이름이나 설정 화면만으로 결과를 판단하면 오류를 놓치기 쉽습니다. 실제 HTML과 응답 헤더를 함께 확인하세요. 다음은 서로 구분해야 할 상태입니다.\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e흔한 판단\u003c/th\u003e\n\u003cth\u003e확인해야 할 기준\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"흔한 판단\"\u003eReact 사이트는 검색 로봇이 읽지 못함\u003c/td\u003e\n\u003ctd data-label=\"확인해야 할 기준\"\u003e초기 HTML과 Google의 렌더링 결과\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"흔한 판단\"\u003eTTFB 0.8초면 화면도 모두 표시됨\u003c/td\u003e\n\u003ctd data-label=\"확인해야 할 기준\"\u003e첫 응답 이후 본문 표시까지 걸리는 시간\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"흔한 판단\"\u003eCDN을 연결했으니 HTML도 캐시됨\u003c/td\u003e\n\u003ctd data-label=\"확인해야 할 기준\"\u003eHTML 요청의 캐시 상태\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"흔한 판단\"\u003e정적 파일이면 항상 최신 내용임\u003c/td\u003e\n\u003ctd data-label=\"확인해야 할 기준\"\u003e마지막 생성 시점과 배포된 내용\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"흔한 판단\"\u003e빠르게 응답하면 검색 등록도 완료됨\u003c/td\u003e\n\u003ctd data-label=\"확인해야 할 기준\"\u003eSearch Console의 색인 처리 상태\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"흔한 판단\"\u003e캐시 적중 결과 하나로 글로벌 속도를 판단함\u003c/td\u003e\n\u003ctd data-label=\"확인해야 할 기준\"\u003e접속 지역과 캐시 적중 여부별 측정 결과\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003eCloudflare의 \u003ccode\u003eCF-Cache-Status\u003c/code\u003e는 캐시 상태를 보여주는 헤더입니다. \u003ccode\u003eHIT\u003c/code\u003e는 캐시에서 응답을 찾았다는 뜻입니다. \u003ccode\u003eMISS\u003c/code\u003e는 요청 당시 캐시에 없어 원본에서 가져왔다는 뜻입니다. \u003ccode\u003eDYNAMIC\u003c/code\u003e은 캐시 대상으로 처리되지 않은 상태입니다. \u003ca href=\"https://developers.cloudflare.com/cache/concepts/cache-responses/\"\u003eCloudflare 캐시 응답 설명\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%EC%BD%98%ED%85%90%EC%B8%A0-%EC%88%98%EC%A0%95-%ED%9B%84-%EC%BA%90%EC%8B%9C-%EA%B0%B1%EC%8B%A0\" class=\"anchor\" id=\"콘텐츠-수정-후-캐시-갱신\"\u003e\u003c/a\u003e콘텐츠 수정 후 캐시 갱신\u003c/h2\u003e\n\u003cp\u003e정적 파일과 CDN 캐시는 수정 내용을 반영하는 경로까지 설계해야 합니다. 원본을 고쳐도 이전 캐시가 남으면 옛 내용이 전달됩니다. HTML과 JSON을 함께 발행한다면 두 형식의 내용도 맞춰야 합니다.\u003c/p\u003e\n\u003cp\u003e다음은 문서와 데이터 파일을 함께 운영할 때의 점검 순서입니다.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e원문 데이터에서 변경 내용을 확정하세요.\u003c/li\u003e\n\u003cli\u003e같은 변경본으로 HTML과 데이터 파일을 다시 생성하세요.\u003c/li\u003e\n\u003cli\u003e새 파일을 배포한 뒤 변경된 URL의 캐시를 갱신하세요.\u003c/li\u003e\n\u003cli\u003e각 URL을 다시 요청해 수정 내용이 일치하는지 확인하세요.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eCloudflare는 URL별 캐시 삭제를 권장합니다. 캐시 삭제는 저장된 응답을 제거하는 작업입니다. 정적 HTML을 새로 만드는 작업은 별도로 필요합니다. 따라서 파일 생성과 캐시 갱신을 같은 배포 절차에 연결하세요. \u003ca href=\"https://developers.cloudflare.com/cache/how-to/purge-cache/\"\u003eCloudflare 캐시 삭제 안내\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e갱신 간격은 콘텐츠가 허용하는 정보 지연에 맞춰 정하세요. 설명문과 실시간 수치에 같은 주기를 적용할 필요는 없습니다. 짧은 캐시 유효기간만으로 모든 갱신 문제를 해결할 수는 없습니다.\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%9D%98-hreflang-%EA%B8%B0%EC%A4%80\" class=\"anchor\" id=\"다국어-사이트의-hreflang-기준\"\u003e\u003c/a\u003e다국어 사이트의 hreflang 기준\u003c/h2\u003e\n\u003cp\u003e\u003ccode\u003ehreflang\u003c/code\u003e은 같은 콘텐츠의 언어·지역별 주소를 연결하는 정보입니다. 번역문을 만들어 주는 기능은 아닙니다. Google이 방문자에게 적절한 언어 버전을 찾도록 돕습니다.\u003c/p\u003e\n\u003cdiv class=\"overflow-x-auto\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003e구현 위치\u003c/th\u003e\n\u003cth\u003e표시 방법\u003c/th\u003e\n\u003cth\u003e선택할 때 확인할 점\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"구현 위치\"\u003eHTML\u003c/td\u003e\n\u003ctd data-label=\"표시 방법\"\u003e문서의 \u003ccode\u003ehead\u003c/code\u003e에 대체 언어 링크 표시\u003c/td\u003e\n\u003ctd data-label=\"선택할 때 확인할 점\"\u003e각 페이지 템플릿에서 관리 가능한지\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"구현 위치\"\u003eHTTP 헤더\u003c/td\u003e\n\u003ctd data-label=\"표시 방법\"\u003e응답의 \u003ccode\u003eLink\u003c/code\u003e 헤더에 표시\u003c/td\u003e\n\u003ctd data-label=\"선택할 때 확인할 점\"\u003e서버에서 헤더를 관리 가능한지\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd data-label=\"구현 위치\"\u003e사이트맵\u003c/td\u003e\n\u003ctd data-label=\"표시 방법\"\u003e언어별 URL 관계를 사이트맵에 표시\u003c/td\u003e\n\u003ctd data-label=\"선택할 때 확인할 점\"\u003e문서 목록을 일괄 관리 가능한지\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\u003cp\u003eGoogle은 이 방법들을 동등하게 취급합니다. 따라서 HTML 안에만 넣어야 하는 것은 아닙니다. 각 언어 문서는 자기 자신을 포함해 대체 언어 문서를 표시해야 합니다. 서로 대응하는 페이지 사이의 연결도 확인하세요. \u003ca href=\"https://developers.google.com/search/docs/specialty/international/localized-versions\"\u003eGoogle 다국어 페이지 안내\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#%EB%B0%B0%ED%8F%AC-%EA%B2%B0%EA%B3%BC-%ED%99%95%EC%9D%B8-%EC%88%9C%EC%84%9C\" class=\"anchor\" id=\"배포-결과-확인-순서\"\u003e\u003c/a\u003e배포 결과 확인 순서\u003c/h2\u003e\n\u003cp\u003e배포 후에는 본문 전달과 캐시 동작을 따로 검증하세요. 속도 측정값에는 측정 지역과 캐시 상태를 함께 남기세요. 다음 순서로 확인하면 문제 지점을 구분하기 쉽습니다.\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e브라우저 개발자 도구에서 HTML 문서 응답을 확인하세요. 핵심 본문이 응답에 포함되는지 살펴보세요.\u003c/li\u003e\n\u003cli\u003eSearch Console의 URL 검사에서 렌더링된 HTML을 확인하세요. 실제 색인 처리 상태도 별도로 점검하세요.\u003c/li\u003e\n\u003cli\u003eHTML 응답의 캐시 헤더를 확인하세요. Cloudflare에서는 \u003ccode\u003eCF-Cache-Status\u003c/code\u003e를 읽으세요.\u003c/li\u003e\n\u003cli\u003e주요 접속 지역에서 같은 문서를 측정하세요. 캐시에 없는 요청과 적중한 요청을 구분하세요.\u003c/li\u003e\n\u003cli\u003e콘텐츠를 수정한 뒤 갱신 결과를 확인하세요. 로그인 페이지가 캐시에서 제외되는지도 점검하세요.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eCloudflare는 과도한 동적 HTML 캐시가 로그인을 깨뜨릴 수 있다고 경고합니다. 로그인 폼과 인증된 페이지는 캐시하지 마세요. 수정 후에는 인증 쿠키가 유지되는지도 확인하세요. \u003ca href=\"https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/\"\u003eCloudflare 로그인 문제 안내\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n\u003ca href=\"#ai-%EC%BD%94%EB%94%A9%EC%97%90-%EC%A0%84%EB%8B%AC%ED%95%A0-%EA%B5%AC%ED%98%84-%EC%A1%B0%EA%B1%B4\" class=\"anchor\" id=\"ai-코딩에-전달할-구현-조건\"\u003e\u003c/a\u003eAI 코딩에 전달할 구현 조건\u003c/h2\u003e\n\u003cp\u003eAI에게는 기술 이름과 함께 검증 가능한 결과를 요청하세요. 초기 HTML의 내용과 캐시 제외 범위를 명시하는 방식이 유용합니다. 아래 문구는 공개 지식 페이지를 만드는 경우의 요청 예시입니다.\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e\u003cspan\u003e공개 지식 페이지의 핵심 본문을 초기 HTML에 포함하세요.\n\u003c/span\u003e\u003cspan\u003e공개 문서는 정적 생성을 우선 검토하세요.\n\u003c/span\u003e\u003cspan\u003e변동 데이터의 갱신 방식을 별도로 설명하세요.\n\u003c/span\u003e\u003cspan\u003eCDN의 HTML 캐시 적용 여부를 확인하세요.\n\u003c/span\u003e\u003cspan\u003e로그인·계정·결제 페이지는 공용 캐시에서 제외하세요.\n\u003c/span\u003e\u003cspan\u003e콘텐츠 수정 시 정적 파일 재생성과 캐시 갱신을 연결하세요.\n\u003c/span\u003e\u003cspan\u003e다국어 페이지가 있으면 hreflang 연결을 구성하세요.\n\u003c/span\u003e\u003cspan\u003e초기 HTML, 캐시 상태, 수정 반영 여부의 확인 방법을 제시하세요.\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\n","tags":["AI 개발","콘텐츠 수익화","기술전략","개발 도구"],"faqs":[{"question":"저관여웹은 특정 프레임워크로 만들어야 하나요?","answer":"특정 프레임워크가 필수인 것은 아닙니다. 핵심 본문이 초기 HTML에 포함되는지 확인하세요. 공개 콘텐츠의 캐시와 갱신 방식도 함께 검토해야 합니다."},{"question":"Google은 JavaScript를 실행하지 않나요?","answer":"Google은 Chromium으로 JavaScript를 실행합니다. 다만 렌더링 대기와 차단된 리소스가 처리에 영향을 줄 수 있습니다. 초기 HTML에 본문을 담으면 추가 실행에 대한 의존을 줄일 수 있습니다."},{"question":"React로 만든 사이트도 정적 생성이 가능한가요?","answer":"React에서도 정적 HTML을 생성할 수 있습니다. 서버에서 HTML을 만드는 방식도 지원합니다. React 사용 여부만으로 초기 HTML의 내용을 판단할 수는 없습니다."},{"question":"TTFB 0.8초 이하면 페이지가 모두 열린 것인가요?","answer":"TTFB는 첫 응답 바이트가 도착하기까지의 시간입니다. 이미지 다운로드와 화면 구성은 이후에도 이어질 수 있습니다. 페이지 전체 로딩 시간과 구분해야 합니다."},{"question":"TTFB 0.8초를 넘으면 Google 검색에서 제외되나요?","answer":"0.8초는 web.dev가 제시한 대략적인 성능 목표입니다. 이를 넘으면 검색에서 제외된다는 규칙은 아닙니다. 지속적인 응답 지연과 서버 오류는 수집 용량에 영향을 줄 수 있습니다."},{"question":"한국 서버를 쓰면 글로벌 사이트에 불리한가요?","answer":"멀리 떨어진 접속자에게는 네트워크 지연이 발생할 수 있습니다. 그러나 위치만으로 특정 응답 시간을 단정할 수는 없습니다. 주요 접속 지역의 실제 측정값으로 판단하세요."},{"question":"Cloudflare를 연결하면 HTML도 자동으로 캐시되나요?","answer":"Cloudflare CDN은 기본적으로 HTML과 JSON을 캐시하지 않습니다. 공개 HTML에 적용할 Cache Rules를 확인하세요. 규칙 적용 후에는 응답 헤더로 실제 캐시 상태를 점검해야 합니다."},{"question":"CDN 캐시에 없는 첫 요청도 항상 빠른가요?","answer":"캐시에 없는 요청은 원본 서버에서 응답을 가져와야 할 수 있습니다. 따라서 캐시 적중 요청과 지연 시간이 다를 수 있습니다. 두 상태를 나눠 측정하세요."},{"question":"로그인 페이지에도 HTML 캐시를 적용해도 되나요?","answer":"로그인 페이지와 인증된 HTML은 캐시하지 마세요. Cloudflare는 과도한 캐시가 로그인 동작을 깨뜨릴 수 있다고 경고합니다. 사용자별 정보가 다른 방문자에게 전달될 위험도 있습니다."},{"question":"정적 사이트의 글을 수정했는데 이전 내용이 보이면 어떻게 하나요?","answer":"새 HTML이 생성되고 배포됐는지 먼저 확인하세요. 이후 변경된 URL의 CDN 캐시를 갱신하세요. 캐시 삭제만으로 정적 파일이 다시 생성되지는 않습니다."},{"question":"hreflang은 HTML에만 넣어야 하나요?","answer":"Google은 HTML, HTTP 헤더, 사이트맵 방식을 지원합니다. 세 방법은 Google 관점에서 동등합니다. 운영하기 편한 방식을 선택해 언어별 연결을 일관되게 유지하세요."},{"question":"사이트가 작아도 크롤링 예산을 집중 관리해야 하나요?","answer":"Google의 크롤링 예산 안내는 주로 크고 자주 갱신되는 사이트를 대상으로 합니다. 페이지가 많지 않다면 사이트맵 갱신과 색인 보고서 확인부터 시작하세요. 서버 오류나 본문 누락이 있다면 해당 문제를 먼저 해결하세요."}],"sources":[{"url":"https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics","title":"Google Search Central: Understand the JavaScript SEO basics","type":"source"},{"url":"https://web.dev/articles/rendering-on-the-web","title":"web.dev: Rendering on the web","type":"source"},{"url":"https://web.dev/articles/ttfb","title":"web.dev: Time to First Byte (TTFB), 2025년 11월 18일 갱신","type":"data_point"},{"url":"https://developers.google.com/crawling/docs/crawlers-fetchers/overview-google-crawlers?hl=en","title":"Google: Overview of Google crawlers and fetchers","type":"source"},{"url":"https://developers.google.com/crawling/docs/crawl-budget","title":"Google: Optimize your crawl budget","type":"source"},{"url":"https://developers.cloudflare.com/cache/concepts/default-cache-behavior/","title":"Cloudflare: Default cache behavior","type":"source"},{"url":"https://developers.cloudflare.com/cache/get-started/","title":"Cloudflare Cache: Get started","type":"source"},{"url":"https://developers.cloudflare.com/cache/how-to/cache-rules/examples/cache-everything/","title":"Cloudflare: Cache Level (Cache Everything)","type":"source"},{"url":"https://developers.cloudflare.com/cache/concepts/cache-responses/","title":"Cloudflare cache responses","type":"source"},{"url":"https://developers.cloudflare.com/cache/how-to/purge-cache/","title":"Cloudflare: Purge cache","type":"source"},{"url":"https://developers.cloudflare.com/cache/troubleshooting/dynamic-content-and-login-issues/","title":"Cloudflare: Dynamic content and login issues","type":"source"},{"url":"https://developers.google.com/search/docs/specialty/international/localized-versions","title":"Google Search Central: Tell Google about localized versions of your page","type":"source"}],"images":[{"id":2451,"url":"https://injoys.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzgxNjYsInB1ciI6ImJsb2JfaWQifX0=--3301cc345476b9a82de57f9e5bdbad57a8717225/ai-cace8faa.webp","is_representative":true,"generation_method":"ai_photo","license":"ai_generated","mime_type":"image/webp","width":1536,"height":1024,"translations":{"ko":{"alt":"보라색 케이블이 정돈된 서버 랙 옆에서 장비 상태를 살펴보는 남성","caption":"공개 페이지의 HTML 캐시는 적용 범위와 콘텐츠 수정 후 갱신 정책을 함께 설계해야 합니다.","description":null},"en":{"alt":"A man inspecting a server rack with neatly bundled purple cables","caption":"HTML caching for public pages requires defining both its scope and how it is refreshed after content changes.","description":null},"ja":{"alt":"紫色のケーブルが整然と束ねられたサーバーラックの横で機器を確認する男性","caption":"公開ページのHTMLキャッシュは、適用範囲とコンテンツ変更後の更新方針を併せて設計する必要があります。","description":null},"es":{"alt":"Un hombre revisa un rack de servidores con cables morados ordenados en haces","caption":"La caché HTML de las páginas públicas requiere definir su alcance y cómo se actualizará tras modificar el contenido.","description":null},"id":{"alt":"Seorang pria memeriksa rak server dengan kabel ungu yang tertata rapi","caption":"Cache HTML untuk halaman publik memerlukan penetapan cakupan dan kebijakan pembaruan setelah konten diubah.","description":null},"pt":{"alt":"Um homem inspeciona um rack de servidores com cabos roxos organizados em feixes","caption":"O cache HTML de páginas públicas exige definir seu escopo e como será atualizado após alterações no conteúdo.","description":null},"zh-hant":{"alt":"一名男子在伺服器機架旁檢查設備，機架內的紫色線纜整齊成束","caption":"公開頁面的 HTML 快取需要同時規劃適用範圍與內容修改後的更新政策。","description":null},"de":{"alt":"Ein Mann prüft ein Serverrack mit ordentlich gebündelten violetten Kabeln","caption":"Für den HTML-Cache öffentlicher Seiten müssen der Geltungsbereich und die Aktualisierung nach Inhaltsänderungen festgelegt werden.","description":null}}},{"id":2452,"url":"https://injoys.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzgxNzIsInB1ciI6ImJsb2JfaWQifX0=--6d794cafac94909fa4ac95705b51dc5bde79c2df/ai-9e2e0147.webp","is_representative":false,"generation_method":"ai_semi","license":"ai_generated","mime_type":"image/webp","width":1536,"height":1024,"translations":{"ko":{"alt":"두 태블릿의 웹페이지를 비교하는 여성과 문서 갱신이 두 브라우저로 이어지는 도식","caption":"콘텐츠 수정 후에는 재생성한 HTML이 캐시에도 반영됐는지 확인해야 합니다.","description":null},"en":{"alt":"A woman compares web pages on two tablets beside a diagram linking a document refresh to two browser windows.","caption":"After content changes, verify that the cache also reflects the regenerated HTML.","description":null},"ja":{"alt":"2台のタブレットでウェブページを比較する女性と、文書の更新から2つのブラウザーへつながる図","caption":"コンテンツの修正後は、再生成したHTMLがキャッシュにも反映されているか確認する必要があります。","description":null},"es":{"alt":"Una mujer compara páginas web en dos tabletas junto a un diagrama de actualización de un documento.","caption":"Tras modificar el contenido, hay que comprobar que la caché también refleje el HTML regenerado.","description":null},"id":{"alt":"Seorang perempuan membandingkan halaman web di dua tablet di samping diagram pembaruan dokumen.","caption":"Setelah konten diubah, pastikan cache juga mencerminkan HTML yang dibuat ulang.","description":null},"pt":{"alt":"Uma mulher compara páginas web em dois tablets ao lado de um diagrama de atualização de um documento.","caption":"Após alterar o conteúdo, é preciso verificar se o cache também reflete o HTML regenerado.","description":null},"zh-hant":{"alt":"一名女性比較兩台平板上的網頁，旁邊的圖示呈現文件更新後連向兩個瀏覽器視窗","caption":"修改內容後，應確認快取也已反映重新產生的 HTML。","description":null},"de":{"alt":"Eine Frau vergleicht Webseiten auf zwei Tablets neben einem Diagramm zur Dokumentaktualisierung.","caption":"Nach Inhaltsänderungen muss geprüft werden, ob auch der Cache das neu generierte HTML enthält.","description":null}}},{"id":2453,"url":"https://injoys.com/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzgxNzgsInB1ciI6ImJsb2JfaWQifX0=--3b3693ee720bca62a630e0123f3ac6079ea93817/ai-c6b83fb6.webp","is_representative":false,"generation_method":"ai_infographic","license":"ai_generated","mime_type":"image/webp","width":1024,"height":1536,"visible_locales":["ko"],"translations":{"ko":{"alt":"초기 HTML, 정적 생성과 캐시 전달, 첫 응답 시간, 공개 페이지 캐시, 수정 후 갱신을 정리한 5단계 기술 점검표","caption":"기술 설계에서는 초기 HTML의 본문과 CDN의 HTML 캐시 전달을 함께 점검해야 합니다.","description":null},"en":{"alt":"Five-part checklist covering initial HTML, static generation, response time, public-page caching and updates.","caption":"Technical design must address both the content in the initial HTML and the CDN’s delivery of cached HTML.","description":null},"ja":{"alt":"初期HTML、静的生成とキャッシュ配信、初回応答時間、公開ページのキャッシュ、修正後の更新をまとめた5項目の技術チェックリスト","caption":"技術設計では、初期HTMLの本文とCDNによるHTMLキャッシュの配信を併せて確認する必要があります。","description":null},"es":{"alt":"Lista de cinco puntos sobre HTML inicial, generación estática, tiempo de respuesta, caché pública y actualizaciones.","caption":"El diseño técnico debe revisar tanto el contenido del HTML inicial como la entrega del HTML en caché por la CDN.","description":null},"id":{"alt":"Lima poin pemeriksaan: HTML awal, pembuatan statis, waktu respons, cache halaman publik, dan pembaruan.","caption":"Desain teknis perlu memeriksa konten dalam HTML awal sekaligus pengiriman HTML yang di-cache oleh CDN.","description":null},"pt":{"alt":"Lista de cinco pontos sobre HTML inicial, geração estática, tempo de resposta, cache público e atualizações.","caption":"O projeto técnico deve verificar tanto o conteúdo do HTML inicial quanto a entrega do HTML em cache pela CDN.","description":null},"zh-hant":{"alt":"五項技術檢查清單，涵蓋初始 HTML、靜態生成與快取傳送、首次回應時間、公開頁面快取及修改後更新","caption":"技術設計須同時檢查初始 HTML 的內文，以及 CDN 的 HTML 快取傳送。","description":null},"de":{"alt":"Fünfteilige Infografik zu initialem HTML, statischer Generierung, Antwortzeit, öffentlichem Cache und Aktualisierung.","caption":"Die technische Planung muss sowohl den Inhalt des initialen HTML als auch die Auslieferung von HTML aus dem CDN-Cache prüfen.","description":null}}}],"published_at":"2026-11-05T07:45:55+09:00","updated_at":"2026-11-05T07:45:55+09:00","license":"cc_by","translation_status":"original","available_locales":["ko","en","ja","es"],"data_locales":["ko","en","ja","es","id","pt","zh-hant","de"],"url":"https://injoys.com/ko/articles/low-involvement-web-static-generation-html-cache"}