Splash Screen/Preloader Screen without affecting Head Meta Tags
Unanswered
Egyptian Mau posted this in #help-forum
Egyptian MauOP
Hello,
I am trying to achieve the Splash Screen/Loading for all the pages before actual content is loaded & also without affecting the SEO (Meta Tags and all), anyone can help me that which will be the best way and how I can achieve it?
Furthermore, I tried using Router.events.on() but on the initial page load it's not working at all, then I settimeout isn't viable especially for low bandwidth internet connections,
can anyone help me on this?
I am trying to achieve the Splash Screen/Loading for all the pages before actual content is loaded & also without affecting the SEO (Meta Tags and all), anyone can help me that which will be the best way and how I can achieve it?
Furthermore, I tried using Router.events.on() but on the initial page load it's not working at all, then I settimeout isn't viable especially for low bandwidth internet connections,
can anyone help me on this?
65 Replies
You can achieve it via dynamic import or
For Pages Router, you may need to do it for individual pages
Suspense in App Router. For Pages Router, you may need to do it for individual pages
@fuma You can achieve it via dynamic import or `Suspense` in App Router.
For Pages Router, you may need to do it for individual pages
Egyptian MauOP
how to do it in Pages Router? any idea?
[Dynamic import](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) allows you to lazy load a component, you can define a loading component (like skeleton)
And SSR supported
However, if you have some advanced stuffs like state management/React Query, you may have to render a loading component for each portion, or use a global state (e.g. zustand) to implement this
@fuma [Dynamic import](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading) allows you to lazy load a component, you can define a loading component (like skeleton)
Egyptian MauOP
but I don't want to show the Loader for the each component but instead for the entire page,
You need to use a global state for that, with libraries like zustand
Just fetch all the information you need for the initial render, and hide your loading screen since everything is ready
Similar to discord, you'll be connected to their Gateway and receive payloads like user profiles, firends, servers. etc. before the loading screen gone
You may implement this logic in _app, or wrap your page in a shared layout
Egyptian MauOP
but if I implement login in _app then it might can affect the
Heads tag right, because it'll wrap the <Component {...pageProps} /> soI tried some solution, but nothing worked for me
Normally, you would implement authorization in middleware.
Also, without that, unauthorized people can access your head meta tags including the title. And you won't hope to let crawlers access protected pages either.
so you may add default meta tags before your page is loaded, like a "loading" title
Also, without that, unauthorized people can access your head meta tags including the title. And you won't hope to let crawlers access protected pages either.
so you may add default meta tags before your page is loaded, like a "loading" title
@fuma Normally, you would implement authorization in middleware.
Also, without that, unauthorized people can access your head meta tags including the title. And you won't hope to let crawlers access protected pages either.
so you may add default meta tags before your page is loaded, like a "loading" title
Egyptian MauOP
I don't have any kind of Authorization, it's just a normal Portfolio kind Website, where I need Loader
but what do you mean by "login"?
@fuma Normally, you would implement authorization in middleware.
Also, without that, unauthorized people can access your head meta tags including the title. And you won't hope to let crawlers access protected pages either.
so you may add default meta tags before your page is loaded, like a "loading" title
Egyptian MauOP
I think you've misunderstood my point for what I meant for Heads Tag
@fuma but what do you mean by "login"?
Egyptian MauOP
I mean loader, typo mistake
sorry ðŸ™ðŸ»
Similar to auth, you can add default meta tags to _app
with some libraries like NextSEO
Egyptian MauOP
but in Nextjs Pages Router, we already have inbuilt
Head tagsNextSEO provides typed meta data and a better abstraction, depends on you, but I think the built-in
Head isn't quite enough for a complex application to handle metadatabut I just want to show a simple Loader before all the content of a page is loaded
For instance,
Home - My Blog, you can use a title template: %s - My BlogEgyptian MauOP
because currently I am facing a issue is that, when I open the page for the first time, the Navbar, Hero Section structure is not coming with CSS, after 2 3 seconds it's adjusting correctly
Why? Are you render these components conditionally
Egyptian MauOP
no
not conditional
normally like, I've separate out the each section component separately, and calling it in the
index.js pagenothing else I am doing, even there's no SSR or ISR or SSG anything
@Egyptian Mau I don't have any kind of Authorization, it's just a normal Portfolio kind Website, where I need Loader
To be honest, for a simple portfolio site, you don't need CSR
With SSR, you can pre-render all these on the server
And if you just wanna lazy load the page, use dynamic import
Egyptian MauOP
I am not able to explain properly what I am trying to achieve and but not able to do it
@fuma And if you just wanna lazy load the page, use dynamic import
Egyptian MauOP
not Lazy Load, for Lazy Load, I am aware how to do it
can you open this website?
@fuma
For this, why do you need the loader?
A UX-wise solution is to remove it
Egyptian MauOP
as I mentioned above, Navbar + Hero Section structure is not coming properly, like CSS isn't applied but after 2 3 seconds it's getting applied
which is affecting the Google Lighthouse Report as well
like LCP and all
@Egyptian Mau as I mentioned above, Navbar + Hero Section structure is not coming properly, like CSS isn't applied but after 2 3 seconds it's getting applied
The problem is why your CSS isn't applied properly, rather than adding a loader screen
It affects user experience
Egyptian MauOP
I am using MUI, and before I build one of my own Website in that I didn't noticed such issue
but this time it's happening
I know MUI may not working properly in App Router, but it should work great in Pages Router
Egyptian MauOP
I am using Pages Routers only
earlier it was working correctly like in my different website
but in this website, in both dev & prod mode, in both I am having same difficulties
For this, you should actually ask for help in fixing the MUI problem
Egyptian MauOP
but I don't know the actual problem is from where, because in both Nextjs website the difference is of Nextjs version only, nothing else
Ok, so back to your topic, if you wanna show a loading screen for 2~3s, add the default meta tags to your _app can solve the issue.
I may not help with MUI since I rarely use it and am not familiar with using MUI in Next.js.
I may not help with MUI since I rarely use it and am not familiar with using MUI in Next.js.
@fuma Ok, so back to your topic, if you wanna show a loading screen for 2~3s, add the default meta tags to your _app can solve the issue.
I may not help with MUI since I rarely use it and am not familiar with using MUI in Next.js.
Egyptian MauOP
but I am not able to loading screen, and settimeout is one solution I am not making it a viable solution because in Low Bandwidth Internet this isn't a handful & useful solution
alright, I think you need to make MUI work properly first (since loader solution doesn't make sense for a simple page)
Try figuring out the problem yourself, and reproduce it in a minimal repository?
Members who are familiar with MUI may solve your question
Egyptian MauOP
and Furthermore, when I tried the same with Vite + Reactjs, that time I didn't faced this issue
Because Next.js supports SSR, your page will be pre-rendered on the server
so it's clearly a mistake when you're using MUI with Next.js
@fuma so it's clearly a mistake when you're using MUI with Next.js
Egyptian MauOP
as I've already mentioned earlier, in my previous Nextjs Project with MUI, with different Nextjs version, I didn't faced the same issue
That's why you have to reproduce the problem again and seek for help
Try debugging it by downgrading/updgrading your Next.js