Server Side Rendering Library

Single page web apps (which is what Apex Designer generates) are not great from a search engine optimization (SEO) point of view. It takes time for the pages to load and render and some search engines don't even support JavaScript. If SEO performance is important for your app, you should add this library to your application.

Library Contents

The library includes:

• A Rendered Page business object that stores the mobile and desktop HTML for a given path plus the behaviors to manage them
• A Generate Configuration that creates a public-pages.json file in the Loopback directory (this is used by the Render Public Pages behavior)
• A Robots app behavior that serves a dynamically generated robots.txt file that tells the search engines where the sitemap is
• A Sitemap app behavior that serves a dynamically generated sitemap.xml file that lists the paths that the search engines should index
• A Server Rendered Pages To Crawlers reusable behavior that is used in the apps sequence to serve the static pages

Adding the Library

It is quick and easy to add the library to your app:

1. Add the library to the list of libraries on your project's Dependencies page
2. Double check that the appUrl environment variable is set (it usually is by default).
3. Go to Files and open the /loopback/src/sequence.ts file and click the Edit icon button to make the file editable
4. Import the serveRenderedPagesToCrawlers function by adding this line near the top of the file:
   import { serveRenderedPagesToCrawlers } from './utilities/serve-rendered-pages-to-crawlers';
5. Add the function after helmet in the middleware list:
   

   middlewareList.push(
   	helmet({
   		frameguard: { action: 'sameorigin' },
   		hsts: { maxAge: 31536000 },
   		referrerPolicy: false,
   		contentSecurityPolicy: {
   			directives: {
   				frameAncestors: ["'self'", process.env.apexDesignerURL],
   				'default-src': helmet.contentSecurityPolicy.dangerouslyDisableDefaultSrc
   			}
   		}
   	}),
   	serveRenderedPagesToCrawlers
   );

That's all there is to it!

How Does the Rendering Work?

The Render behavior on the Rendered Page business object handles the generation of the static HTML:

1. It prepares mobile and desktop viewport sizes
2. Gets a new page (opens a new tab) on the headless browser
3. Sets the viewport size
4. Adds an Puppeteer Interceptor to tell the browser to not load the images
5. Sets the user agent so that it is not seen as a bot
6. Opens the url of the page and waits for network activity to stop
7. Waits for the Angular to finish processing the page
8. Removes the script elements to make the HTML static (we don't want it to try to load the app again)
9. Extracts the HTML and stores it in the database

How Are The Rendered Pages Served?

When a search engine bot crawls a site, it uses a User Agent request header that identifies itself as a bot. The Serve Rendered Pages To Crawlers reusable behavior:

1. uses the isBot npm package to decide if the request is from a bot
2. If it is from a bot, is not on a list of excluded endpoints and is not a file (does not have a period in the path), it then uses the is-mobile npm package to determine if the bot is asking for a mobile page or a desktop page
3. Next, it looks for a Rendered Page that has the path and returns sends the appropriate HTML to the search bot

If it does not find a matching Rendered Page, it returns a 404 page instead.

What About Dynamic Pages?

By default, the library will only render the paths that are publicly accessible (you don't need to be logged in to see them) and only if they do not contain a url parameter (:id for example). If your app has dynamic pages that you want rendered server side, you can add logic in your app to create RenderedPage instances for the pages and add them to the queue. A good example is the Documentation Library. Each time a page is published, a Rendered Page business object is created (if it does not already exist) and added to the queue.