Does a browser logs a history on url hit? or when all the resources of an html page are loaded?
In my page, few external links make my landing page load a little longer..though the html(view) page is rendered. Based on a condition check, angular js routes to the second page quickly, but the browser history log doesn't store the first page's entry. We have back button functionality enabled in our page. So when a user clicks on browser back button, it should show the first page. But instead, browser's home page is rendered.
I've already asked a similar question related to angular js here:
Angular JS - How to force browser to log history for quick routing?
I'm unable to adopt both the solutions since we're not encouraging any third party scripts such as angular ui-router. Also, the second solution is not adoptable since after $http.get('/someUrl') we need to delay for few seconds to call another service. If "someUrl" takes some 6 to 7 seconds, we need to know this delay beforehand (which is indefinite) to call another service.
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.
For more help refer this
Angular JS - How to force browser to log history for quick routing?
Angular's $location.replace() did the magic at last.
Previously I was using $location.url('/somepath') which was only redirecting to my browser's home page instead of saving first page's history.
Related
I researched a lot on how to measure the page load times in a single page application like React, Vue etc but did not get any proper answer.
In Websites that are built using Single Page Application frameworks/libraries like vue, react etc load the initial page only once and then all the route changes do not fire a page load. To understand it better let us say our landing page is /index. When index route is loaded it is considered a Page Load but when we change the route to let's say /index/products here SPA takes care of it and loads the content using AJAX without loading the page.
But in websites that are built without SPA frameworks the case is different it loads every page on route changes and we can run the below line of code on each page and get the performance metrics.
performance.getEntriesByName(window.location.href)
This line of code simply returns a dataset containing some information about the page load speeds as shown in the image below.
So in SPA it runs only once and not when we change the routes. So what I want to do here is that I need to make this line run on every route change so that I get the above performance metrics that are shown in the image for every page.
Right now it only runs for the main page and when I change the routes inside the website, it does not run for every page. But in the case of reload it works properly because reload is again a new page load.
I have a CMS backed web site where Vue.js was added to handle a UI feature of the site. The feature has tabs that switch content on the page. I need to make the tabs deep linkable as in there needs to be a way to have a certain tab set as active on page load. I can easily achieve this using a URL has but I would like to see if I can just use the Vue.js router. I haven't been able to find any resources to add the router to an existing site that isn't fully powered by Vue.js.
Is there way to add vue-router without any additional server configuation?
You could use Vue Router in the hash mode for history. Your URL would end up being something like www.example.com/post/1#tab1 and www.example.com/post/1#tab2.
One caveat, if SEO is important to this site, then you would need to do the routing on the server to make the page easier to crawl by Google.
I created a React App on a multi page website, but I don't know how to integrate it on our website.
Explanation of the problem
The user load the website "/" (no react code is involved at the first loading)
The user click on a link "/appReact"
The _"/appReact" page loads the page and the React app code
The React app sends ajax requests to the server
Finally the React app gets the data and render itself
The step 3 and 4 makes the loading very slow.
The step 3 delay is caused by the multipage nature of the website.
The step 4 delay is caused by the response of the server
Possible solutions
I can try many different solutions or combine them, but I'm not sure if is the right way to proceed.
Optimize the react app to makes the ajax loader faster
In my case I can do that but is not the real problem.
Load the React app when the user load the website ("/")
This could improve the step 4, but we carry on the React app all around the website.
Use react router in conjunction of the multipage website
I don't know if is possible to do that. React-router can handle the url to load different apps, but I don't know if is possible to do in a multi site page without affect the site.
A trick using jquery
I have this temptation to bind the click (step 2) and hide the content of the page to run the react app. This will simulate a Single Page Application, but is a patch. I would like something more reliable.
Any suggestion?
You could try React Habitat
That way you can pass properties to your React App directly on page load and not need the additional ajax request.
I am making one-page web on my school project. I am using very simple history API, to just change the URL so user thinks he is on another page (but I am hiding and displaying different elements on a page)
It looks like this:
www.mypage.com/main
www.mypage.com/slideshow
When I am using the application with back/forward history buttons it works fine, but when I want to reload the page, the browser tries to load that fake URL and that cause a crash of course. How do I manage to stay always on index.html no matter what url is displayed to the user please?
I tried to manage this with htaccess, but I wasn't sucessful
It seems you are not using a back-end, which is the only way to achieve your desired result. (If my assumption is correct) The browser gives error (cannot load /slideshow after refresh) because it is trying to fetch that file (from you local machine) but that does not exist. SO answer explaining this well.
So in your example you should instruct the back-end to render the same view for all routes (using a wildcard), and do the displaying on front-end based on the given url.
You do not have to use React-Router, but instead create a router-handling function which runs at each refresh (that is, when your javascript is loaded) which tells your page what to render based on what route (or url, call them as you like).
(you will know that the javascript will be run for every url, because the back-end already handles routing with the wildcard, *)
If you want to rewrite all requests to only one URL, you can do so with just
RewriteRule ^ /index.html [L]
I am creating an angular app that is hosted on a webserver that doesn't allow me to edit htaccess files or webconfig. There is no server side language option available which means no middleware for creating HTML snapshots. This is a high dollar CRM with webstore and no option of switching hosts.
So I have come up with my own "solution" to the issue. Would it be considered ok to create hyperlinks that link to url's that will generate the same view that will be updated by an onClick event. This way the user will see the content loaded immediately, but bots will have to reload the page at the new url to see the page content.
Example:
View 2
I'm struggling to find a good solution to this issue, and I know others have to be in the same situation as me when it comes to development. The code above is just a visual reference to what I am referring to.
Have you looked at
grunt-html-snapshot
After implementing this and testing this, it does work well. Google sees them as new pages and the user never has to worry about loading new content.