It is not easy to split one big service into smaller services. A common way to do this is to load parts with extra requests. But some parts are important for SEO. If you load these parts with AJAX, your search ranking can go down. In this case, Server Side Include, or SSI for short, can help.
Requirements
SSI is not a new idea. Many HTTP servers support it. This includes Apache (mod_include) and Nginx (ngx_http_ssi_module). In this article, we will use Nginx. First, we must check if this module is active. Nginx turns it on by default. But someone may have turned it off in your version. You can check this with the following command:
If you see the --without-http_ssi_module option, you cannot use SSI. In that case, you need a version of Nginx with the SSI module. If the command shows no result, you are ready. You can move on.
Basics
Let’s say we have a monolith app. It renders the HTML template shown below.
Here is a simple version of this monolith’s code:
<!doctype html>
<title>Nginx SSI Example</title>
<style>
* { box-sizing: border-box; }
body { display: flex; min-height: 100vh; flex-direction: row; margin: 0; }
.col-1 { background: #D7E8D4; flex: 1; }
.col-2 { display: flex; flex-direction: column; flex: 5;}
.content { display: flex; flex-direction: row; }
.content > article { flex: 3; min-height: 60vh; }
.content > aside { background: beige; flex: 1; }
header, footer { background: yellowgreen; height: 20vh; }
header, footer, article, nav, aside { padding: 1em; }
</style>
<body>
<nav class="col-1"><?php include 'components/nav.php' ?></nav>
<div class="col-2">
<header><?php include 'components/header.php' ?></header>
<main class="content">
<article><?php include 'components/article.php' ?></article>
<aside><?php include 'components/aside.php' ?></aside>
</main>
<footer><?php include 'components/footer.php' ?></footer>
</div>
</body>
Here is an example of the components/aside.php file:
<?php usleep(200000); echo "Aside";
Each component (nav.php, header.php etc) takes 200ms to run. So the whole page takes 1 second to load. Now let’s say we move the Aside part into its own microservice. This new service only takes 50ms to render. But now we have one problem. We need to join these two services into one page.
The usual way is to send a request to the new Aside service. You can use a library like guzzle or curl. Then you show the content it sends back.