Read data from file and use it on Angular ssr and csr

Question

I have a config file and I want to use it without HTTP request on angular SSR and then somehow send data to CSR and use it on that too, this config file is a list of links that I want to use in website footer and be able to change them without rebuilding the project or making HTTP request. The solution I tryed is to read from the config file every 1 hour in server.ts like this:

fs.readFile('./src/skills.txt', 'utf8', (err, data) => {
    console.log('updated skills');
    if (err) {
      console.error(err);
      return;
    }
    if(data) {
      skills = data;
    }
  });

But then for sending this data to response all I could think about which is not really a good way of doing it I guess is to loop around this file and create my output HTML and then replace a key I put in footer HTML with it in returned html as bellow:

res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }, (err, html) => {
    if(skills) {
      html = html.replace('#skills_placeholder',skills);
    }
    res.send(html);
  });

This way I have the output I need in SSR response but I also want to have this response on CSR when user is logged in. I tryed to add an element with and id and select it on CSR but its undefined, Tryed example :

res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] }, (err, html) => {
        if(skills) {
          html = html + '<span class="d-none" id="perfectlancer_skills">' + skills + '</span>';
        }
        res.send(html);
      });

And then on CSR I tryed:

this.doc.getElementById('perfectlancer_skills'.innerHTML

but it is undefined althoght it exists on SSR response;