seo Question posted in
Some basic information to get you started with this can be found here.

Is there a way to combine CSR and SSR for the same Angular app? – SEO

My Team is looking to build something like a Medium clone. The posts created by users are not expected to change much, so SSR/SSG seems like a good option, especially if there’s some incremental build feature available. However, things like ‘upvotes’ on posts can change very frequently, so we are unsure how to accommodate that.

Also a part of the app that will lie beyond a login, like Dashboard, or an editor to create a new post… etc, doesn’t need SEO, so we were thinking if that could be done via CSR, while other parts remained SSG or SSR.

Can such a combination be done with Angular Universal? We have been making CSR Angular SPA-s only till now, so apologies if the questions are a bit dumb 🙁

Tags:

4

Answers


  1. 0

    SSR does not mean caching. It means that when you land on the page, the content will be dynamically generated from the server. The resulting page will contain html for the components, instead of just the normal content of your index.html with CSR. So you’ll end up with a faster page display, and a page which can be read by search engines.

    Once the page is rendered and all js parsed, the client side angular app takes over. The client side app will make the API calls again (unless you use TransferState), and render the components again.

    Maybe you are confused with server side pre-rendereing, where html pages can be pregenerated for some routes. This is faster than normal SSR, but the data might not be up to date. In any case, the angular client app takes over once the page is loaded.

    Login or Signup to reply.
  2. 0

    I’ve been looking into this issue myself. It looks like there is no way to mix both CSR and SSR in the same application out of the box.

    There are few articles online that mention Dynamic SSR in Angular applications but I couldn’t find any code snippets.

    This article shows how to do it with nginx service, however.

    Login or Signup to reply.
  3. 0

    Take a look at this hybrid approach. We are solving a similar problem at my work where we want most of the content prerendered as it won’t change often, but there are a couple parts of the site/page that are dynamic based on who is signed in.

    Once the prerendered HTML files are passed down to the browser, the rest of the Angular app is loaded on top and the JS is executed like normal – allowing you to load dynamic content as you wish.

    Login or Signup to reply.
  4. 0

    You can have both CSR (Client Side Rendering) and SSR (Server Side Rendering). You have to return the index.html file instead of rendering it on your server.ts file. Helpful if you need SEO but have issues with DOM functions.
    Here is an example:

     // This route will do CSR
 server.get('/CSR', (req, res) => {
    res.sendFile(join(distFolder, 'index.html'));
  });
  
  // Will do SSR
  server.get('/SSR', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search