I'm working with NextJS, I'm using context and useEffect to keep track of login session. I'm noticing that when I navigate from a page to another existing page (ex: Home -> About), Next doesn't re-compile my pages and only does a client-side routing, so my context is preserved and it's useEffect is not triggered, but when I navigate to a 404 page, the 404 page is being re-compiled by server everytime, so the state of the context goes briefly on the default state before triggering the useEffect to update it.
Is there a way to avoid re-compiling on 404 page? Like doing it client-side to preserve context?
Looking around the internet I didn't find anything about how the pages and the 404 page are compiled, so: do you have some resources to look at to understand better how NextJS pages and error pages routing and compiling works?
Also, do you know if there's a way to avoid re-compiling the 404 page everytime, to avoid that initial default state?
I reproduced the error in a CodeSandbox snippet:
Basically I have a ContextProvider in /context/context.js, in the context I have a useEffect that modifies the context state, delayed by 1sec, so you can appreciate my problem).
After the page is loaded and 1sec passed, my context "id" is set to 10, if you navigate from "Index" to "AnotherExistingPage", the context is being preserved, because the routing is client-side, when you navigate to "404 page" (that's simply rendering the same thing as the other two pages), the context is reset and the useEffect is triggered again).
As a solution for avoiding this "state loading" I thought about using SSR to fetch the login status before serving the page, but I still want to know why 404 routing triggers a full website reloading instead of a client-side routing.
Related
Server Side Rendering (in Nuxt, but I think this is fairly universal) has been explained to me as:
When using Nuxt SSR, you request an URL, and get sent back a
pre-rendered HTML page. After loading, the browser starts the
hydration code, at which point the static page becomes a Vue SPA application.
I presume (perhaps incorrectly) that regardless that you are now in SPA mode, if you request a new page (eg. you are on "blog/ten-blue-things" you follow a NuxtLink to "blog/ten-red-things") the browser sends a new request to the server for this page, and effectively break SPA-mode? Or am I wrong?
I really hope the answer is that it does not make a request. In my scenario all the required data is very likely already available, and if not the page would make an API call to get anything missing to dynamically render the new page "blog/ten-red-things". Fetching a pre-rendered page after the first fetch is wasteful in my scenario where everything is already on the client (to clarify this further, this is a PWA offline-first app; I'm adding SSR for the SEO and social sharing of pages).
However, I also wonder that if it indeed does not make a request, does that (generally?) hold true for crawlers as well? I'd rather they DO make a separate request for each page in order for them to get the prerendered SEO-friendly version of the URL. If a crawler has js enabled, it may execute the hydration code, and then what?
Can anybody clarify this perhaps?
Does it matter for this anwser if instead of SRR we employ ISG (incremental static generation)?
It does not break the SPA mode, once you've SSR'ed and hydrated, the app stays as SPA. You can notice the fact that you don't have any "page reload" because you're doing a vue-router client-side navigation (as to oppose to a regular a link navigation).
The rest of the app will still be SSR'ed properly, you will not go back to the server meanwhile (as to oppose to Next.js).
They are several ways to debug all of this thanks to some devtools + trying to disable the JS/inspect the source code. But yeah, crawlers will properly parse the SSR'ed content.
PS: you can also choose what kind of rendering mode you want for a given page so if you want some to be SPA-only, you can. The rest could be SSR'ed (during initial render) + SPA after the hydration.
SSR or ISG will not make any impact regarding crawlers/SEO.
It works differently from SSR of course, but the rendering part will be the same regarding the markup. Only the "freshness" will be different.
I have a next app deployed in aws. I'm having an issue with dynamic nested routes, the issue is that given a route eg. /contacts/[contactId].
On my local env if I go to that route, the page renders correctly, if I refresh it it renders correctly as well.
Now on the server it behaves differently, since going to that route while navigating the site will work as intended but if I refresh the page or try to access it by pasting the url in the browser, the one that will catch the route is the index file inside my pages directory, not the nested route.
Has anyone faced this issue? Thanks in advance.
At the moment, I am trying to make an application with NEXT.JS. When I come to revalidate of page using method ISR. I very confused to understand how it works for the system or how is it auto to rebuild data of the pages in the system?
Many thanks.
You can think ISR as the combination of the SSR and SSG.
When you defined revalidate in getStaticProps, Next.js will generate the static HTML during build time because getStaticProps is exported.
When a user makes a request to the page, that Next.js app will serve the statically generally page. In fact, all the users will see the same page.
After the validation time is reached, the first user request to the page will make Next.js server-side rendered the page again. The generated page will be saved locally.
All users will be served with that newly generated HTML until the next validation. We then go back to step 3 again.
I am using window.history.pushState(name, title, url); to change the browser URL to let the user know what static url corresponds to an application tab pane.
But Meteor reloads the last real URL (the URL we landed on, before pushState) at each application state change (Meteor reactivity).
How do I change the URL without using a Router.go (that's too heavy for what I am doing, just clicking on a application tab).
OK, I figured it out. The whole route was triggered again (so reloading the page) because I called a reactive function in onAfterAction. pushState is fine. Meteor also. Duh. :)
My tech stack: Node.js, express.js, backbone.js.
My web app is a two page app (you can hit two express routes to get fully rendered pages). Let's call them page A and page B. When I load page A and click on a link to load page B and then I press the back button, I only get a partially rendered page A (the part of the page that I can also deliver as an express.js partial with res.partial (not partial() within a template) via XHR).
From what I've debugged so far, pressing back in the browser doesn't hit an express route. When I inspect what Javascript is loaded there are no resources loaded. I was thinking I could do some debugging with the fronend routes (I'm using Backbone.js), but all I see is the partial HTML loaded on page A with no CSS styling and no JS resources.
Any direction on how to debug this issue?