[PWA] Server side rendering

Ionic Framework ionic-v3
1

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”?

4 Likes
2

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);

3

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

4

@reedrichards

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.

5

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

6

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

2 Likes
7

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?

8

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