-
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.
-
@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.
-
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.
-
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.
-
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.
-
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.
For folks exploring the App Router: https://nextjs.org/docs/app/building-your-application/caching