[PWA] Server side rendering

Is there a way to add server side rendering to a PWA built with Ionic 3?

Also is it planned out of the box for ionic-angular 4 ?

Or is the answer, “yes for both, use angular universal”?


First of all, sorry for my poor English.

After searching through Deep Web (joking), I found the solution. And the coolest solution was that I was able to integrate my Pioneer Ionic application with Firebase Hosting using Cloud Functions.

After reading the following topic:

The @TheRoccoB user explains how to host the static Web application in Firebase Hosting and redirect traffic from a URL to Cloud Functions.

What I did was map the routes that I have to index as:

“source”: “/ shop / **”,
“function”: “ssr”
“source”: “/ * / promotions / **”,
“function”: “ssr”

Since “ssr” is the name of my function in Cloud Functions. So I used the library https://github.com/prerender/prerender-node to check if the request is from a google crowler, in case I redirect the request to a https://github.com/prerender/prerender server.

const prerender = express ();
prerender.use (cors);
prerender.use (
require (‘prerender-node’)
// .set (‘prerenderServiceUrl’, ‘http: // localhost: 3000’)
.set (‘prerenderToken’, ‘** TOKEN **’)
prerender.use (require (‘prerender-node’). set (‘beforeRender’, function (req, done) {
// do you need to do?
console.log (‘Rendering URL:’, req.path);
done ();
prerender.use (require (‘prerender-node’) set (‘afterRender’, function (err, req, prerender_res) {
// do you need to do?
console.log (req.path + ‘rendering completed!’);
console.log (‘Errors:’, err);
prerender.get (’*’, (req, res) => {
console.log (‘Calling function for URL:’, req.path);
res.set (‘Cache-Control’, ‘public, max-age = 300, s-maxage = 600’);
res.status (200) .send (fs.readFileSync (’./ www / index.html’). toString ());
exports.ssr = functions.https.onRequest (prerender);

Cool @vinicius91carvalho, thx for the tips. I would rather like not to use pretender.io aka would rather like to use a not costly solution but who knows, might be the only option


Exists other solutions as:

You can host your application in https://www.roast.io/ which is already integrated with prerender.cloud.

I’m searching for other solutions too.

Thx for the follow ups. To be really honest with you, none of them convince me that much, but like I said, maybe in last resort

I think the Ionic team is working on something with Ionic v4


Does this mean that SSR is currently not available in ionic 4? and on availability of the feature, will it be a simple upgrade or lots of configurations to get it working?

@GeoffDev honestly I don’t know what’s the status, sorry, I didn’t search information about that since a couple of weeks