I am not sure if I am missing something within the Next.js documentation, but it seems as if it is unfeasible to reuse components within a Next.js application without breaking the component.
So from my understanding:
Next.js uses SSR to fetch data at a pages level by either getStaticProps, getStaticPaths or getServerSideProps.
Once this data has been fetched it is returned to the page via props.
The page then has access to the props and can then handle this data however it wants.
In order to use the SSR techniques for child components of our page we have to grab the child components data at page level and then pass this data down to our components.
This raises some concerns for me and questions:
This means our children components always have a dependency on the parent page?
We can't reuse our components on other pages without repeating logic or breaking components?
How do I reuse components without client side rendering?
Could I just grab everything at the entry point of the app and then store this in various state variables using Redux and call them at component level when needed?
By using client side rendering it sort of defeats the purpose of using Next.js. Yes, I can just use a useEffect hook to grab the data at component level but this doesn't seem right to me.
Am I missing something in the architectural pattern or is this just a vulnerability when working with Next.js?
The more I think about this the more I realise Relay and GraphQL are the future.
Related
I have a react component I'm importing into my project. Both my main project and the component use separate redux stores. Initially the component was just imported once and this had no issue, but when it's imported twice it uses the same redux store for both children.
How do I ensure that two imported children from the same library, that use redux, each use a separate redux store? Alternatively, what's a better solution? I tried trying to refactor how the store is used but didn't have much luck.
In the log I can see that the redux store is initialized only once on page load.
Redux is a global store. It is meant to be used as one store per application. While there are ways around that, documented here under "custom context", it is highly advised not to do that.
If you are using the same component twice with the same props, it should also use exactly the right data. If that is not the case, you likely should not be using a global state from the beginning, but keep that state as component-local state in those two components.
According to Next.js, to render a dynamic path you need both getStaticPaths() and getStaticProps() the problem with this for me is, the data of the page is being cached. I'm using Contentful for my page data, but when I make an update in my post the update doesn't make it to the page. I have to re-compile and push to my production in order for the change to take place.
However, for non-dynamic routes I can use getServerSideProps() and it works no problem.
I know with SWR you can render client-side, but with updated data.
Is there a way to render the Contentful data in a dynamic route during run-time with SWR rather than using Contentful's client.getEntry ?
Thanks!
You only need getStaticPaths and getStaticProps for dynamic routes if you want them statically generated at build-time (SSG). You can use getServerSideProps instead on your dynamic routes if you want the data fetched at runtime - there is no issue with that, especially since you are already doing that for other pages.
See this section of the documentation that mentions using dynamic routes with getServerSideProps.
When I searched for Redux most of the time I get the answer
Redux is a predictable state container for JavaScript and comes as an
external library which can be used together with front-end frameworks
like React, Angular, Ember.js, Backbone, etc.
I did not get the definition actually. What does it mean by **predictable state container **?
And as a new tool, it should solve some problems with web development. So, what redux does and how it facilitates us?
I think when someone says that Redux is a predictable state container it means that redux has a very strict way how to change the data, sometimes called unidirectional data flow.
I mostly used it in React application, so I can tell which problem it solves in this case. While your application is small, you probably will not see the reason to use Redux, but when it grows, when you have lots of components which use the same data and have to communicate with each other, it becomes really painful to store all state somewhere in the root components and pass it through all the children. There may be performance issues as well, all components between a root one a chield which needs some part of your state will be re-rendered.
So using Redux easily connect your components and select those parts of the state which they need. Also, communication between components becomes much easier, instead of passing callbacks to props, your components just listed to state and represent it, any time you need to change a state just send an action.
Regarding predictable state management, Redux is some kind of event sourcing, instead of changing a state directly, so send actions (events) which describe how to modify the state and reducer applies these changes.
There are way more things to say about Redux, at least middlewares, if you are familiar with Rx, you can try to use redux-observable which are really powerful, you can listen to some actions or a state changes to combine it with others. I recommend you to take a look at redux documentation and some article like this, I believe you will find an answer to your question.
When using Redux with React we're able to use react-redux which internally uses React's context API to make the store available to all HoCs created with connect.
I'm playing around with Web Components to evaluate how feasible it is to use primarily Web Components for building your application but still wanted a way to deal with state management (in Polymer they recommed using the mediator pattern and Redux is a type of global mediator).
So far I'm able to have a component create the store and pass it to a child component to use. This has the limitation that I will need to pass around the store to every container component, and even pass it through presentational components if they need to then pass it to another container.
So what I want to achieve is a way to make the store available to all container components that live under the Store component in the tree, preferably without making the store a global variable.
I imagined creating something similar to the react-redux connect component but since that one relies on React context I'm trying to find ideas for how to create a shared object.
Wrapping your class in an iife function and declaring a variable outside of the scope of the class as well as assigning a property of the class to the external variable will create a singleton mechanism for sharing data between instances of an element. You would then include that element inside of the template of any other element and bind to it normally. Here's an example: https://github.com/firmfirm/f-singleton/blob/master/f-singleton.html
I'm trying to write module UI components that can be imported and used by any container that wants it. The tool I'm writing allows a user to click on an element and the information of the element should display on a seperate panel, this feels like an obvious case of using redux to update an element-key value in the store whenever a click action is used which will update the display panel.
However, I'm not certain how to use the store. If I was writing this as part of an app I would create a reducer for the component then manually add that reducer to my reducers.js file (created by reduxbootstrap) and magic would happen. However, as a component I expect to import into multiple other apps I would prefer not to require each app to have to import the reducer and manually add it to their list of reducers for the component to work.
Is there a cleaner way of getting my component to plug and play with an existing store? Ideally I want someone to be able to import it and use it immediately in their UI.
The one way I know that would work is to not use redux at all, i could make the interaction work internally to the component without using redux stores at all, but it feels odd to intentionally write a non-redux component to be used in a redux app.
I don't think there is a way without you exposing your reducer to be included manually in the app root reducer. A lot of popular libraries like redux-form and react-router-redux follow this approach which I think it gives the app developers more control over their redux store.