11

I want to use Angular Universal for two things: SEO and preview of the site on social media. I know it is possible with static site content.

But what about dynamic content? What if I want search engines and social media crawlers to find not only the main site with a welcome-screen, but individual blog-posts like www.example.com/posts?articleName=what-is-angular-universal-good-for? Here the route /posts is handled by a PostsComponent, which subscribes to queryParam articleName. So it always renders an article which it dynamically fetches from a database.

Would Angular Universal's server-side-rendering be applied here?

I see that Universal does have something called TransferState. But can that be used for dynamic content? I assume if you rebuild the server-side-app every time you update the posts-DB, it should be able to run the rendering on every (dynamically resolved) post. E.g. this would be the action list for the server-side code:

  1. Prerender Main Site
  2. Load array of all possible blog-article-URLs from a DB
  3. Fetch their content and prerender every single one of them
  4. When User requests a blog post, only the main site and that post is served. All the other other posts are prerendered and available on the server too, but do not get delivered unless explicitly requested

So is that possible or should I stop looking further into Universal?

Phil
  • 7,065
  • 8
  • 49
  • 91

2 Answers2

5

Angular Server side will work as any other server side platform. If you have to get articles from url will render the information of that article, is not different than a Wordpress or Django website in that terms.

Angular TransferState is just a mechanism that will pass all the information you gather in the server to the client so you don't have to do some requests again when the application starts on the client side. So you might what to do some HttpIntercerptor that will check the TransferState before doing a request to make sure the infromation is not there yet.

nicowernli
  • 3,250
  • 22
  • 37
  • 1
    Ah, so I don't need to prerender everything but just the the app core and the content loaded dynamically into it can be handled by crawlers? I thought Wordpress serves sites like in the old days of the internet, with everything being prerendered and called from a file-directory, without any JavaScript involved. – Phil Mar 15 '18 at 14:06
  • 1
    @Phil : did you get any solution to render dynamic content using angular server side rendering ? – M J Jun 09 '18 at 03:34
  • 1
    @MJ I have paused developing on my blog because I had too much to do at work last couple of months. But there are three possible SSR solutions: Angular Universal, Rendertron and Prerender-Loader: https://github.com/GoogleChromeLabs/prerender-loader Personally I want to migrate to Angular 6 first and check out if Universal got any easier to setup in the latest versions and if not, I would use prerender-loader, which other people have commented to be easier to setup than rendertron. – Phil Jun 09 '18 at 06:58
  • 1
    You might want to check out the starter kit https://github.com/enten/angular-universal – nicowernli Jun 09 '18 at 08:23
  • 3
    prerendeing is not the same as ssr, ssr is like nodejs serving dynamic content from an api or a database, pretty much like wordpress on php, only it's nodejs. Prerendering however is a technology of creating static version of dynamic content, thus any changes on server, you have to build again. Universal is ssr only. – Ayyash Jul 19 '20 at 14:08
3

Once you add angular universal it will automatically add ssr and it will load the dynamic content automatically. If it is not loading then check you console by running command "ng run blog:serve-ssr"(blog is name of project) in your local. There should be some error that's why it will not be loading. Once you resolve the issue then it will load the dynamic content automatically.

Note: Prerending does not allow load of dynamic content only server side rendering does.

Coding Geek
  • 31
  • 3