How I created the server-side rendering for my website.

Dmitry Ivanov
Aug 1, 2019 · 3 min read
Photo by Christian Wiediger on Unsplash

Today I’m going to tell you about my solution to get your JavaScript apps (and not even JavaScript!) prerendered.

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

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

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 settings are just a plain JavaScript object which contains URLs and HTML selectors to save.

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
  • waitForElement

“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.

Backend part

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

Feel free to leave comments, they’re very interesting for me.

The Startup

Get smarter at building your thing. Join The Startup’s +785K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Dmitry Ivanov

Written by

I’m a web developer who loves to create something cool and useful. I usually use React, Vue, Laravel and React Native.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Dmitry Ivanov

Written by

I’m a web developer who loves to create something cool and useful. I usually use React, Vue, Laravel and React Native.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +785K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store