Fallback for Page

From Yugal 9, Yugal added a fallback tag in it. Using <fallback> tag tells Yugal to skip storing page in chunk.js file, instead Yugal will load page when page is requested, ie when the link is clicked. Page is fetched using JavaScript's fetch method, so that page is not reloaded. Until the page is loaded, Yugal need to show a loading screen, hence in fallback tag, you have to define a small and optimized as possible page which is shown until the page is loaded. Steps for optimization are listed below.

  1. Try not to use any Image and external asset.

  2. Use as much as component as possible, try to make such page in component and use them on pages wherever possible.

  3. Use inline styles.

  4. Try to make it in minimal code.

Example Code

<?php
return <<<HTML
    <body>
        <h1>Hello World</h1>
    </body>
    <head>
        <title>Home
    </head>
    <fallback>
        <h1>
            Loading...
        </h1>
    </fallback>
HTML;
?>

You have to make fallback tag in the php file wherever the page is defined. Don't define it in any other tag. Define it as the above code.

Last updated