Caching a fully client dynamic page
Answered
Whiteleg shrimp posted this in #help-forum
Whiteleg shrimpOP
Is there a way to get a x-vercel-cache: hit for a fully client side page?
I have tried some things but no success.
The idea is to fetch data using react query, so technically is the same HTML for all before the data fetching
"use client"
import { useParams } from "next/navigation"
export const dynamic = "force-static"
export default function Page() {
const params = useParams<{ someid: string }>()
return <div>Hello {params.someid}</div>
}I have tried some things but no success.
The idea is to fetch data using react query, so technically is the same HTML for all before the data fetching
Answered by B33fb0n3
you can make your whole route
Keep in mind, that this can cause many hydration errors, security issues and maybe even other unexpected bugs. I highly recommend you to use server components. The effort to call a function in a server component instead of a client component is the same (copy and paste, just to a different location)
force-static. Like that the client component will be still rendered via SSR and only hydrated on the client. Make sure you use generateStaticParams to make static pagesKeep in mind, that this can cause many hydration errors, security issues and maybe even other unexpected bugs. I highly recommend you to use server components. The effort to call a function in a server component instead of a client component is the same (copy and paste, just to a different location)
9 Replies
@Whiteleg shrimp Is there a way to get a x-vercel-cache: hit for a fully client side page?
typescript
"use client"
import { useParams } from "next/navigation"
export const dynamic = "force-static"
export default function Page() {
const params = useParams<{ someid: string }>()
return <div>Hello {params.someid}</div>
}
I have tried some things but no success.
The idea is to fetch data using react query, so technically is the same HTML for all before the data fetching
Instead of fetching data clientside, you should fetch the data serverside and pass it down to the client. Like that you can also leverage from the data cache from nextjs itself instead of trusting the clientside cache
@B33fb0n3 Instead of fetching data clientside, you should fetch the data serverside and pass it down to the client. Like that you can also leverage from the data cache from nextjs itself instead of trusting the clientside cache
Whiteleg shrimpOP
I know this is the optimal way, but it's currently not an option
@Whiteleg shrimp I know this is the optimal way, but it's currently not an option
why not? Can you give us a little more context about it?
@B33fb0n3 why not? Can you give us a little more context about it?
Whiteleg shrimpOP
We are migrating an old Create-React-App and need to do it as fast as possible. There are a lot of sub nested data fetchers from different APIs
I know it's better to migrate fully to server components, just we don't have the time to do it now
@Whiteleg shrimp Is there a way to get a x-vercel-cache: hit for a fully client side page?
typescript
"use client"
import { useParams } from "next/navigation"
export const dynamic = "force-static"
export default function Page() {
const params = useParams<{ someid: string }>()
return <div>Hello {params.someid}</div>
}
I have tried some things but no success.
The idea is to fetch data using react query, so technically is the same HTML for all before the data fetching
Whiteleg shrimpOP
The migration is almost done, I'm just asking if making this static is possible?
you can make your whole route
Keep in mind, that this can cause many hydration errors, security issues and maybe even other unexpected bugs. I highly recommend you to use server components. The effort to call a function in a server component instead of a client component is the same (copy and paste, just to a different location)
force-static. Like that the client component will be still rendered via SSR and only hydrated on the client. Make sure you use generateStaticParams to make static pagesKeep in mind, that this can cause many hydration errors, security issues and maybe even other unexpected bugs. I highly recommend you to use server components. The effort to call a function in a server component instead of a client component is the same (copy and paste, just to a different location)
Answer
@Whiteleg shrimp solved?