Frontend-Backend Interaction

The WordPress core is loaded through the frontend.

Rendering lifecyle

Server render the dist > index.php. That include <html> language attributes, the wp_head() / wp_footer() functions, css in inline styles, the preloader HTML and the consent box HTML.
main.min.js is loaded
The Cache API from Service Worker API is init by the Cache Concept (or not)
The Loader Concept and App Rendering are initialized.

App Rendering Rendering the app work in 2 steps behind and independently the Loader Concept. In other hand, just know that the preloader given by the Loader Concept don't finish as long the step 2 is not pass:

Step 1 For render the app, we need to make sure we have all data like routes, medias to download, etc. Pending the mounting, the app will render first a waiting component behind the preloader for wait your data. When the app have all your data, the app will replace the waiting component for all components required for the requested page.

By default, the app don't wait for data because we injecting this from server-side instead of fetching it, but if you need to fetch your data and wait it, you need to make sure in the code below that setLoaded(true) will be called after your fetches. Put a look on src > front > js > App.jsx, you'll find this code:

useEffect(() => {

    setLoaded(true);

}, []);

Step 2 We have all data, we can technically render our app, but before render it completely, we'll make sure the Scroller component is ready. Then, the rest of the page inner scroller will be render. At the same time with the step 2, a global variable window.gscroll is associated to the ScrollSmoother.create() instance. This global variable is require for pass the preloader animation.

Routes

Routes are assembly in a variable named ROUTES from src > back > theme > functions.php and they are mounted in src > front > js > App.jsx. Routes for post and page post type are done by default.

Each route need an array argument with these parameters:

id string|int, required. Default is admin page id. You can have custom value.
routeName string, required. Default is admin page title. You can have custom value.
path string, required. Default admin page relative path without /admin. You can have custom value.
type string, required. Default is post type. You can have custom value.
seo array, required. Default is ACF return or empty if the SEO module is not set. You can write your own array with these non-require parameters:
- stop_indexing
- title
- description
- og_title
- og_description
- og_image
- pageTitle
- og_type

componentName string, required. Default is ACF return or DefaultPage if the component name module is not set. You can use ACF hooks to auto-populate your component name module or if you don't have the module, you can force it like we do for single post routes:

if($routes[$k]['type'] === 'post'){

    $routes[$k]['componentName'] = 'SinglePostPage';
    $routes[$k]['seo']['og_type'] = 'article';

    $routes[$k]['extraDatas'] = [
        'date' => $v->post_date,
        'modified' => $v->post_modified,
        'author' => get_author_posts_url($v->post_author)
    ];

}

extraDatas array, optional. You can write what you want. If you put a look on the code above, we have added the published date, the modified date and the author URL for a post. At the same time, we have added an og_type parameter/value article attached to the seo that you can feel it like an extra data. This combination allowing us to populate an article:published metadata and other metadatas for a specific og_type in src > front > js > components > Meta.jsx

Each Component composing your routes need to be mapped in the ecosystem. To map components, add them to the componentMap object in src > front > js > App.jsx

In src > back > theme > functions.php, use:

/*
* Enqueue Scripts
*/
add_action('wp_enqueue_scripts', function(){

    wp_localize_script('scg-main', 'MY_VARIABLE', []);
    
});

You can now use MY_VARIABLE in your javascript files.

REST and Ajax Requests

Using SYSTEM.restPath will return the string /admin/wp-json/. restRequests function is ready in src > back > theme > function.php.
Use SYSTEM.ajaxPath for call the admin-ajax.php of WordPress. ajaxRequests function is ready in src > back > theme > function.php.

PreviousWeb Server Configuration NextConcepts

Last updated 1 day ago

Rendering lifecyle

Routes

Share data from backend to frontend

REST and Ajax Requests