Inertia server side rendering on Laravel Vapor

Inertia.js now provides fully-featured server-side rendering, removing one of the main reasons people might have shied away from it in the past.

Inertia provides a few libraries to help you run a small Node.js server in the background. It works like this:

• a request comes into your Laravel application
• Inertia sends a request to the running Node process
• the Node process renders HTML and returns it to your Laravel application
• Inertia inserts it into the page as HTML.

The Inertia team has provided just about everything you need to run SSR on a traditional server like Forge or Heroku.

The only drawback to this approach is that you have to have a long-running Node process. This is obviously impossible on a serverless platform like Laravel Vapor, where there are no long-running processes!

Enter Sidecar

Sidecar is a Laravel package that allows you to package, create, deploy, and execute AWS Lambda functions directly from your Laravel application.

Sidecar handles all the hard parts about interacting with AWS Lambda, and leaves you with and nice interface to execute functions, like this:

Lambda currently supports the following languages:

• Node.js 14
• Node.js 12
• Node.js 10
• Python 3.8
• Python 3.7
• Python 3.6
• Python 2.7
• Ruby 2.7
• Ruby 2.5
• Java 11
• Java 8
• Go 1.x
• .NET Core 3.1
• .NET Core 2.1

You can also provide a container runtime, and PHP support is coming soon.

Sidecar has already been used in production to render tens of millions of Inertia SSR requests.

Sidecar + Inertia

Looking at the process from above, we'll just swap out "Node process" with "Sidecar function."

• a request comes into your Laravel application
• Inertia sends a request to the running Node process Sidecar function
• the Node process Sidecar function renders HTML and returns it to your Laravel application
• Inertia inserts it into the page as HTML.

Instead of running a process, the rendering will be done inside of a Lambda on AWS.

We have provided a sidecar-inertia package that handles most of it for you, and includes the documentation. We have also created a Jetstream + Inertia + Sidecar SSR demo repo if you want to take a look at the full thing.

The repo will contain full the full documentation, but I'll cover some of the highlights here.

When it comes to rendering SSR, Inertia makes it super easy to swap out renderers. In our case, we'll use the provided SidecarGateway.

namespace App\Providers;
 
use Hammerstone\Sidecar\Inertia\SidecarGateway;
use Illuminate\Support\ServiceProvider;
use Inertia\Ssr\Gateway;
 
class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        // Use Sidecar to run Inertia SSR. 
        $this->app->instance(Gateway::class, new SidecarGateway);
    }
}

The package ships with a \Hammerstone\Sidecar\Inertia\SSR function, which is what we'll deploy to AWS.

You can take a look at the full contents of the function here: github.com/hammerstonedev/sidecar-inertia/src/SSR.php.

After you have configured Sidecar, you can run php artisan sidecar:deploy --activate and you should see output like this:

[Sidecar] Deploying Hammerstone\Sidecar\Inertia\SSR to Lambda as `SC-Demo-local-Inertia-SSR`.
          ↳ Environment: local
          ↳ Package Type: Zip
          ↳ Runtime: nodejs14.x
          ↳ Executing beforeDeployment hooks
          ↳ Compiling Inertia SSR bundle.
          ↳ Running npx mix --mix-config=webpack.ssr.mix.js
          ↳ JavaScript SSR bundle compiled!
          ↳ Function already exists, potentially updating code and configuration.
          ↳ Packaging files for deployment.
          ↳ Creating a new zip file.
          ↳ Zip file created at s3://sidecar-us-east-2-xxxx/sidecar/001-3f887xxxxx.zip
          ↳ Function code and configuration updated.
[Sidecar] Activating function Hammerstone\Sidecar\Inertia\SSR.
          ↳ Environment variables not managed by Sidecar. Skipping.
          ↳ Activating Version 5 of SC-Demo-local-Inertia-SSR.

Now your function is active on Lambda and SSR is ready to be used!

This SSR Lambda is completely independent from Laravel Vapor, it just happens to use Lambda like Vapor does.

This method will work locally, on Vapor, or on a server. Basically anywhere you can run PHP you can call this function. In fact, the best way to debug your function is to deploy and run it from your local machine!

Take a look at the full docs on the sidecar-inertia package and review the docs for Sidecar as well.

If you run into any issues with Sidecar SSR, please open them on the repo, and if you have questions about Sidecar itself please open an issue there!