I have a navigation bar that has a dynamic prop and data of this props should be fetched from API in getStaticProps. the navigation bar should be displayed in all pages of my website. so the best way to display the nav bar in all pages of my website is to put that in _app.js component. but I want to use getStaticProps method to fetch those data! and the problem is that _app.js doesnt have this feature. all my pages render statically. so if I use getInitialProps method in _app.js page, I lose automatic static optimization and I don't want it. in the other hand, I don't want to fetch the data on the client side. so what should i do in this situation? Whats your suggestion? note: I searched a lot on the internet and I saw a lot of questions in Stack Overflow but I couldn't find exactly what I want.
UPDATE
from the answers of this question and other questions, i think i have no way and i should choose between using a layout and getInitialProps. But i have an idea. I can fetch datas on the server for example each 60 seconds and then store the fetched datas in a json file. And then i can import that json file in my nav bar component and use the latest datas of nav bar components. Whats your mind about this idea? How can i implement this idea in next js? Thanks for help again.
You can use React context for the data that is required in other components. Populate it with data from inside a page component and use the data in other components thereafter.
Related
Next.JS layouts can be used to persist page state, but apparently not API calls. The docs say to use SWR or useEffect to fetch data on page layouts, but this is a bad experience for data that is static, such as data that goes into a footer. For example, fetching a street address for a footer should not be done on the client, but on the server.
With all that being said - is it possible to call getStaticProps on a layout? Or is there another way to fetch data server-side for a layout?
You can only use Next.js data fetching methods inside of Next.js "page files" (files inside ./pages/ or ./src/pages/.
Layout components can't use these methods; however, they CAN expect props to be passed to them in a certain way.
So, while you can't add data fetching logic to the reusability of a Layout component, you can require props such that devs will need to use a data fetching method to provide the props as the layout component expects.
I am trying to build an App that takes advantage of the SSG functionality of next js and shows multiple Page components at the same time. Each of the components should be static and come with their own data.
The problem is that I don't know how to persist the first Page component when the route for the second Page component is called. Putting it into state works, but according to the react docs this is not a good idea. Of course I could simply get the data out of the props for the Pages and make the client render the component but this solution doesn't exactly take advante of SSG.
I made a codesandbox that shows what I'm trying to achieve by putting the pages into the state of the Layout component:
https://codesandbox.io/s/elegant-lichterman-v70zl
Is there a way to achieve what I'm trying to do whithout using state?
Or is using state in this way a feasible exception?
Or am I on the wrong track entirely?
Any help would be highly appreciated!
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 am working on a React app, and within it there is a page with a lot of graphs and large list component, which takes some time to load (performance dependant). This is fine for now, but the issue comes from the following:
at the first render, there is an API call (App wide as different pages use the same data). A loading spinner shows while the API data is fetched
Once the data is fetched, it is Redux manages the state, and each component just takes what it needs from there (no more loading).
My issue is that when I navigate between pages trough links (react-router), after I click on the link it takes a while for the page to show and the menu to update the current page. None of the state data has changed in that timeframe, so I assumed a PureComponent would prevent re-render, but it doesn't work.
Is there any way to not re-render the page? I would expect to click on a link an immediately see the page that was already loaded before.
Sorry if the question is obvious, I got quite confused while researching this, with cold splitting, lazy loading, etc. which seems to be more about initial load vs. navigation?
If you have a large component dataset to mount and your state does not changes or affects re-renders you could prevent component from unmounting entirely.
If you are using react-router you can rely on setRouteLeaveHook.
If your unmount depends on conditional rendering, it is easier as you can hide your component in various way, including css display:none
There are several ways you can do this
The first one would be to not unmount the component, just hide it with CSS and display: none, but that's a shit solution if you ask me, since you'll still have the component in the DOM.
Another solution that you can use is the one that the guys from the Facebook team used when creating the official website for React. Once you hover over the link to the page, send a request to prefetch the data for that page. So, before the user even clicked, you will have the request already sent.
Another solution you can use is to cache the data. If you are not worried about users with older browsers waiting a bit for the component to load again. You can keep the data for the component in localStorage, then, when you are about to mount the component, check if the data is already in localStorage if it's there, just render the component, if not, just grab the data again.
A combination of the first and the second option would make your component pretty much always instantly render.
I'm trying to make a WordPress theme, with React + Redux. I'm using this Wp + React + Redux theme as an example: https://github.com/jackreichert/a-wp-react-redux-theme.
On the homepage I fetch all the posts with the WordPress API link. When I click on a post, I'm mounting another component, which fetches the content of just one single post with the WordPress API link. But the router goes to the other component, BEFORE the new content is fetched. So when I'm going from the Home component to the SinglePost component, it still displays all posts below eachother (for like 0.5seconds) untill Redux has Fetched the one single post.
How can I solve this issue? I've already tried to add Thunk and Promise, and I assume i've done it the right way.
You can see my current version at http://react-test.friendsagency.com/, and if you navigate through the routes you probably will understand what my problem is.
You can see my code on https://github.com/ludovers/wp-react-redux.
If you see jackreichert's example, you can see that after you click a route, it navigates to the component after redux has finished fetching the data. But I dont see many differences between his and my code.
I hope you understand my problem, and I hope someone can help me solve this issue.
Thanks!