I have a nextjs app connected with redux (using withRedux) and my navigation is driven by a header, in which i use links for links to different parts of the page.
I'm implemented _app.js to set up the container, provider, withRedux and in the getInitialProps in _app.js i fetch a list of users by dispatching an action, and make the results available on the store.
it all works fine when i visit the home page, then i click on the link to the UserList. the dispatch call to load the users is done on getInitialProps in _app.js.
If i visit the route directly in the browser (localhost:3000/UserList) getInitialProps is not called and the UserList page is empty.
I don't know where to go from here, i've spent a day and a half.
Not sure if you are working with server, my case I am working with nextjs static site. In the NextJS documentation itself they mentioned
getInitialProps will only be executed on the client when
navigating to a different route via the Link component or using the
routing APIs
Means on server side getInitialProps is always called, but on client side navigating to URL directly doesn't work.
I am planning to use componentWillMount and Dynamic Import for the solution.
I will update if thing works.
Related
In my Next.js application, I'm having the well-known problem of being able to navigate via <Link> to dynamic routes, but when I refresh that page, I get a 404 error since the page was rendered client-side. The app is serverless, so a custom server isn't an option, and the paths I need can indeed be fetched from an API, but that API requires token authentication first so I can't populate the paths I need to pre-render with getStaticPaths either. This app is dynamic, and the pages I'm trying to access through dynamic routes use a lot of Client-Side Rendering anyways, so I don't have a problem with pushing rendering over to the client. I just need to know how to do that if that's the solution, and those two solutions (custom server and getStaticPaths) are the only two I've been able to find.
EDIT: I also use next export to deploy.
a quick NextJS Question -> Why does getInitialProps is running when a page is being redirected to (using Router.push \ Router.replace for example), but isn't running on a page refresh? What's the rational behind this?
Thanks!
I'm using a bit old NextJS version -> 6.12.0
For the initial page load, getInitialProps will execute on the server
only. getInitialProps will only be executed on the client when
navigating to a different route via the next/link component or by
using next/router.
This means it'll be invoked in Initial Page Load -Refreshes Apply- where it get's executed in the server side, not the client side. As from
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 ?
I'm working on a project and I have two components called home , about components.
When I'm on the home component and I'm going to the about component everything all right
but When I'm on the about component and Reload the page again error not found(404).
what?
The problem is, on your first load (at home component), client receive the whole ReactJS App and the routing from that point will be handled by ReactJS App (client routing). In your second case, you are at the about (component) and reload the app, the request send to the server like .../about and no route on server match it then it returns 404.
P/S: Follow along with Next official tutorial, you will face that case and they explain quite clear about it.
https://nextjs.org/learn/basics/getting-started
I Have a Carousel Component and I wanted to change the URL so that google analytics could see to which steps the user went (without reloading the page).
I used React Router with its BrowserRouter component to update the route with the help of this.props.history.push(`#${value}`); and withRouter which successfully updates the URL route. But Google Analytics doesn't seem to see the difference... The website site is at this link If you wanna check the behavior:
http://upscale-technology.com
Normally your Google Analytics details are added to the HTML file triggering a page view when it is loaded. When you visit another page of the same website and Google Analytics is implemented there, it will log the new page.
In a single page application, routing is taken care of on the client without page reloads. What you are looking for is a way to let Google Analytics know that it should log a page view when a certain action is taken. It could be a click event, state change or a route change. It's up to you.
To achieve this you can use the React-GA library. Use it in the following way.
// Import it at the top of the file
import ReactGA from 'react-ga';
// Initialize it once, e.g. in your componentDidMount for example.
ReactGA.initialize('UA-000000-01');
// Whenever you want to log anything to Google Analytics, use the below.
ReactGA.pageview('/carousel/#1');
NOTE:
Be careful where you implement the .pageview([url]) function. If you are not careful it might be triggered on a re-render. This would mean you get false page views in you metrics skewing your analytics.