Skip to main content

Bootstrap and Route Payloads

Role​

ReactWP is powered by a shared payload contract.

That contract is used in two places:

  • the initial page render through the bootstrap JSON
  • client-side navigation through the route REST endpoint

This is one of the most important concepts in the starter.

Bootstrap Payload​

The initial page render injects a JSON payload into:

  • #reactwp-bootstrap

The frontend reads it from:

  • src/themes/reactwp/js/inc/Runtime.js

The bootstrap payload currently contains:

  • site
  • theme
  • system
  • assets
  • navigation
  • route
  • currentUser
  • seoDefaults

site​

site contains basic site metadata.

Typical values:

  • name
  • description
  • language
  • locale
  • homeUrl
  • adminUrl

site.language is the language selected while WordPress builds the initial bootstrap. site.locale is the complete WordPress locale, for example fr_CA. After client navigation, use route.lang as the authoritative language for the route currently being rendered and keep site.language as a fallback.

const language = route.lang || site.language || 'en';

theme​

theme contains the active theme metadata.

Typical values:

  • name
  • slug
  • version

system​

system contains runtime infrastructure URLs and environment values.

Typical values:

  • public
  • baseUrl
  • homeUrl
  • adminUrl
  • ajaxUrl
  • restUrl
  • restNonce
  • themeUrl
  • routeEndpoint
  • cacheVersion
  • headless

This part of the payload is designed to be extended through rwp_system.

headless contains endpoint URLs for bootstrap, route, navigation, settings, sitemap, preview, current-user, login, and logout requests. cacheVersion controls the active ReactWP cache generation used by browser caches and pre-rendered HTML invalidation.

assets​

assets groups the starter's critical and deferred loading maps.

Current keys:

  • criticalFonts
  • criticalMedias
  • noCriticalMedias

Each map is grouped by media group name, such as:

  • all
  • home
  • service

The loader runtime combines all with the groups declared by the route.

navigation is the normalized menu payload exposed to React.

Each location key contains an array of items.

Each item can include:

  • id
  • label
  • title
  • url
  • path
  • target
  • classes
  • children

Example:

navigation.primary

route​

route is the currently active normalized route payload.

This same general structure is reused during client-side navigation.

Typical values:

  • id
  • type
  • template
  • pageName
  • path
  • url
  • seo
  • mediaGroups
  • data
  • is404
  • head
  • status (public REST/headless normalization only)
  • lang
  • search
  • query
  • key (added by the frontend normalizer)
  • render

The integrated bootstrap route produced directly by RouteResolver does not add status; PublicPayload adds it to public REST/headless routes. Treat it as optional in shared templates and use is404 when code must work in both delivery modes.

currentUser​

The integrated bootstrap always contains currentUser.authenticated. Logged-in requests also receive the current user's ID, slug, display name, email, and roles. Extend it through rwp_current_user_payload and keep private routes uncached or privately cached.

route.render​

The route render contract contains:

  • mode: client, static, or server
  • cache.html, scope, and ttl for SSR HTML
  • cache.payload and cache.media for browser caches
  • cache.tags for targeted HTML invalidation

See Hybrid Rendering.

Route Payload Shape​

id​

The route identifier.

Examples:

  • post ID
  • user_12
  • term_7
  • null for a 404 route

type​

The route object type.

Examples:

  • page
  • post
  • custom post type slug
  • term
  • user
  • 404

template​

The React template name to resolve through the template registry.

Examples:

  • Default
  • NotFound
  • a custom template name stored in ACF

pageName​

The route display name, used by templates and SEO helpers.

path​

The normalized route path used by the frontend runtime.

Examples:

  • /
  • /starter-guide/
  • /services/design/

The normalized query string for the route, without the hash fragment.

Examples:

  • `` (empty string)
  • ?s=test
  • ?category=design&page=2

query​

The parsed query object for the route.

Examples:

  • {}
  • { s: 'test' }
  • { category: 'design', page: '2' }

url​

The full URL for the route.

lang​

The normalized language code for this specific route, such as fr or en. WordPress resolves it for direct requests and every route API response, so templates should prefer it over the initial bootstrap language:

const language = route.lang || site.language || 'en';

For an external headless frontend, read the same field from the normalized route response. site.language remains useful as a bootstrap fallback, while site.locale provides the complete WordPress locale.

seo​

The route SEO payload.

This can contain fields like:

  • title
  • title_fr
  • description
  • description_fr
  • og_title
  • og_description
  • og_image

mediaGroups​

A comma-separated string used by the loader runtime to decide which critical and deferred asset groups to load.

Example:

home, shared

data​

The ACF route data that the template consumes.

This is where template-specific content lives.

is404​

Boolean that tells the runtime whether the route is a 404 payload.

An optional array of rendered head tags.

If present, the frontend uses it to re-sync the document head after navigation.

See Head and SEO.

Headless Public Payloads​

The integrated theme runtime still uses the internal bootstrap and route payloads.

External frontends should use the public headless contract instead:

  • GET /wp-json/reactwp/v1/bootstrap
  • GET /wp-json/reactwp/v1/route?view=/example/

Those responses currently use public contract version 1.4 and include normalized route/render fields, sanitized media data where possible, and links to the other headless endpoints.

The public bootstrap never includes currentUser, even when the request carries a valid WordPress session. Resolve headless identity separately through GET /wp-json/reactwp/v1/auth/me; that endpoint sends no-store headers. The integrated inline bootstrap keeps its currentUser prop because it is request-specific and is not the cacheable public contract.

The route endpoint requires view. The bootstrap endpoint defaults to the front page and accepts an optional view. Unsupported parameters such as path are not aliases for route resolution.

See Headless API for the public endpoint contract.

Why This Matters​

The whole ReactWP navigation model depends on this contract staying stable.

That is why the starter resolves:

  • the current route through PHP
  • future routes through the REST endpoint

using the same normalization logic.

Where To Extend It​

If you need to add data to the bootstrap or route payloads, the main extension points are:

  • rwp_system
  • rwp_bootstrap
  • rwp_route_payload
  • rwp_wp_head

Keep secrets out of these filters. The integrated bootstrap and public route payload are readable by the browser. Public route resolution exposes only publicly viewable, non-password-protected posts; unpublished content must use the signed preview endpoint.

See Hooks and Filters.