Expose docs app to as much caching as possible
Answered
Jesse posted this in #help-forum
JesseOP
I have a Next JS app running the docs for my app and I want it to be epxosed to as much caching as possible.
I've tried:
But don't know what else there is that I can do
I've tried:
export const dynamic = "force-static";
export const revalidate = 0;But don't know what else there is that I can do
78 Replies
are you using cacheComponent: true or not?
JesseOP
what is that 😭
not i assume then :/
usually, putting this:
on layout should do the trick.
but i really advise against using
export const dynamic = "force-static";
export const revalidate = 0;on layout should do the trick.
but i really advise against using
force-static at all unless next's inferrence isn't doing good when you see it in build logusing
cacheComponent: true would be a slight improvement in DX since you will get a warning if things aren't cached properlyJesseOP
what repurcussions can I get from
"force-static" when I'm pretty sure the only client side stuff is letting the user copy code using navigator.clipboardIf I want to check next is doing automatically should I expect everything to show up as static when building
@Jesse what repurcussions can I get from `"force-static"` when I'm pretty sure the only client side stuff is letting the user copy code using `navigator.clipboard`
harder to debug because if some component is "acting" dynamically or dev expect it to run dynamically it can be hard to debug that the whole thing is static and you only get error at runtime
what the question should be is "why is component XYZ making my route dynamic" instead of "how to force my route to be static" that way you always get predictable and maintanable code rather than forcing things where it doesn't have to be
@alfonsüs ardani yep
JesseOP
can't find it, there's no intelliSense
typo:
cachedComponentwhy would you need caching for docs? just use static export if running on server would be an overhaul
@fuma why would you need caching for docs? just use static export if running on server would be an overhaul
JesseOP
I think I misphrased my question, essentially at the moment all my routes are static (some small client components further down the tree) however I'm wondering if there's anything more I can do to make things as fast as possible, since someone reported slowness and I'm also detecting it
just to clarify here in next16 statically generated routes are considered part of caching
so SSG is now included in the umbrella term for "caching"
its not the next15's definition of "cache" where it only cache return of a function.... (i didnt decide this)
@alfonsüs ardani just to clarify here in next16 statically generated routes are considered part of caching
JesseOP
yeah I'm updating to 16 as we speak udnergoing some annoying npm issues tho
this is fine... 
here a little demo @Jesse
JesseOP
oh i see it's only in next 16
lemme try it now
this whole inferring thing is also in next 15 but as you may know the error message and the DX is uhhhh not good
JesseOP
oh the circles
was wondering why it said dynamic
if ur docs is 
f then just like fuma said, something wrong with ur docs setup JesseOP
but it said "server-rendered on demand", thought that was what I wanted 💀
on-demand it means request-time
JesseOP
i see
if u want PURE static that means it has to be rendered at build time
JesseOP
all my pages are server components how do I get the circle
ur docs is weird if it has to re-render at request time
well time to investigate by adding "use cache" at the top of the file :)
JesseOP
isn't that unstable
mmm it is unstable a week ago
JesseOP
can I put it in layout
JesseOP
wait this is so weird I thought that if your page.tsx was a server component then you automatically get the donut but in my other app running on next 15 it's all f as well
what's the intended way to fix this apart from use cache
server component doesnt mean donut or f
server component are just saying the component runs on the server...
both donut and f runs in the server...
both donut and f runs in the server...
JesseOP
ahh yes that makes sense and then donut just means it doesn't really change and is hence static
@Jesse what's the intended way to fix this apart from use cache
so without next16, try
export const dynamic = 'error' in the layout.tsxand see the dynamic function used in the error so that you can identify the causes
JesseOP
when building it says my page needs to be async but I don't need anything async should I make it async anyways
yeah
its fine, it can resolve into static peacefully
JesseOP
I was so close this is the error I get now
Error: Route "/_not-found": Uncached data was accessed outside of <Suspense>. This delays the entire page from rendering, resulting in a slow user experiencshould i create a
not-found.tsx and then make it use use cacheyou weren't that close at all
the error just helps you identify which component/route uses dynamic api
can you share yout root layout?
@Jesse I was so close this is the error I get now
Error: Route "/_not-found": Uncached data was accessed outside of <Suspense>. This delays the entire page from rendering, resulting in a slow user experienc
this means you used dynamic API in your root layout but your page.tsx is safely cached
JesseOP
there you go
const themeCookie = (await cookies()).get("theme")?.value || "";you can't have
await cookies() in static routesAnswer
you need to get cookies some other way
JesseOP
damn was that maing the whole app dynamic
I have the same thing in my other project
yeah coz... how do you get cookies at build-time??? (hint: there is no user)
JesseOP
yh true lol 
maybe take a look at @fumadocs if you want a docs that already takes care of themes and such? (not sponsored)
Just use next-themes
this is a whole new level of speed
there's literally no delay when clicking a link
doing this for all my apps damn
thanks @alfonsüs ardani