rendering
How Google's Web rendering Service runs Anda JavaScript untuk bangun halaman ini indeks — plus rendering options (CSR, SSR, SSG, hydration, ISR, edge, dynamic) dan mereka SEO trade-offs.
Bahasa
1 sinyal bukti di halaman ini
- Alat aktif terkaitRaw vs. Rendered HTML Checker
rendering adalah langkah where Google runs Anda JavaScript di sebuah evergreen, headless Chrome — Web rendering Service — untuk bangun DOM ini indeks. ini happens untuk essentially setiap halaman, biasanya di dalam seconds-untuk-minutes, so old 'two waves dari pengindeksan' model adalah largely outdated dan there's no per-halaman render budget. renderer adalah stateless, doesn't interact dengan halaman, dan caches hard. Anda rendering option decides Anda SEO risk: SSR, static/prerendering, dan hydration adalah safe; full rendering sisi klien adalah risky one; dynamic rendering adalah sebuah workaround.
TL;DR — rendering adalah langkah where sebuah mesin pencari runs Anda halaman’s code — including JavaScript — di sebuah browser untuk bangun finished halaman, so ini dapat see Anda konten dan tautan. Google melakukan ini untuk basically setiap halaman di -nya Web rendering Service, dan ini biasanya berfungsi. How Anda situs produces -nya HTML (server, browser, atau di bangun time) decides how safe Anda adalah.
What rendering adalah
When Anda open sebuah halaman, Anda browser downloads beberapa HTML, lalu runs CSS dan JavaScript untuk bangun halaman Anda actually see. mesin pencari melakukan yang sama thing. rendering adalah langkah where sebuah mesin pencari runs Anda halaman’s code untuk bangun akhir versi dari halaman, so ini dapat read konten dan ikuti tautan cara Anda dapat.
ini sits di middle dari how Google handles sebuah halaman:
- crawl — Google downloads raw HTML dari Anda URL.
- Render — Google runs halaman’s JavaScript di sebuah browser untuk bangun finished halaman.
- indeks — Google reads itu finished halaman dan files ini away.
jika Anda konten hanya menampilkan up setelah JavaScript runs, Google memiliki untuk render halaman successfully sebelum ini dapat see ini. So rendering adalah bridge antara fetching sebuah halaman dan understanding ini.
Google renders di sebuah nyata (tetapi unusual) browser
Google’s renderer adalah called Web rendering Service (WRS). ini adalah sebuah headless Chrome itu’s “evergreen,” (terjemahan) “evergreen,” meaning ini mempertahankan up dengan saat ini versi dari Chrome dan mendukung modern web fitur. So old fear — “Google can’t run JavaScript” (terjemahan) “Google dapat’t run JavaScript” — isn’t benar. ini dapat. Evidence for this claim Google Search runs JavaScript with an evergreen version of Chromium. Scope: Google's Web Rendering Service; browser support does not guarantee that every application-specific interaction or resource will work. Confidence: high · Verified: Google Search Central: Fix Search-related JavaScript problems
ini adalah hanya sebuah unusual browser. ini doesn’t scroll atau click, ini forgets everything antara halaman (no staying logged di), dan ini caches files hard. itu quirks adalah where sebagian besar surprises come dari, dan Advanced tab covers them.
big choice: where Anda HTML gets dibangun
single sebagian besar penting decision untuk SEO adalah where Anda halaman’s HTML adalah produced:
- di browser (rendering sisi klien) — server mengirim sebuah near-empty halaman dan JavaScript membangun everything. Riskiest untuk search.
- pada server (rendering sisi server) — server mengirim sebuah complete halaman. Safe.
- di bangun time (static / prerendering) — halaman adalah dibangun once, ahead dari time. Safest dan fastest.
sebagian besar modern frameworks mix ini. aturan dari thumb: jika Anda penting konten adalah di HTML sebelum apa pun JavaScript runs (atau arrives almost immediately), Anda’re di baik shape.
ingin deeper versi — how Web rendering Service actually behaves, whether “two waves of indexing” (terjemahan) “two waves dari pengindeksan” adalah masih sebuah thing, dan sebuah full comparison dari setiap rendering option? Switch untuk Advanced tab. untuk practical JavaScript masalah dan fixes, see JavaScript SEO.
TL;DR — Google renders Anda JS di sebuah evergreen, headless Chromium — Web rendering Service — untuk bangun DOM ini indeks. ini happens untuk essentially semua halaman, biasanya di dalam seconds-untuk-minutes, so “two waves of indexing” (terjemahan) “two waves dari pengindeksan” adalah largely outdated dan there’s no per-halaman render budget. WRS adalah stateless, declines permission prompts, doesn’t interact dengan halaman, dan caches aggressively. Anda rendering option decides Anda SEO risk: SSR / static / prerendering / hydration adalah rendah-risk; full CSR adalah risky one; dynamic rendering adalah sebuah workaround Google advises terhadap. untuk practical JS masalah ini membuat, see JavaScript SEO.
Where rendering sits
Google adalah explicit itu JavaScript apps move melalui three phases: “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” (terjemahan) “Google processes JavaScript web apps di three main phases: 1. crawling 2. rendering 3. pengindeksan.” Evidence for this claim Google documents crawling, rendering, and indexing as the three main phases for processing JavaScript web apps. Scope: Google Search processing of JavaScript web applications; the phases can overlap operationally. Confidence: high · Verified: Google Search Central: Understand the JavaScript SEO basics rendering adalah bridge. crawling fetches raw HTML; rendering runs JavaScript untuk bangun finished DOM; pengindeksan reads itu rendered DOM, dan apa pun baru tautan renderer menemukan get fed back ke crawling. di Google’s kata: “During the crawl, Google renders the page and runs any JavaScript it finds using a recent version of Chrome, similar to how your browser renders pages you visit.” (terjemahan) “selama crawl, Google renders halaman dan runs apa pun JavaScript ini menemukan menggunakan sebuah recent versi dari Chrome, similar untuk how Anda browser renders halaman Anda visit.”
Google crawls a URL, renders its JavaScript to build the DOM, and indexes the result. Four practical failure modes branch from rendering: parity when the rendered DOM differs from expectations, interaction when content requires a scroll or click, state when content relies on cleared cookies or storage, and timing when content is deferred behind slow JavaScript.
© Patrick Stox LLC · CC BY 4.0 ·
Web rendering Service
Google renders di Web rendering Service (WRS) — sebuah headless Chrome itu’s evergreen: “While Google Search runs JavaScript with an evergreen version of Chromium…” (terjemahan) “While Google Search runs JavaScript dengan sebuah evergreen versi dari Chromium…” ini tracks saat ini Chrome, so modern JavaScript dan CSS fitur berfungsi.
catch adalah itu WRS adalah sebuah peculiar browser, dan -nya quirks cause sebagian besar nyata masalah:
- ini adalah stateless. sebagai I put ini di my JavaScript SEO guide, “Google loads each page stateless like it’s a fresh load.” (terjemahan) “Google memuat setiap halaman stateless like ini adalah sebuah fresh muat.” Google’s docs spell out pieces: “Local Storage and Session Storage data are cleared across page loads” (terjemahan) “Local Storage dan Session Storage data adalah cleared di seluruh halaman memuat” dan “HTTP Cookies are cleared across page loads.” (terjemahan) “HTTP Cookies adalah cleared di seluruh halaman memuat.” Don’t rely pada anything persisted client-side untuk sajikan Anda konten.
- ini declines permissions. “Expect Googlebot to decline user permission requests.” (terjemahan) “Expect Googlebot untuk decline pengguna permission permintaan.” konten gated behind sebuah geolocation, notification, atau camera prompt won’t render.
- ini doesn’t interact. No scrolling, clicking, atau hovering — so konten itu hanya memuat pada one dari itu events adalah invisible oleh default. (ini adalah root dari sebagian besar lazy-muat dan infinite-scroll bugs; fixes live pada JavaScript SEO halaman.)
- ini caches aggressively. “Googlebot caches aggressively in order to reduce
network requests and resource usage. WRS may ignore caching headers.” (terjemahan) “Googlebot caches aggressively di order untuk reduce
network permintaan dan resource usage. WRS dapat ignore caching headers.” itu berarti
Google dapat run sebuah outdated versi dari Anda JS atau CSS. Fix ini dengan file
fingerprinting — versi Anda filenames (
app.4f2a9c.js) so sebuah konten perubahan forces sebuah fresh fetch.
sebuah 2026 experiment: five seconds adalah not sebuah hard execution wall
sebuah ketiga-party WRS experiment reported di July 2026 tested delayed JavaScript dan network activity alih-alih assuming sebuah five-kedua timeout. observed renderer digunakan sebuah virtual clock dan completed delayed permintaan itu took roughly 6–12 seconds dari nyata time. berguna hasil adalah narrow: ini contradicts umum audit aturan itu anything occurring setelah exactly five seconds adalah automatically invisible untuk Google. ini melakukan not prove itu setiap delayed dependency akan finish, itu Google waits indefinitely, atau itu slow client-side delivery adalah safe.
Read experiment dan -nya methodology sebagai ketiga-party evidence alongside Google’s official statement itu render-queue timing memiliki no published fixed delay. dalam praktik, test akhir DOM dan requested resources. sebuah missing API respons, interaction requirement, blocked script, atau state dependency remains sebuah nyata rendering failure bahkan when sebuah stopwatch-based “five-kedua aturan” adalah not.
adalah “two waves of indexing” (terjemahan) “two waves dari pengindeksan” masih sebuah thing?
untuk years mental model adalah “two waves of indexing” (terjemahan) “two waves dari pengindeksan”: Google akan indeks raw HTML pertama, lalu come back days atau weeks later untuk render dan indeks JavaScript konten. itu model adalah now largely outdated. Martin Splitt memiliki said two-waves idea plays less dan less dari sebuah role, itu banyak halaman go melalui render phase bahkan when mereka don’t rely pada JavaScript, dan itu crawling, rendering, dan pengindeksan adalah converging di atas time.
dalam praktik, rendering happens untuk essentially setiap halaman, dan ini adalah biasanya fast. Google’s saat ini documentation says sebuah di-crawl halaman “may stay on this queue for a few seconds, but it can take longer than that” (terjemahan) “dapat stay pada ini queue untuk sebuah few seconds, tetapi ini dapat take longer daripada itu” — there’s no published fixed delay atau timeout. Evidence for this claim Google says a crawled page may stay on the rendering queue for a few seconds, but it can take longer than that. Scope: Google's rendering queue for a page that returns a 200 status and is eligible for rendering. The source gives a variable duration, not a fixed timeout or service-level guarantee. Confidence: high · Verified: Google Search Central: rendering-queue duration Supports: A page may remain on the rendering queue for a few seconds or longer. sebagai sebuah historical data poin, Google staff (Martin Splitt dan Tom Greenaway) once put figure di sebuah median dari tentang five seconds, dengan 90th percentile di minutes — not “weeks” (terjemahan) “weeks” old fear implied. I cite itu figure di my JavaScript SEO guide, tetapi treat ini sebagai sebuah dated conference data poin alih-alih sebuah saat ini published metric — Google hasn’t republished ini sebagai sebuah ongoing angka, dan queue-timing quote above adalah saat ini official framing.
dan there’s no render budget di cara people imagine. Google doesn’t track sebuah per-halaman “how expensive was this to render” (terjemahan) “how expensive adalah ini untuk render” score Anda perlu conserve. rendering adalah cheap di Google’s scale — mengoptimalkan untuk Anda pengguna dan performa, not sebuah phantom render budget.
rendering options
“Where is the HTML built?” (terjemahan) “Where adalah HTML dibangun?” adalah pertanyaan itu decides Anda SEO risk. full menu:
Static generation produces HTML at build time. Server-side rendering produces it per request. Client-side rendering relies on browser JavaScript. Hydration attaches client behavior to server or static HTML. Dynamic rendering varies output by requester and is treated as a workaround.
© Patrick Stox LLC · CC BY 4.0 ·
- rendering sisi klien (CSR). server mengirim sebuah near-empty shell; browser (atau WRS) runs JavaScript untuk bangun everything. ini adalah “the most problematic one … full client-side rendering where all of the rendering happens in the browser.” (terjemahan) “paling problematic one … full rendering sisi klien where semua dari rendering happens di browser.” ini dapat berfungsi, tetapi Anda’re betting everything pada render succeeding, dan ini adalah slowest untuk get terindeks.
- rendering sisi server (SSR). server membangun full HTML untuk setiap permintaan. konten adalah di raw HTML, so ini adalah rendah-risk untuk search.
- Static situs generation (SSG) / prerendering. HTML adalah dibangun once di deploy time. Lowest risk — konten adalah di raw HTML dan ini adalah fast.
- Hydration (isomorphic / universal). Anda SSR atau SSG pertama paint, lalu JavaScript “hydrates” (terjemahan) “hydrates” ini di browser untuk tambahkan interactivity. ini adalah what sebagian besar modern frameworks melakukan, dan ini adalah rendah-risk untuk konten — hanya watch untuk hydration mismatches itu blank out atau replace konten.
- Incremental Static Regeneration (ISR). Static halaman regenerated pada sebuah schedule atau pada demand. Like SSG, dengan fresher konten — baik untuk besar catalogs.
- Edge rendering. SSR run di CDN edge nodes — sama rendah risk sebagai SSR, dengan faster time-untuk-pertama-byte untuk sebuah global audience.
- Streaming SSR. HTML streamed untuk browser di chunks sebagai ini adalah ready. rendah-risk, tetapi pastikan dapat diindeks konten isn’t trapped hanya di sebuah late atau deferred chunk.
My bottom line dari my JavaScript SEO guide: “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” (terjemahan) “apa pun jenis dari SSR, static rendering, dan prerendering setup adalah going untuk menjadi fine untuk mesin pencari. Gatsby, Next, Nuxt, etc., adalah semua great.” framework penting less daripada rendering mode Anda ship — yang sama Next.js app adalah safe atau risky depending pada whether Anda sajikan SSR/SSG atau full CSR.
Dynamic rendering — sebuah workaround, not sebuah strategy
Dynamic rendering berarti detecting bot dan serving them sebuah prerendered, JavaScript-free versi while pengguna get client-side versi. Google adalah now blunt tentang ini: “Dynamic rendering was a workaround and not a long-term solution for problems with JavaScript-generated content in search engines,” (terjemahan) “Dynamic rendering adalah sebuah workaround dan not sebuah panjang-istilah solusi untuk masalah dengan JavaScript-generated konten di mesin pencari,” dan “Dynamic rendering is a workaround and not a recommended solution, because it creates additional complexities and resource requirements.” (terjemahan) “Dynamic rendering adalah sebuah workaround dan not sebuah recommended solusi, because ini membuat additional complexities dan resource requirements.” Evidence for this claim Google describes dynamic rendering as a workaround and does not recommend it as a long-term solution. Scope: Google Search guidance for JavaScript-generated content; server-side rendering, static rendering, or hydration are the recommended alternatives. Confidence: high · Verified: Google Search Central: Dynamic rendering as a workaround I agree, dan I selalu memiliki — untuk menjadi honest I tidak pernah recommended ini, dan I’m glad Google now recommends terhadap ini too. ini adalah serving berbeda konten untuk bot dan pengguna, which adalah awfully close untuk cloaking. Reach untuk SSR, static, atau hydration instead.
One wrinkle: Bing masih suggests dynamic rendering. Microsoft says “bingbot is generally able to render JavaScript” (terjemahan) “bingbot adalah umumnya able untuk render JavaScript” tetapi itu doing ini di scale adalah hard, so “we recommend dynamic rendering as a great alternative for websites relying heavily on JavaScript.” (terjemahan) “kami recommend dynamic rendering sebagai sebuah great alternative untuk situs web relying heavily pada JavaScript.” practical takeaway: SSR/SSG mempertahankan both mesin happy dan sidesteps whole debate.
What ini berarti untuk Anda konten
rendering decides whether Google ever sees Anda JavaScript konten — tetapi seeing ini adalah
hanya half job. Once halaman adalah rendered, practical concerns adalah nyata <a href>
tautan, field-spesifik parity antara raw dan rendered HTML, robots-directive stage order, lazy
konten, infinite scroll, dan soft-404s. itu semua live pada
JavaScript SEO halaman, dengan testing
workflow (pemeriksaan URL’s rendered HTML, screenshot, dan console).
ini adalah rendering stage dari search pipeline. untuk stages sekitar ini, see crawling (how halaman get fetched) dan pengindeksan (what happens untuk rendered halaman next), atau How Search berfungsi hub untuk whole journey.
One audit aturan adalah worth keeping here: rendered adalah sebuah state, not sebuah universal winner.
untuk body konten dan dapat di-crawl tautan, rendered DOM menampilkan what successful JavaScript
ditambahkan atau dihapus. untuk judul dan deskripsi, ini menampilkan additional inputs, while Google
dapat masih generate sebuah judul tautan atau snippet dari lainnya sources. untuk robots directives, sebuah
raw noindex dapat mencegah rendering, so JavaScript removal adalah asymmetric. untuk canonical,
Google advises menggunakan one source atau one JavaScript-set nilai alih-alih changing sebuah
existing nilai. dan JavaScript cannot perubahan respons HTTP status sudah diterima.
pertahankan itu columns separate di evidence dan gunakan Google’s saat ini JavaScript SEO
guidance
untuk field-spesifik perilaku.
AI summary
sebuah condensed take pada Advanced versi:
- rendering = bridge dari crawling untuk pengindeksan. Google runs Anda JS di sebuah evergreen, headless Chromium — Web rendering Service — untuk bangun DOM ini indeks. Three phases: crawl → render → indeks.
- “Two waves of indexing” (terjemahan) “Two waves dari pengindeksan” adalah largely outdated (Splitt). rendering happens untuk essentially semua halaman, biasanya fast. Google’s saat ini docs say sebuah halaman “may stay on this queue for a few seconds, but it can take longer than that” (terjemahan) “dapat stay pada ini queue untuk sebuah few seconds, tetapi ini dapat take longer daripada itu” — no fixed delay adalah published. (sebuah ~5s median/minutes-90th-percentile figure exists, tetapi ini adalah sebuah dated conference data poin, not sebuah saat ini metric.) ada no per-halaman render budget.
- ** WRS adalah sebuah weird browser:** stateless (localStorage/cookies cleared antara memuat), declines permission prompts, melakukan not scroll/click/hover, dan caches JS/CSS aggressively (dapat ignore cache headers) → fingerprint Anda filenames.
- rendering options, oleh SEO risk: SSG/prerender (lowest) ≈ SSR ≈ hydration ≈ ISR ≈ edge/streaming (rendah) ≪ full CSR (highest). Patrick: “SSR, static rendering, and prerendering … are all great” (terjemahan) “SSR, static rendering, dan prerendering … adalah semua great”; full CSR adalah “the most problematic one.” (terjemahan) “paling problematic one.”
- Dynamic rendering adalah sebuah workaround, Google advises terhadap ini (close untuk cloaking). Bing masih recommends ini — tetapi SSR/SSG satisfies both.
- ** framework doesn’t decide risk — rendering mode melakukan.** yang sama app adalah safe atau risky depending pada whether Anda ship SSR/SSG atau full CSR.
- rendering adalah half job — practical JS masalah (tautan, parity, lazy konten, infinite scroll, soft-404s, testing) adalah covered pada JavaScript SEO halaman.
Official documentation
Primary-source documentation dari mesin pencari.
- memahami JavaScript SEO basics — three phases (crawl → render → indeks) dan evergreen Chromium renderer.
- Fix Search-related JavaScript masalah — WRS constraints: stateless storage/cookies, declined permissions, aggressive caching.
- Dynamic rendering sebagai sebuah workaround — why dynamic rendering adalah sebuah workaround, not sebuah recommended panjang-istilah solusi.
- di-Depth Guide untuk How Google Search berfungsi — where rendering sits di crawl → indeks → sajikan.
Bing / Microsoft
- bingbot Series: JavaScript, Dynamic rendering, dan Cloaking. Oh My! — Bing’s stance itu ini dapat render JS tetapi recommends dynamic rendering di scale.
- baru evergreen Bingbot — Bingbot rendering pada Chromium-based Microsoft Edge.
Quotes dari source
pada—record statements dari Google dan Bing (plus sebuah few dari my own writing). setiap search-mesin tautan adalah sebuah deep tautan itu jumps untuk quoted passage pada source halaman.
Google — render pipeline
- “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” (terjemahan) “Google processes JavaScript web apps di three main phases: 1. crawling 2. rendering 3. pengindeksan.” Jump untuk quote
- “During the crawl, Google renders the page and runs any JavaScript it finds using a recent version of Chrome, similar to how your browser renders pages you visit.” (terjemahan) “selama crawl, Google renders halaman dan runs apa pun JavaScript ini menemukan menggunakan sebuah recent versi dari Chrome, similar untuk how Anda browser renders halaman Anda visit.” Jump untuk quote
- “While Google Search runs JavaScript with an evergreen version of Chromium…” (terjemahan) “While Google Search runs JavaScript dengan sebuah evergreen versi dari Chromium…” Jump untuk quote
- “The page may stay on this queue for a few seconds, but it can take longer than that.” (terjemahan) “ halaman dapat stay pada ini queue untuk sebuah few seconds, tetapi ini dapat take longer daripada itu.” — saat ini official framing pada render-queue timing; no fixed delay adalah published. Jump untuk quote
Google — Web rendering Service
- “Local Storage and Session Storage data are cleared across page loads.” (terjemahan) “Local Storage dan Session Storage data adalah cleared di seluruh halaman memuat.” Jump untuk quote
- “HTTP Cookies are cleared across page loads.” (terjemahan) “HTTP Cookies adalah cleared di seluruh halaman memuat.” Jump untuk quote
- “Expect Googlebot to decline user permission requests.” (terjemahan) “Expect Googlebot untuk decline pengguna permission permintaan.” Jump untuk quote
- “Googlebot caches aggressively in order to reduce network requests and resource usage. WRS may ignore caching headers.” (terjemahan) “Googlebot caches aggressively di order untuk reduce network permintaan dan resource usage. WRS dapat ignore caching headers.” Jump untuk quote
Google — dynamic rendering
- “Dynamic rendering was a workaround and not a long-term solution for problems with JavaScript-generated content in search engines.” (terjemahan) “Dynamic rendering adalah sebuah workaround dan not sebuah panjang-istilah solusi untuk masalah dengan JavaScript-generated konten di mesin pencari.” Jump untuk quote
- “Dynamic rendering is a workaround and not a recommended solution, because it creates additional complexities and resource requirements.” (terjemahan) “Dynamic rendering adalah sebuah workaround dan not sebuah recommended solusi, because ini membuat additional complexities dan resource requirements.” Jump untuk quote
Microsoft Bing
- “bingbot is generally able to render JavaScript…” (terjemahan) “bingbot adalah umumnya able untuk render JavaScript…” Jump untuk quote
- “we recommend dynamic rendering as a great alternative for websites relying heavily on JavaScript.” (terjemahan) “kami recommend dynamic rendering sebagai sebuah great alternative untuk situs web relying heavily pada JavaScript.” Jump untuk quote
Martin Splitt, Google (relayed via Onely’s transcript dari sebuah 2019 Webmaster Central hangout)
- pada two-waves model: Splitt memiliki said ini plays less dan less dari sebuah role, itu banyak situs go melalui render phase bahkan without JavaScript, dan itu crawling, rendering, dan pengindeksan adalah converging. Read coverage
Patrick Stox (my own berfungsi — JavaScript SEO: sebuah Definitive Guide)
- “Google loads each page stateless like it’s a fresh load.” (terjemahan) “Google memuat setiap halaman stateless like ini adalah sebuah fresh muat.”
- “pages went to the renderer at a median time of five seconds” (terjemahan) “halaman went untuk renderer di sebuah median time dari five seconds” (90th percentile di minutes) — sebuah dated conference-era data poin, not sebuah saat ini published metric; see saat ini official queue-timing quote above.
- “The most problematic one is going to be full client-side rendering where all of the rendering happens in the browser.” (terjemahan) “paling problematic one adalah going untuk menjadi full rendering sisi klien where semua dari rendering happens di browser.”
- “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” (terjemahan) “apa pun jenis dari SSR, static rendering, dan prerendering setup adalah going untuk menjadi fine untuk mesin pencari. Gatsby, Next, Nuxt, etc., adalah semua great.”
mental models
1. crawl → render → indeks. rendering adalah bridge. crawling fetches raw HTML; rendering runs JS untuk bangun DOM; pengindeksan reads itu DOM. When JS konten goes missing, tanyakan which langkah failed — adalah ini fetched? rendered? melakukan rendered DOM berisi konten?
2. renderer adalah sebuah nyata browser dengan amnesia. Evergreen Chrome, tetapi stateless (forgets cookies/storage antara halaman), no interaction (won’t scroll atau click), dan cache-happy (dapat run stale JS/CSS). Design sebagai jika setiap visit adalah sebuah fresh, untouched, pertama muat.
3. rendering mode decides Anda risk, not Anda framework. SSR, static, prerender, dan hydration semua put konten di (atau quickly ke) DOM — rendah risk. Full CSR bets everything pada render — highest risk. yang sama Next.js app adalah safe atau risky depending pada which mode Anda ship.
4. “Two waves” (terjemahan) “Two waves” adalah old map. Don’t plan sekitar sebuah deferred kedua wave dari rendering days later. rendering happens untuk essentially semua halaman, biasanya di dalam seconds-untuk-minutes — dan there’s no render budget untuk ration.
5. Dynamic rendering adalah sebuah smell, not sebuah strategy. Serving bot berbeda HTML daripada pengguna adalah sebuah workaround Google advises terhadap (dan adalah close untuk cloaking). jika Anda’re reaching untuk ini, nyata fix adalah biasanya SSR/SSG.
6. Get konten ke DOM, lalu verify. Pick sebuah mode itu puts konten di rendered DOM quickly, lalu confirm dengan URL Inspection’s rendered HTML. Anda browser isn’t Googlebot.
rendering options — SEO trade-offs
| Option | Where HTML adalah dibangun | SEO risk | Reach untuk ini when |
|---|---|---|---|
| CSR (client-side) | browser/WRS runs JS; server mengirim sebuah shell | Highest — depends pada render success; slowest untuk indeks | App-like, gated, atau rendah-SEO-nilai views |
| SSR (server-side) | server, per permintaan | rendah — konten di raw HTML | Dynamic / personalized / fast-changing konten |
| SSG / static / prerender | di deploy time | Lowest — di raw HTML dan fast | konten situs, docs, blogs, marketing |
| Hydration (isomorphic/universal) | SSR/SSG paint, lalu JS hydrates | rendah — watch hydration mismatches | sebagian besar modern frameworks |
| ISR (incremental static regen) | Static, regenerated pada schedule/pada-demand | rendah — fresher SSG | besar catalogs needing periodic freshness |
| Edge rendering | SSR di CDN edge | rendah — faster TTFB | Global, latency-sensitive SSR |
| Streaming SSR | HTML streamed di chunks | rendah — pertahankan dapat diindeks konten out dari late chunks | performa-critical SSR apps |
| Dynamic rendering | bot get prerender, pengguna get CSR | Workaround hanya — Google advises terhadap | Last resort untuk legacy CSR |
Web rendering Service — quick facts
| perilaku | What ini berarti untuk Anda |
|---|---|
| Evergreen headless Chromium | Modern JS/CSS berfungsi; no perlu untuk transpile untuk sebuah old mesin |
| Stateless (storage + cookies cleared) | Don’t rely pada persisted client state untuk sajikan konten |
| Declines permission prompts | konten behind geolocation/notifications/camera won’t render |
| Doesn’t scroll, click, atau hover | muat konten pada viewport, not pada interaction |
| Caches JS/CSS aggressively | Fingerprint filenames (app.4f2a9c.js) so perubahan adalah picked up |
| Renders untuk ~semua halaman, biasanya di seconds-untuk-minutes | No “two waves,” (terjemahan) “two waves,” no render budget untuk ration |
Render-readiness audit checklist
sebuah pass untuk confirm Anda penting konten actually survives rendering:
- Primary konten dan main navigation tautan adalah present di raw HTML respons (view source, not DevTools’ inspected DOM) — not injected hanya setelah JavaScript runs.
- setiap internal tautan sebuah reader perlu untuk ikuti adalah sebuah nyata
<a href="...">— not sebuah<div onclick>, sebuah hash-hanya route (#/page), atau sebuah button itu pushes state client-side dengan no matching tautan. - No critical JS atau CSS files adalah blocked di
robots.txt(sebuah blocked bundle dapat leave WRS unable untuk bangun halaman ini perlu untuk render). - konten itu memuat pada scroll, hover, atau click juga memiliki sebuah path itu renders without apa pun interaction — WRS doesn’t scroll, click, atau hover.
- Nothing penting depends pada
localStorage,sessionStorage, atau cookies persisting antara permintaan — WRS adalah stateless dan clears semua dari itu antara halaman memuat. - Nothing penting sits behind sebuah geolocation, notification, atau camera permission prompt — WRS declines itu oleh default.
- JS/CSS filenames adalah fingerprinted (
app.4f2a9c.js) so sebuah konten perubahan forces sebuah fresh fetch alih-alih getting disajikan dari WRS’s aggressive cache. - pemeriksaan URL’s rendered HTML/screenshot di Google Search Console menampilkan yang sama konten dan tautan Anda see di Anda own browser.
- situs isn’t menggunakan dynamic rendering sebagai -nya jawaban untuk sebuah CSR masalah — fix adalah SSR, static rendering, atau hydration, not serving bot sebuah berbeda versi dari halaman.
rendering mistakes itu actually bite
Blocking JS atau CSS halaman perlu untuk render, di robots.txt.
jika WRS dapat’t fetch sebuah script atau stylesheet halaman depends pada, ini dapat’t
bangun sebuah accurate rendered DOM — Anda get sebuah broken atau empty render alih-alih
halaman Anda intended. melakukan instead: allow crawling dari Anda JS/CSS assets;
robots.txt seharusnya pertahankan bot out dari rendah-nilai spaces, not resources Anda
own halaman perlu.
Shipping konten-critical halaman sebagai full rendering sisi klien (CSR) dengan no fallback. CSR adalah “the most problematic one … full client-side rendering where all of the rendering happens in the browser” (terjemahan) “paling problematic one … full rendering sisi klien where semua dari rendering happens di browser” — ini bets Anda entire halaman pada render succeeding, dan ini adalah slowest option untuk get terindeks. melakukan instead: reach untuk SSR, static generation/prerendering, atau hydration so konten adalah di (atau very quickly ke) raw HTML.
Relying pada hash-based routes (#/product/123) sebagai Anda hanya navigation.
WRS mengikuti nyata <a href> tautan; sebuah hash fragment itu hanya perubahan
client-side state, dengan no server-rendered equivalent URL, gives renderer
nothing untuk crawl onward untuk. melakukan instead: gunakan nyata paths server dapat respond
untuk directly (/product/123), bahkan di sebuah client-heavy app.
Lazy-memuat konten dengan no non-interactive path untuk ini. Because WRS “doesn’t scroll, click, or hover,” (terjemahan) “doesn’t scroll, click, atau hover,” konten itu hanya appears setelah one dari itu events adalah invisible untuk ini oleh default. melakukan instead: muat above—fold dan reasonably-near-viewport konten without requiring sebuah interaction, dan reserve benar lazy-memuat untuk konten genuinely below fold dengan sebuah proper non-JS fallback.
Treating dynamic rendering sebagai sebuah panjang-istilah fix alih-alih sebuah workaround. Google adalah explicit itu “dynamic rendering is a workaround and not a recommended solution, because it creates additional complexities and resource requirements” (terjemahan) “dynamic rendering adalah sebuah workaround dan not sebuah recommended solusi, because ini membuat additional complexities dan resource requirements” — dan serving bot berbeda konten daripada pengguna sits uncomfortably close untuk cloaking. melakukan instead: fix rendering mode itself (SSR/static/hydration) alih-alih membangun sebuah bot-detection layer sekitar sebuah CSR masalah.
Validation tests
Pass/fail memeriksa untuk confirm sebuah rendering fix actually took effect — run ini setelah Anda ship perubahan, not sebagai sebuah ongoing health metric.
Test: konten now appears di rendered DOM
- Test untuk run — Submit URL untuk Google Search Console’s URL Inspection alat dan gunakan “Test Live URL,” (terjemahan) “Test Live URL,” lalu open rendered HTML tab (atau run halaman melalui Render Gap alat untuk diff raw vs. rendered HTML directly).
- Expected hasil — konten Anda ditambahkan atau fixed appears di rendered HTML/DOM view, not hanya di Anda own browser’s dev alat.
- Failure interpretation — jika ini adalah masih missing dari rendered HTML tetapi present when Anda view halaman normally, WRS masih dapat’t bangun ini — periksa untuk sebuah blocked JS/CSS resource, sebuah interaction-hanya muat, atau sebuah client-storage dependency sebelum assuming fix worked.
- Monitoring window — Immediate; pemeriksaan URL’s live test reflects saat ini state dari URL right away.
- Rollback trigger — rendered HTML masih doesn’t berisi konten setelah fix, atau live test throws sebuah baru crawl/render error ini didn’t throw sebelum.
Test: penting tautan survive render
- Test untuk run — periksa rendered HTML (pemeriksaan URL atau Render Gap)
untuk nyata
<a href>tags sekitar setiap tautan sebuah reader perlu untuk ikuti, not hanya terlihat clickable elements. - Expected hasil — setiap tautan di rendered DOM memiliki sebuah resolvable
hrefpointing di sebuah nyata, dapat di-crawl URL. - Failure interpretation — sebuah missing atau empty
hrefpada what looks like sebuah berfungsi tautan biasanya berarti ini adalah sebuah<div>/<button>dengan sebuah client-side click handler dan no server-renderable path — WRS dapat’t ikuti ini. - Monitoring window — Immediate.
- Rollback trigger — tautan itu mattered sebelum perubahan adalah missing
hrefattributes atau poin di sebuah hash-hanya fragment di rendered output.
Test: fix doesn’t quietly regress pada next deploy
- Test untuk run — Re-run rendered-HTML periksa (pemeriksaan URL live test atau Render Gap) setelah Anda next deploy itu touches ini halaman’s templates atau bangun pipeline.
- Expected hasil — yang sama konten dan tautan adalah masih present di rendered DOM sebagai when Anda pertama confirmed fix.
- Failure interpretation — jika konten itu adalah present disappears again, sebuah later perubahan mungkin reintroduced sebuah client-hanya dependency atau broke sebuah server-rendered path.
- Monitoring window — Re-periksa setelah setiap deploy itu touches affected templates; not sebuah one-time periksa.
- Rollback trigger — konten atau tautan itu adalah confirmed present drop out dari rendered DOM again.
Resources worth Anda time
My related writing
- JavaScript SEO: sebuah Definitive Guide — my full guide untuk rendering, rendering modes, DOM parity, infinite scroll, dan two-halaman-sebagai-one masalah.
- Beginner’s Guide untuk SEO teknis — where rendering fits antara crawling dan pengindeksan.
My speaking
- How Search berfungsi (SlideShare) — my walkthrough dari crawling, rendering ( WRS, stateless memuat, no interaction), pengindeksan, dan peringkat. (My standing disclaimer applies: “This is my understanding of systems… not going to be 100% complete or accurate.” (terjemahan) “ini adalah my understanding dari sistem… not going untuk menjadi 100% complete atau accurate.”)
dari others
- web.dev — rendering pada Web — canonical explainer dari CSR / SSR / SSG / hydration trade-offs dari Chrome team.
- Onely — Google’s Two Waves dari pengindeksan — transcript-based coverage dari Martin Splitt’s office-hours session explaining why two-waves model adalah fading; cited di artikel body.
- mesin pencari Roundtable — Google: No Per-halaman Search Cost — Google rep clarifying tidak ada per-halaman crawl/render/indeks cost untuk ration.
- mesin pencari Journal — JavaScript SEO — industry coverage dari JS SEO best practices, testing workflows, dan framework considerations.
- Vercel — rendering Strategies — Next.js/edge rendering docs; berguna when choosing antara CSR, SSR, SSG, ISR, dan streaming SSR untuk sebuah nyata project.
- r/TechSEO — community untuk debugging render/indeks masalah.
Videos
- Google Search Central (YouTube) — Martin Splitt’s JavaScript SEO series dan rendering explainers adalah best official video walkthroughs dari how Web rendering Service handles Anda JS. Channel
Stats worth citing
- saat ini official framing: no fixed delay. Google’s documentation says sebuah di-crawl halaman “may stay on this queue for a few seconds, but it can take longer than that” (terjemahan) “dapat stay pada ini queue untuk sebuah few seconds, tetapi ini dapat take longer daripada itu” — there’s no published fixed delay atau timeout untuk render queue.
- Historical data poin (dated) — ~5 kedua median render delay. di earlier conference remarks, Google staff (Martin Splitt dan Tom Greenaway) put halaman reaching renderer di sebuah median dari ~5 seconds, dengan 90th percentile di minutes — not “weeks” (terjemahan) “weeks” old two-waves fear implied. I cite ini di my JavaScript SEO guide, tetapi treat ini sebagai sebuah historical data poin, not sebuah saat ini published metric — Google hasn’t republished ini sebagai sebuah ongoing figure.
- Two waves dari pengindeksan adalah fading. Per Martin Splitt, two-waves model plays less dan less dari sebuah role sebagai crawling, rendering, dan pengindeksan converge — rendering now happens untuk essentially semua halaman. Coverage
- No per-halaman render budget. Google memiliki indicated ini doesn’t track how expensive sebuah individual halaman adalah untuk crawl, render, indeks, atau sajikan — so there’s no “render budget” (terjemahan) “render budget” untuk conserve cara anggaran crawling gets discussed. Coverage
Test yourself: rendering
Five quick pertanyaan pada how Google renders halaman. Pick sebuah jawaban untuk setiap, lalu periksa.
Log perubahan
Diperbarui 28 Jul 2026.
Ringkasan editorial dan detail perubahan yang tercatat.Detail perubahan
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Perbandingan lengkap tidak tersedia — tidak ada cuplikan sebelumnya yang diarsipkan untuk revisi ini.
Diperbarui 18 Jul 2026.
Ringkasan editorial dan detail perubahan yang tercatat.Detail perubahan
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Perbandingan lengkap tidak tersedia — tidak ada cuplikan sebelumnya yang diarsipkan untuk revisi ini.
Diperbarui 17 Jul 2026.
Ringkasan editorial dan detail perubahan yang tercatat.Detail perubahan
-
Catatan perubahan terperinci saat ini tersedia dalam bahasa Inggris.
Perbandingan lengkap tidak tersedia — tidak ada cuplikan sebelumnya yang diarsipkan untuk revisi ini.