-
Feature requestIs your feature request related to a problem? Please describe.
Describe the solution you'd likeAdd option to disable getServerSideProps on client-side navigation Describe alternatives you've consideredAdd another function like OR Add export config from page: OR Add option to router: Additional contextThen you can use same graphql query in component and getStaticProps |
Beta Was this translation helpful? Give feedback.
Replies: 16 comments 17 replies
-
|
From the docs:
https://nextjs.org/docs/api-reference/next/link |
Beta Was this translation helpful? Give feedback.
-
|
@balazsorban44 are you sure it will render new component and not just change the link? |
Beta Was this translation helpful? Give feedback.
-
|
I am not sure I understand what you mean. When you transition from a page to another (by |
Beta Was this translation helpful? Give feedback.
-
|
@balazsorban44 The URL will get updated to /?counter=10. and the page won't get replaced, only the state of the route is changed. Shallow routing only works for same page URL changes. For example, let's assume we have another page called pages/about.js, and you run this:
Since that's a new page, it'll unload the current page, load the new one and wait for data fetching even though we asked to do shallow routing. So it's not a sollution. |
Beta Was this translation helpful? Give feedback.
-
|
I see. Sorry I could not help. 😕 |
Beta Was this translation helpful? Give feedback.
-
|
Take a look at |
Beta Was this translation helpful? Give feedback.
-
|
Any activity on this? You really need to think about it. I don't understand why this issue takes so little attention from community... |
Beta Was this translation helpful? Give feedback.
-
same here, i'm using next-i18next, every client router change, next will send a new request to get i18 translation, no cache......is annoying |
Beta Was this translation helpful? Give feedback.
-
|
@ziimakc I solved this issue by using this on every getServerSideProps for the time being. const isFirstServerCall = req?.url?.indexOf('/_next/data/') === -1 |
Beta Was this translation helpful? Give feedback.
-
But isnt Remix's loader function very similar to getServerSideProps. Loader will fetch data again from the remix server on page revisits, just like getServerSideProps |
Beta Was this translation helpful? Give feedback.
-
|
Isn't @hoffnung8493 is right about the Remix having the same issue? |
Beta Was this translation helpful? Give feedback.
-
|
@damirJa At first glance, it did have the same issue. But it turns out u can disable it with shouldRevalidate. But tbh, I dont use this very often, cuz with Remix, I no longer manage global state in frontend. I dont use react-query, redux etc. So I my usecase for |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @hoffnung8493 for your advice, this is a really useful and interesting solution! I will definitely test it out! |
Beta Was this translation helpful? Give feedback.
-
|
@damirJa also u can check out this feature request that I have made to the Remix team. It pretty much tackles the same problem and its added to their roadmap! |
Beta Was this translation helpful? Give feedback.
-
|
Any updates on that? Like @vaniyokk said, using Currently I managed to achieve exactly what I wanted by using It works exactly like I wanted to, but the thing is that It would be great if we could achieve the same results using well supported methods and not looking for workarounds. Especially considering how great and popular |
Beta Was this translation helpful? Give feedback.
-
|
I ended up with this snippet on NextApp.getInitialProps = async ({ Component, ctx, router }) => {
try {
let pageProps: any = {}
const isServer = typeof window === 'undefined'
let appProps
// if the page is standAlone then it does not need appsProps
if (Component.standAlone !== true) {
appProps = await getAppInitialProps(ctx, Component.options, router)
}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx, { isServer }) // here you can fetch the page initial props
}
const apolloState = ctx?.apolloClient?.cache.extract() // or react-query
return { pageProps: { ...pageProps, ...appProps, apolloState } }
} catch (error) {
return { pageProps: { error } }
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Nice, thanks! I added a function wrapper for But still it looks like a workaround and I'm just curios what is |
Beta Was this translation helpful? Give feedback.
-
|
And if you want to use So.... I'm using getInitialProps. there is no other option. |
Beta Was this translation helpful? Give feedback.
-
|
If you use getInitialProps, Server-side code is exposed and delivered to the client bundle. The desired purpose can be achieved, but there may be risks such as security. Although highly sensitive information such as API token keys can be prevented from being exposed using environment variables (without NEXT_PUBLIC_ prefix). However, it should be taken into account that the server code is bundled and left on the client side. |
Beta Was this translation helpful? Give feedback.
-
|
In the project that I currently work on with @satya164 we use such approach: We inject IS_SERVER in the webpack config and use getInitialProps instead of getServerSideProps, so that the call isn't made on client-side navigation. The IS_SERVER check avoids running the prefetch code on the client side. Not too bad since at least it's readable and does exactly what we want. Hope there was a built-in way though. |
Beta Was this translation helpful? Give feedback.
-
|
I came across this discussion after asking something similar in StackOverflow (link). I'm also in the group of people using ReactQuery as client cache. I was hoping there was a way to skip SSR if the data collected during After reading this, two possibilities came to mind. I'm thinking out loud here and haven't tested any method, but sharing just to see what people think and possible points of failure. 1. Setting a cookie to skip parts of SSRI'm not sure if this could lead to hydration issues, since the SSR page won't have data, but the client will use the data in the cache. It will depend on when the two pages (SSR and Client) are compared, but I don't know that. export const getServerSideProps = (req, res) => {
let data
if (!context.req.cookies.skipSsr) {
// do expensive fetching here
}
return {
props: { data }
}
}2. Using two different componentsYou'll have a default component that uses the client cache, and a second component that fetches data during SSR. The main issue here is the routes, since (AFAIK) you can't use two different pages for the same route. The proposal here is that the SSR page just have an ending // page using SSR
// /pages/foo_
export const getServerSideProps = (req, res) => {
const queryClient = new QueryClient()
await queryClient.prefetchQuery( /* do your thing */ )
return {
props: { dehydratedState: dehydrate(queryClient) },
}
}
const FooSsr = () => (
const { data } = useQuery(['your-key'], getStuff, {
refetchOnMount: false,
refetchOnWindowFocus: false,
})
const router = useRouter()
useEffect(() => {
router.replace('/foo')
}, [])
return <FooPage data={data} />
)// page client cache
// /pages/foo
const Foo = () => (
const { data } = useQuery(['your-key'], getStuff, {
refetchOnMount: false,
refetchOnWindowFocus: false,
})
return <FooPage data={data} />
)Thoughts on these approaches? |
Beta Was this translation helpful? Give feedback.
-
|
not the biggest fan of approach 1 as it'll incur a request to the backend unnecessarily, though approach 2 is more interesting. However, I'm not sure if it'll play well with Next.js's route analysis that happens at build time. |
Beta Was this translation helpful? Give feedback.
-
|
Any updates here? It seems like big issue for every application which uses react-query / appolo client etc |
Beta Was this translation helpful? Give feedback.
-
|
The new Next.js router that is gonna be release soon (I hope) probably has the perfect solution for this problem. See this twitter discussion. |
Beta Was this translation helpful? Give feedback.
-
|
use |
Beta Was this translation helpful? Give feedback.
-
|
Found a way to use caching at But this will require for our deployment service to support caching, and won't help where we are using Waiting for export async function getServerSideProps({ req, res }) {
res.setHeader(
'Cache-Control',
'public, s-maxage=10, stale-while-revalidate=59'
)
return {
props: {},
}
} |
Beta Was this translation helpful? Give feedback.
-
|
@leerob does Next13 React Server Component solve this issue? |
Beta Was this translation helpful? Give feedback.
-
|
For folks exploring the App Router: https://nextjs.org/docs/app/building-your-application/caching |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the link, but unfortunately it doesn't apply to |
Beta Was this translation helpful? Give feedback.
For folks exploring the App Router: https://nextjs.org/docs/app/building-your-application/caching