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

Is Angular 2 Not Appropriate for Multi-Page Apps? – SEO

I have a working example of a multi-page app using angular2. It seems load times are slower than I want them to be, when developing locally.

I’ve read another thread, here on stackoverflow, that shows how to set this type of situation up: How to use Angular2 as a non-SPA?

This definitely works but I feel like it slows down your applications load time.

What is the state of the art of using Angular2 in Multi-Page Apps? Doable but not best practice? Is React a better choice for this type of thing? Please provide some perspective.

Note that this is not a duplicate question asking “how” to use Angular2 in a multi-page app but asking if it is considered bad practice due to loading the app on each page etc.

Also, as far as the reasoning why I need a multi-page app and cannot use a single page apps is because my app is data-driven. SEO is important and it seems like Angular falls off in that respect. Prerender and Angular Universal don’t seem to cut it for my use case.

Any thoughts?

EDIT:

There have been some questions asking why I want do this. Here is a response to a commenter:

“I need some pages that are highly interactive that would be easier to implement with Angular. Plus, it is nice to be able to share components across projects.”

Tags:

2

Answers


  1. 0

    I never thought about this.

    My guts feeling is that caching will be your best friend. When you build an app, it’ll split your resources (including js, html, etc.) by vendor and app (or page wise in your case) type. Vendors normally don’t change much from page to page and are the largest in size. So if you can isolate that part out, you should get a decent performance improvement in terms of server and browser cache hit.

    Here’s list of things not change from page to page, including

    • static resources, ex. pictures
    • index.html referenced resources, even though you have multiple pages, but most of the references inside will be same ex. angular vendor file.
    • your component module library, if you isolate that out, it’ll be another vendor module file to include.

    Overall you should test if things unchanged are sitting together. If you end up with three major files, and two are not changing at all from page to page, then it’ll be a bingo. Otherwise, it’ll suck for sure.

    Another thing which I’ve been told is server rendering, if everything is rendered there, you might be able to control quite a bit of caching yourself. Especially when you are concerned with SEO.

    Login or Signup to reply.
  2. 0

    Instead of some general concept, I have the following idea, assuming you need to build 10 pages.

    • Wire the server to hit same index.html with different urls;
    • Read the url parameter to tell which url hits this file;
    • Remove all angular internal routing
    • Instead, use ngIf to custom code the routing, since in your case angular routing is useless and misleading. You can need to turn on the right DOM for the right page.

    You end up with a server hitting the same page (identical twins) again and again so that you are essentially serving a SPA, only this time for multiple urls.

    What if I have to build 100 pages.

    You have a better weapon, since you can put 10 pages in product.html, and 10 pages in admin.html. The idea is

    • Remove angular nested routing
    • Use Html to split url or child url

    This idea can scale up and down very easily and really goes back to traditional web development 10 years ago.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search