I am working on a page that utilizes the Anuglar SSR functionality. It is a static page so there is no server that communicates with it.
I request a json asset on a page that contains information on what routes are available and builds [routerLink]
elements based on it.
@for (post of filteredPosts; track $index) {
<!-- This element contains a routerLink that uses information from the postData -->
<stars-blog-post-card [postData]="post"></stars-blog-post-card>
}
ngOnInit() {
this.handleSeo();
this.blogPostDataClientService.getBlogPostData().subscribe((data) => {
this.posts = data.filter((post) => post.published);
...
this.filteredPosts = this.posts;
// We use OnPush change detection
this.cdr.detectChanges();
});
}
I think there is a problem with this approach when it comes to web crawlers. The elements are only visible after successfully transfering the asset json file. Correct me if I am wrong on this, please!
Is there a way to populate routes build from asset information in the preload stage so that webcrawlers can see the elements? If not would it be better to create an entry in the sitemap.xml
for every subpage?
With this current approach the page is rendered after receiving the asset as expected. I tried to manually include the json file in the code instead of transfering it, but I am not sure if this is best practice or changes anything.
You are looking for Prerendering (SSG)
where you can try out different options like
discoverRoutes - Whether the builder should process the Angular Router configuration to find all unparameterized routes and prerender them.
routesFile - The path to a file that contains a list of all routes to prerender, separated by newlines. This option is useful if you want to prerender routes with parameterized URLs.
I guess you might need option 2 since it might be a parameterized route.
But the gist is configure this so that the content is prerendered and the web crawlers are able to see the contents