Angular Universal for dynamic content?

Question

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?

Answer 1

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.

Answer 2

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.