When I open /app/wa/638934e53d4211b0167378b1?c=6392418d966eaa4e1dbe9e7d route and put a button there that on click calls router.push("/app/wa/638934e53d4211b0167378b1?c=6392418d966eaa4e1dbe9e7d") (SAME ROUTE), nextjs rerenders everythings and make api calls for all the components e.g sidebar, layout, navbar.
My app is using Client side fetching.
Based on the slug in [...slug].tsx, useEffect is called.
I use router.query.slug to a access slug value
useEffect array contains [slug] but I even tried with empty array. It's like whole page is rerendering
Related
I have a NextJS application with a page to display some information from my API. I currently have a useEfect hook with an empty dependency list that calls the API. The problem is that if a user then goes to another page and changes their information, when they navigate back to the first page the useEffect hook doesn't run again and the user is shown outdated information.
I know that this is somehow related to the fact that NextJS doesn't refresh page states with navigation, but I'm unsure how to get around it. I've tried using the NextJS useRouter hook and adding router.query.slug to the useEffect dependency list but that doesn't seem to do anything.
Any help is appreciated, thanks!
useEffect(() => {
loadInformation();
}, []);
This doesn't fire when I navigate back to the page but I would like it to.
How do you navigate back to that page? If it's through a button click maybe you could try using router.push instead of NextJS Link Component or Adding router.asPath as a dependency instead of router.query.slug
Assume I'm in some page that has so many interactable components and use useState hooks to handling component states. When I click the link on the navbar that route to current page I stay (same path) it look like nothing happens. I want to reset all states (hooks) like I just enter this page from somewhere else and also call getServerSideProps() function from the server again but I don't want to use window.location.reload() because it will reduce web performance. Is there any method possible?
Does Reloading of react app i.e not implementing will remove all the saved state in our react app
Edit:
To be more specific ,
The question was what will happen to the child components state when its parent component gets reloaded i.e whether the state will be removed or not
Your question is a bit vague, but it depends:
If you are reloading your entire react app then yes, all your states will be lost. You can however persist data using localStorage in most cases.
If you are reloading a component from your app, you can save state using useEffect, or by using react class components rather than functional components and use the componenetDidUpdate function to catch updates. Additionally componentDidMount can help you recognise when a component is re-rendered and use it to read persisted data from localStorage
If your component is within another component that does reload then yes it will also reload and state will be lost.
You can read more about the component life-cycle in the react-docs but they don't really touch on it.
I've 4 routes, 3 of them have external embeds. Each time route changes they get unmounted and have to refetched when you get back to their particular route.
I want to be able to do two things:
If user navigates to another page do not unmount the Iframe component, or alternative that gets the same results.
Once the current route has loaded start rendering other pages (fetching iframes) in background.
Im trying to do SSR to my React + Next.js application. I have a proble with rendering dynamic modules. In _app.js I'm loading data and put them to my redux-saga. This is working fine but my SSR does not works for that data, because Im trying to render component with redux data instead of component props.
SSR only works, when I do api call inside getInitialProps, and put those requests via getInitialProps to my component. This is weird behaviour for me but let it be. It works by this but now I got another problem.
All those data that is responsible for my content are also listed in page view source. WTF - why there are in html content. Also because of that my page source view is loading few minutes.
Is there any option to not put those props into page source view ?