Dynamic Server Side Rendering (SSR) and Client Side Rendering (CSR) in angular depending who requested

Question

Is It posible to create a Node.js service that renders the angular aplication depending in if is a client or a server?

Right now I am only using SSR, I followed this angular documentation in order to create a service to render the app.

How can I use both rendering?

Answer 1

Please follow this tutorial to enable user-agent detection on the requests

TLDR:

Install the isbot package by npm install isbot

from server.ts change this line:

 // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

To this:

// All regular routes use the Universal engine
  server.get('*', (req, res) => {
    if (isbot(req.headers['user-agent'])) {
      console.log('bot and running on SSR');
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
    } else {
      console.log('Running on CSR');
      res.sendFile(join(distFolder, `index.html`));
    }
  });