I pass a series of items to redux in getServerSideProps and it works well. But the problem is that when the user goes to another address on the site (without refreshing the page), when he returns to the main page, the redux items are executed again, and I don't want it to be like this, I want it to be executed only the first time and by changing the address. Don't run redux getServerSideProps again!
What is the solution? Should I use getServerSideProps here or something else?
Thankful
I read somewhere that I should use getInitialProps, but I'm not sure and does using it have a negative impact on SEO?
Related
I have a Next.js app which has multiple pages. Each page has the same bar at the top of the screen which displays some data which is fetched from an internal API using SWR. The issue I am having is that to fetch that data it requires an ID of the logged in user (they log in with Discord via next-auth) and after they have left the first page, that ID value is no longer accessible to me.
I have tired storing it in local storage and session storage, I have tried passing it through other components, but nothing has worked and I am out of ideas of how to fix this. Is there any other way where I can pass a value between pages? Or is there a way I can access the session data again?
If you use this on all pages, you could just add that header into the _app.{js,tsx}(see the docs). In case you don't I suppose you create a layout component and reuse it across these pages.
In the future we might be able to use the new Routing API which allows passing adding Layout components for certain sub-routes. (Check the Layout RFC for more info).
because next js uses the react library so you can pass the data using props or you can use redux as well.
like this:
<Component propName={value}/>
I'm using apollo-client inside Next.js using the setup documented in this example.
To quickly explain, in getServerSideProps(), we create an apolloClient, we do the query and then we use addApolloState() to pass the cache data to the client. Then, inside a component, we can use useQuery() to get the data and render the UI for it.
This works perfectly for queries.
Now, I have a use case where I want my data to reload automatically when it changes on the server. To do this, I'd like to use Subscriptions. However, I still want to have the page rendered on the server on the first load with the right data.
What's the best way to achieve this?
I've tried the approach explained on this issue which consists in using subscribeToMore and override the whole query when a result arrives. However, it's not ideal as the subscription is still fired on the first page load and receives the same data than the one already in the cache.
From: next/link
You can see that the <Link> component from next/link enables client-side transitions and link prefetching, which are great features, but maybe not for all cases.
Please see the caveat I've run into. Let's say I have the following pages:
Home - Some landing page with a nav bar
Latest - Here I can see my latest posts
Admin - Here I can add more posts
The Latest page from the example above uses getStaticProps with revalidate. Something like:
export const getStaticProps : GetStaticProps<HomeRoute> = async () => {
const preloadedState = await getPreloadedState();
return({
revalidate: 1,
props: {
preloadedState
}
});
};
In theory, after 1 second, it should send the last stale response for the next request and trigger a new static regeneration to be served for the subsequent requests. After 1 second, the process repeats and you get fresh data at least after every second, which is pretty much immediately.
Now, see the caveat I've run into with next/link:
User lands on the Home page. There is a Link on the nav bar pointing to Latest. That link will be prefetched by next/link.
In some other browser, an admin goes to the Admin page and adds one more post (which should appear on the Latest page at some point).
Now user clicks on the Latest page link. The new post is not there.
Clicks on Home again. And clicks again on Latest. New post is still not there and never will be.
The transitions in this case are blazing fast, which is nice. But from my experience so far, I think that that user is locked inside a version of my website where the new post will never be available, because that 1st prefetch happened during a time where the new post didn't exist.
The only way that user will ever see the new post is if he/she presses F5 to do a full website reload. And it might be necessary to refresh twice, because the 1st one might return the previous stale version while triggering the regeneration for the next one.
I mean, what is the workaround to this issue? Should I not use next/link for pages that contain any dynamic data? Should I just use normal <a> tags?
UPDATE
From: https://nextjs.org/docs/basic-features/data-fetching#statically-generates-both-html-and-json
From the excerpt above, we can see that indeed, client-side transitions will not trigger a page regeneration, because they'll not call getStaticProps. They only fetch the pre-built JSON object for the page to use as props.
AFAIK, it means that you'll be locked to the version of the page that existed when you first visited the website. You can go back and forth and nothing in the pages would change, because the JSON data is probably cached on client anyway.
PS: I've tested this (like I've mentioned in the question above) and this is exactly what happens.
So how to workaround that? I would like for users that keep an open tab of my website to be able to get updates for the pages when they navigate from one page to the other.
A POSSIBLE SOLUTION
Set some kind of idle time counter, and if the user gets like 10 minutes of idle time (it means that they left the tab open). Whenever he comes back and do some action, I could refresh the whole website to make sure they get the new version of the pages.
Has anyone faced that problem before?
I've posted this very same question in several forums and this is the response I've got:
It seems what you described is true. next/link caches results in the client-side and your visitor will not fetch a revalidated result out of the box unless there is a full-page reload.
Depending on the likelihood of content changes, you might want to use <a> instead or you can look at some client-side content reload strategy that kicks in after mount and query data source for updated content.
Given that fact, I'll stick to using next/link and client-side transitions. But I'll also use something like a setInterval() to do a full website reload from time to time, so I'm sure my users will keep getting revalidated pages eventually.
I'm not quite sure how to explain this, but here is a picture that could help explain the issue that I seem to be facing.
As you can see, I have a SharedNotificationsModule and a SharedConversationsModule, these are totally separate to one another and each contain their own state files.
I am importing the SharedNotificationsModule into my SharedHeaderModule as this is where the majority of notification related content will be.
However, if I navigate to the ConversationsPage and the LOAD_CONVERSATIONS_SUCCESS is triggered my previous notifications slice is being overwritten.
This isn't only happening on the LOAD_CONVERSATIONS_SUCCESS action, this happens on other pages but some times the action that get's the user or the action that get's a users profile (when navigating to the users profile page).
I'm not sure what/if any code you would like to see, but just let me know what you want.
I finally figured this out now, turns out that I had forgotten to add a default to the switch in my notificationsReducer. The default now just returns the existing state.
default:
return state;
I'm using next js with redux thunk.
And I want to fetch some global site data and save it to redux storage, so I could use it later in components.
The only way I can do it now - is to call action to fetch this globalData in every page in getInitialProps, But there are a lot of pages.
Is it possible to make this in _app.js, so I wouldn't have to repeat this in every page? What is correct way to do it?
P.S. Everything is easy with client side. The problem is about Server Side!
I need server to fetch data and put it to redux storage! And I need to do it for any page of site. (I don't care about what will happen next on client side)