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
  • seoDefaults

site​

site contains basic site metadata.

Typical values:

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

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
  • themeDirectory
  • routeEndpoint

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

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

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.

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.

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

See Hooks and Filters.