Server-side rendering is all the rage right now. But it’s not without its downsides. Pre-rendering is an alternative approach that may even be better in some circumstances.
In this article we’ll explore how pre-rendering works with Vue.js and look at two examples; one with a Node.js project, one with a Laravel project.
This means that the user has to wait a bit longer to see anything. It can also have an impact on SEO if crawlers can’t see content of the page quickly.
So instead of the browser receiving this from the server:
With SSR it receives a page with complete content:
<head> ... </head> <body> <div id="app"> <div class="container"> <h1>Your Server-Side Rendered App</h1> <div class="component-1"> <p>Hello World</p> <!--etc etc. This was all rendered on the server--> </app> </body>
Server-side rendering cons
- Your app will need to be executable on the server, so you’ll need to design your code to be “universal” i.e. it works in both the browser and a Node server.