Next.js page rendering glitch when refreshing pages - javascript

I'm having a weird problem that I originally just dismissed as a development glitch, but now I'm more concerned because It happens every time I refresh the page.
The issue is when I navigate to another page (localhost:3000/otherpage), sometimes it wont render that page at all. The page will turn completely white and have no HTML elements on the page (according to the dev tools inspector). However If I'm on that page and refresh this will always happen. Theses pages are dynamically rendered pages that have logic written that tells them to load a skeleton page while fetching the data, or render an error page if there's a problem with the request. I'm stumped as to why this is happening and have not been able to find anyone else that has experienced this problem yet.
My question is:
Why does this happen? and how can I work around this?
I have a screen recording to better explain whats going on.
(link to unlisted video):
https://youtu.be/mJPp3P4ElsI

Related

Javascript - Page slow to show after not being the active tab

So I have developed a webpage containing some javascript and a couple of HighChart charts.
The page generally works great, every few seconds data is fetched from the server using an ajax request, and the chart is updated.
The issue happens when I have switched to a different tab for a few minutes and then want to go back. The page can take a very long time to show up. This happens on both Chrome and Firefox.
I couldn't really find out how the browser is handling javascript and page updates in non-active tabs, but it seems to be related at least.
Any ideas on how to improve the time it takes for the page to show?
To be perfectly clear, the page has no visible performance issues while it is the active tab.
So it turns out we froze highcharts just a couple of versions before this fix went in.
When we upgraded the version, everything worked great!
Many thanks to #WojciechChmiel for pointing me in the right direction.

jQuery.getScript doesn't load after a page reload?

I am trying to debug some code which loads a script with jQuery like this
$.getScript('src/myscript.js', function(){ // start page });
The majority of the time, everything works fine. But some users report intermittent problems with the page not starting. Based on logs I have added to the code, it is clear that for some users, the load callback is never triggered again after they load the page a second time. Clearing their cache removes the problem, but every subsequent reload of the page...it stops again. Other users report intermittent problems, same log results. The user who always has the problem is using Chrome on a Mac.
Anyone had problems like this? I can't find anything in the docs or Googling which would suggest a possible reason..

AngularJS - Erroneously Refreshing DOM

I've found a rather complex issue with my angularJS SPA website that I can't seem to find a solution for. When I go to the page for the first time (in chrome incognito mode), everything loads fine. However, when I click on a button to go to another page on my site, the DOM gets reloaded. This is a problem because I have some local values that I need to retain their values. I can't pinpoint an exact area in my code that's causing this to happen. Has anyone else had this problem before? Any help is much appreciated

Facebook Like And Twitter Tweet Load Slow

I have put a facebook like, facebook send, and twitter tweet button 10 times on my web page (1 for each article in my thread), but yet the page loads very slowly. Right now the site is just running on my local XAMPP stack but when I comment out those widgets, the page loads instantaneously. Otherwise it takes like 10 seconds to load.
It would be helpful to see the code to make sure you are applying it correctly, but I've experienced similar symptoms before. The way I would render it is by having the associated external Javascript files just before your </body> tag and not in your head. If the connection to the external host is slow, it can cause parallisation issues so you want to load it last.
This is happening all over the web lately. I'll see a slow-loading page and sure enough at the bottom there's a note that facebook or twitter is still loading.
The solution I found was an extension that shows the FB, Twitter buttons but doesn't actually load them unless you click the button. That way your page loads quickly and if FB or Twitter is slow that's their problem.
I use Sharrre for social sharing buttons. I activate it on mouseover so nothing is loaded until the user actually needs it. Hard to get it faster than this. It also supports a few other networks.
I don't load social sharing buttons directly anymore and only do it when there is no other option. Those things are horrible for loading times specially if used multiple times on the same page.

failing to render in extjs

Sometimes when I open a page, it has blank only, but when I refresh the page or the browser, the page can be rendered.
I want to know why it happened and how the problem happened so much!
Some code from your HTML could be helpful but this is what I'm thinking:
It may have something to do with the order in which you are including your JS files. Be sure to load ext-base.js then ext-all.js before your own javascripts. You will then need to load any other resources required for your layout to render.
I'm thinking that on the first (blank) load, it fails to load the screen because of the resources are not coming in at the right time. When you reload the page, the scripts load because they have already been cached by the browser.

Categories