That’s my first post here and today I want to tell you about my version of server-side rendering for my JS application.
Mainly, it’s about SSR for Laravel and any frontend framework. Follow this method, you can easily replace Laravel with any other system or framework.
The reason why I did it
When I decided to create a small website for me, I also decided to use the latest technologies.
So I choose Vue as a frontend solution and Laravel as a backend solution. Everything was okay but I needed to setup SSR because like many other sites my site had to be indexed by search engines.
So I started to read about Vue SSR, this technology is great but it requires Node.JS for backend part or I had to install a special module https://www.php.net/manual/en/book.v8js.php onto my server to make it works.
Unfortunately, I had some issues with installing this module onto my server and I also didn’t want to depend on any environment. That’s why I decided to look for another solution. And I did it but I created it on my own.
The method which I used can be used with any technologies and frameworks. It would work right on your machine before code building and deploying. It could create as many as static parts for your website as you need.
I think it’s time to tell you more about my method.
How I did it
My idea is based on the puppeteer package. The main idea is that I created a special file called “render.js” and call it each time when I build my application.
So, I’ve added a new command to my package.json. This command is called “render”:
“render”: “node ./render.js”
and I also modified my production script adding a new command in case of successful build:
&& npm run render
I allowed me to execute render command after every successful project building.
Next, I want to tell about render.js a bit more.
The main idea is that this script uses puppeteer to visit an URL, parses rendered HTML and saves it anywhere on the server.
This file contains settings, they tell which URLs have to be rendered and which HTML elements should be parsed and saved.
The main aspect is that as I use Laravel in my project, I use a variable APP_URL from .env to receive a site URL. So I can easily run my prerender on any system, it just calls the host from .env file and needle URL to fetch rendered data.
I also created the directory “/storage/prerendered” where rendered data is saved. Saved data is just a set of JSON files. Each file contains rendered content.
Here’s how render.js looks like:
As you can see, the script uses settings and visit all described URLs, finds all selectors which should be prerendered and saves their content. It calls each time when I run “npm run production” command.
For convenience, I have two parameters in each member of the elements array:
“receiveElement” describes the element which content should be saved.
“waitForElement” describes which element should be presented in DOM before parsing will be executed.
So all rendered data is versioned with git and afterwards, I just upload it with each new release.
Since I use Laravel, I think I should say a bit about Laravel solution.
I’ve created a small helper for Laravel and use it in my blade templates:
It works pretty simply: function just receives cache file by $ident, seeks for required $element and if it exists returns cached data.
In my blade templates I just use this helper:
Instead of final words
Of course, it’s a pretty simple solution and there could be a lot of cases where this scheme will not work. But it works for me and resolves some problems which I was faced with.
Feel free to leave comments, they’re very interesting for me.