I've got a path something like /:chapterId/:topicId. I need to fetch the topic content from say API1. Also I need to fetch all chapters and topics from say API2 for sidePanel to switch among the topics. I am using serverSideProps to fetch both API1 and API2.
Now, when I use the sidePanel to change topic, nextjs fetches API1, which is obvious, but along with API2.
I know what I am doing is wrong, but I don't really know how to do that stuff without fetching API2. Even if I use Layout, say wrap that topicContent inside the whole sidePanel wrapper or something, but then fetching server side is definitely not possible if I'm not wrong. Is there a nice way?
Related
I'm currently implementing a POC project in NextJs 12 to check whether it is possible for us to integrate it. I'm not able to update to 13 yet since I cannot support React 18 due to some in-house packages that we use, so for the purposes of this discussion let's pretend that Next 13 does not exist yet.
We all know that Next officially discourages the use of getInitialProps and recommends using getServerSideProps wherever possible. I'm aware of all the downsides of getInitialProps as opposed to getServerSideProps, main one being the constant client/server context switch which you have to be mindful of.
However, I cannot understand the easiness with which this is discouraged. Apart from NextJs itself I've seen a lot of blog posts calling it the worst thing ever and such. It seems to me like people who say stuff like that have not had some realistic use cases, and that the opinion mostly comes from toy projects (notes app, todo app, blog app etc).
Anyway the purpose of this question is twofold. One, to verify if it is at all possible in my case to avoid getInitialProps, and two, to see if anyone else thinks that this discouragement is somewhat unfounded and not based on reality.
The reason I've decided to use Next at all was to achieve SSR in React. The entire point of that, at least I believe so, is to enable SSR and still preserve some main benefits of React, such as a seamless SPA-like navigation in certain pages. If that was not the case I would have gone for a traditional SSR framework such as Ruby on Rails, Django, etc.
The reason why I need to use getInitialProps, and why I believe I cannot possibly avoid it, is based on two aspects:
Every single page that I have requires certain global data, which I don't want to refetch on every route.
The perfect example of this is the page header. The header of every one of my page depends on user data and translations (i18n). Both of these things I fetch from an external API. If I were to use GSSP then every route and every sub-route of every page would have to re-perform this data fetching which seems like a huge performance kill. I have no way to properly persist this data through GSSP navigation without conforming to some hacks such as sending hidden query parameters which check if data was already fetched. If we were to assume that the user always comes into contact with a page solely through its root URL, then this would work, but this assumption is extremely unrealistic.
By using getInitialProps in combination with redux and next-redux-wrapper, it is very easy to check if data was already fetched (even better if using RTKQ you don't even have to explicitly check it).
Big pages where I want SPA-like behaviour are not possible.
In my case I have one page which has about 5 sub-routes. On its homepage, we display a list of certain entities, which is fetched from the API. The API is such that entities can only be fetched as a list, and you cannot fetch entities individually. Then, for each entity, when you click on it, you can go to a sub-page where you see its specific info.
The only natural way to do this is to have the entire data fetched on the first page visit and then reused throughout the page as we navigate. Re-fetching the whole data on every page navigation is also a performance kill. The only way I was able to implement this and preserve a seamless SPA-like navigation was with getInitialProps.
What's interesting about this use case is that hacks with sending hidden query params would actually not do the trick, since even though I can force GSSP to be aware that the data is already fetched, I cannot access that data, therefore I cannot do any server-side route validation. What I mean is that if a user was to land on the home page, where all the entities are fetched, then somehow visit an entity page, like page/123, where an entity with id 123 does not exist, I cannot validate that and properly handle it in GSSP without re-fetching the entire list of entities again which is, once more, a performance kill.
So, in conclusion, I'd like to hear opinions on the discouragement of getInitialProps. For me it seems borderline impossible to completely migrate to getSeverSideProps if your app is at all realistic, uses translations, global data, etc.
Thanks in advance.
in my Next.js app i want to render a mobile-/ desktop-header based on the width of the device. In general this is a simple task, i did many times in normal react, using hooks like useWindowDimensions, where I check the width of the window object and use this parameter for a simple condition.
In Next.js however I ran into the problem, that my app is pre-rendert on the server, so of course there is no window object, that I could use for the condition.
Things I tried:
dynamic import of the component, this means the component didn't get pre-rendert on the server, but only on the client. This would work, but I didn't use the benefit of SSR, and for SEO reasons I want to pre-render "key-components" like the header.
I just picked a condition for SSR like render always the mobile-header for example and on the CSR I just render on the real condition. This would solve my issue with render always "key-components" on server side, so SEO is happy, but i run in an ugly warning about content mismatch between server and client, because when I render the app on desktop device, my first render on client side of course would be the desktop-header. So this doesn't seem to be a good solution either.
Next I tried to render a certain condition like before, so render always the mobile-header on server AND client side and use a useEffect hook only on mount useEffect({...}, []) which then check the real condition and trigger a re-render with the correct condition. This would solve my SEO-thing, and also the ugly content mismatch warning. BUT I run into a noticeable layout-shift, where the user sees the mobile-header first and after half a second the header changes to the desktop-header. ugly stuff..
So I got my next idea, which was checking the user-agent or device type with getServersideProps and somehow use this info for a conditional rendering on server-side. This doesn't really work out to well, specially I would want to use it in my _app.tsx so I don't have to write this stuff for every page again and again. In a discussion thread in the official Next.js repo I found, that getServersideProps doesn't work in _app.js yet, only getInitialProps, which is deprecated, and shouldn't be used anymore...
So, to make things short, there has to be a good way to render components in Next.js without the above problems. I just couldn't figure out yet, what is best practice for this kind of stuff.
I would appreciate any hints, tipps or advices in this topic ❤️
I am creating a project but very new to React and async programming. I am using React to display users email via an API.
I can get all the email data via ComponentDidMount calls to the API. It displays them correctly and I can get subject,body etc. Now, I need to send the body of the currently selected email via a button to my back-end side, do some work with it (compare strings to database etc) and then fetch back the result and display it in a div. What would be the best way to go about it?
I couldn't find any good answers to this from google.
Should I have gotten emails and done all that work all server side first somehow before fetching both the body and the result along with it with React? Or is there a way I can send the current body string out to my controller, do the work and then get the result back all in async?
Thank you in advance!
Although this question is too vague to answer but I know what you're coming from and I want to give you some ideas about the general structure of a React-related project:
The backend side should be designed to Restful Api Endpoints.
Use Redux to manage frontend (react) application's state.
Use Redux-thunk (or Redux-saga) to manage side-effects (call api)
In componentWillMount or componentDidMount, use Redux dispatch to dispatch an action to Redux then use Redux-thunk (or Redux-saga) to call api and update application's state.
The component which is connect to application's state will be updated based on state's changes.
It's long way to go but hey, that's what all of us have to go through. Good luck!
PS: If any terms are not familiar with you, do some google-ings.
I'm learning so if this is a silly question feel free to let me know. My question relates to subscription and where you should subscribe. Let me be more specific with an example.
files
template.html
templatePieceOne.html
templatePieceTwo.html
In this example we have a template.html that will render using two separate template pieces. The template pieces might be used else where on the website. Is it better to subscribe at the top level template.html, template.js, or should the template pieces each have their own subscription.
If this doesn't make sense please let me know.
You definitely shouldn't subscribe in every template. Instead, you should decide which templates correspond to an independent part of the application, i.e. a view, modal or widget. Those templates should be responsible for subscribing to, managing and passing down their data.
This way you'll be able to see easily which part of the application is active at any given moment and what it subscribes to.
I recommend the following article on
presentation and container components.
Even if you're using Blaze instead of React the idea is still valid.
We're currently researching if it is possible to on the fly generate/change the UI of a metro app. So far I have seen only that the reflection options are somewhat limited. But perhaps if we're using HTML/JS we can modify the HTML on the fly? Anybody tried something like this?
Will fire up VS later and give it a go, just thought I'd ask here and see if we could have a disucssion on the topic.
Most Javascript-based apps modify their HTML on the fly as this is a pattern promoted by the Navigator template. So for example even just clicking a link and navigating to another page will replace the content of a 'page' container element instead of reloading the whole page and thus reloading all .js and .css files.
Also the WinJS.UI.ListView will dynamically create and reposition elements in your DOM as you scroll its contents.
Basically you can do anything you'd do in a webapp and re-use patterns like known from AJAX to make your UI adapt dynamically.
Depending on what you want to achieve, you should with increasing complexity keep in mind that your app should be able to suspend and restore its state from scratch at any point.