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.
Related
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.
With nextjs 10, you can have a catch all route, which looks something like this [...id].tsx. The idea is that this will allow for dynamic pages. So it should match /example, /example/new, /example/new/latest etc.
The issue im facing is that a specific matched routes (for example /example/new) may need extra data in order to correctly render. Seeing as i only really have one file in my pages folder, i only have access to one getStaticProps call. Fetching all possible data for all possible routes seems quite wasteful.
Server side data fetching at the component level would solve his issue but this doesn't seem to be a supported feature in nextjs
Is there a recommended way around this? Conditional data fetching based on context inside getStaticProps ? 🤔
Where you should fetch data depends on the nature of your data. Also, when a user needs the data. You can use getStaticProps, getServerSideProps or fetch data on the client-side. See documentation to learn differences between the methods.
What is the best way to solve this UI usecase using react hooks - tiles screenshot
I have tiles that each need to make request to backed API REST endpoints. The number of tiles is configurable for every module, so ideally I want to have some configuration with array of items like
{title, text, asyncRequestFunction}
and based on that configuration array I want to do multiple async and concurrent requests to load data.
Each tile should show some spinner when the appropriate request is in progress and show data as soon as they arrive, not after all the data are available.
Can I solve it by some currently available hooks like react-hooks-async?
What really gets in my way is that react hooks cannot be called in loop.
Not completely sure I am answering your question Jirko, because it's usually better to show some code example of stuff you already tried.
From top of my head, I would have container component where configuration is pulled. Then mapped array of tiles from configuration and rendered child components with whatever settings you need passed as props.
Like this each child component can take care of it's own fetching inside useEffect or any hook you use from the library.
Additionally hooks are not supposed to work inside of the loop, that's anti-pattern.
I'm using redux to load data from the backend in a react application. I'm loading a bunch of data with axios and then I can select one item and see the specific information in a different view. I'm rendering a "Loading" view every time I do a search in the backend. The problem is: this search is fine whenever I load the view refreshing the browser. But when I'm navigating in the own app, I use react-router-dom and I don't need to show the loading screen because it is already in the redux store.
Is there a way to tell redux or react to not make the async call if I already have the data?
Is redux-persist a solution for this? Should I do it manually with a condition in react?
I make the call in the componentDidMount method
You should pass the data from redux store down to your component as a property and you should make a check in componentDidMount or before that if data is empty or null or whatever and make a decision if you should load it after that. You don't need any 3rd party lib for data persistence (like redux-persist) since you actually have it in your redux store already persisted.
I'm fairly new to React, and I was trying to create an app that functioned thusly:
The app consists of several Pages, with multiple Components on each Page.
One of these Components is stats, which can change as the user interacts with Components on the Page.
When a user clicks on a certain Component, they will be taken to a "different" page, which is really just another Page, with different text, data, etc. This is carried out through the browserHistory.push() method. I would like to be able to carry over the changed 'stats' component from one Page to the next, but I am not sure how to do so. Furthermore, since I set the default value for stats in the Page component, it seems that any attempt at passing the changed values into the new Page would result in the new values being overridden. Can anyone help me?
Thanks.
State should live above the level of all components that need access to that state.
Remember that one of the principles of React is "one-way" data flow down the component hierarchy. Essentially, data/state should live at a high level, getting passed down to child components and consumed as needed.
In your case, you have some "stats" data that needs to be displayed across multiple Pages. So, "stats" needs to be owned by a component above all of your Page components - perhaps at the root component of the app itself. Pages themselves would just take the data in and render it, potentially with some callbacks appropriate for editing the data.
Read a bit more about Facebook's philosophy for React in "Thinking in React" in the official docs: https://facebook.github.io/react/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live
One option to consider is to use React Redux to store the state of your application. You would then use mapStateToProps (See Redux API for details) to map the state into props for your stats component.