#Pre-filling variables using SSR ?

7 messages · Page 1 of 1 (latest)

stable oyster
#

Hi All, I was curious about SSR - I still don't really understand what its doing but was wondering if its possible to achieve the following :

  1. Server fetches data from a local api (fast!) and pre-fills a variable in a page and caches it as a pre-rendered page
  2. User requests page at some point and receives a page with the relevant info already inside with no need to make the API call

Or even better,

  1. User requests page
  2. Server populates page with local api (small delay)
  3. Server serves page with said data

Currently my solution is that I call the api from the page (slow!), and this means that there is a delay before the user sees the result (because I am requesting all the way back to the server instead of handling everything on the server side). Pardon me if this is me misunderstanding what SSR is but it 'feels' right to me (since its rendering on the server side.... or something......)

Or is this completely impossible ? Thanks !

#

In python flask (a server platform I am more familiar with) I could do this by grabbing a template html file and formatting the relevant part of it with a variable right before serving it to the user, this is the behavior I am looking to achieve

stable oyster
#

Hi all, here is how I got it to work

in server.ts

  server.get('/', (req, res, next) => {
    fetch('http://127.0.0.1:5000/api/usercount', {
        method: 'post'
    }).then((httpresponse)=>{httpresponse.text().then(usercount=>{
        const { protocol, originalUrl, baseUrl, headers } = req;

        commonEngine
          .render({
            bootstrap,
            documentFilePath: indexHtml,
            url: `${protocol}://${headers.host}${originalUrl}`,
            publicPath: browserDistFolder,
            providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
          })
          .then((html) => res.send(html.replace('[...$USER_COUNT$...]', usercount)))
          .catch((err) => next(err));
    })});
  });
stable oyster
#

This solution is nto sufficient though, is there a way to set angular variables from here ?

steep sundial
stable oyster
stable oyster