I'm creating a PWA for my website.
It was a multiple page website built using jquery. Now I have created an app shell which consists of a common header for the site. My site has good SEO ranking and ranks in top 3 links usually.
Now when I want to go from page A to page B and I want the header to be preloaded and a loader gets displayed until the data for page B is received from the server. I am still using jquery as most of the modules are already built in that and I don't want to rebuild them.
Now the only solutions I can think of to achieve this is either using an ajax call or using routes on the frontend. I have few queries and perceptions about these solutions and want to know if I am right.
1) Using Ajax - When calling page B the HTML in response will have only the header and the loader and a js file in which will have the ajax code to load the data on the page. Once cached the HTML containing header and loader will be fetched from cache and ajax call will be made to call data.
Please correct me if I am wrong.
Now, the problem I see with this is that consider I have page 3 and want the same functionality in it then, I'll be storing the same header again in the cache for this purpose.
2) I have heard that routes on frontend are not SEO friendly or require extra effort to make them SEO friendly. So I don't want my ranking to be affected due to this. Moreover, I don't have any idea about good routing library which handles everything for me in Jquery or Core Javascript.
Any help will be highly appreciated. I am highly confused at this moment so any guidance or reference in the correct direction will be of help.