Next.js Discord

Discord Forum

CSR Only App

Answered
American Foxhound posted this in #help-forum
Open in Discord
American FoxhoundOP
Hi folks...

I'm using next13 and the app directory... I would like to have the default route rendered client side only.

The docs aren't written yet: https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering

In the past I would have done this by not adding any of the special functions like getServerSideProps or getStaticProps to the route handler.

I am using an SDK that uses the window object. This is causing the build to crash as it's not available server side.

I've had a look around, I can't see how to make this happen when using the app folder. I get that the 'use client' directive will still be rendered server-side.

What am I missing? Should I just use the pages folder instead?

I would like to understand how to make the choice to render in CSR, SSR and ISR in the context of the app directory,

Thanks in Advance!
Answered by Rafael Almeida
if you have a specific component that doesn't work when rendered in the server, you can use next/dynamic to skip SSR: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr
View full answer

24 Replies

Rafael Almeida
if you have a specific component that doesn't work when rendered in the server, you can use next/dynamic to skip SSR: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr
Answer
@Rafael Almeida if you have a specific component that doesn't work when rendered in the server, you can use `next/dynamic` to skip SSR: <https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr>
American FoxhoundOP
Thanks that’s an option and I appreciate the suggestion. It’s got to be possible to choose the rendering technique for the route though - it was such a core principal of nextjs 12!
Rafael Almeida
I think this has never been an option even on next 12
if you can send me the equivalent code you used with next 12 I could provide the equivalent for next 13
@Rafael Almeida I think this has never been an option even on next 12
American FoxhoundOP
Oh thanks that’s kind… ill post something on later today
American FoxhoundOP
So I made a use case yesterday and it does appear you can't make a purely CSR app with Next12 or 13 without the dynamic import as you mentioned. Thanks for your answer.
Feels like you should be able to do this though. It appears routes without in getServersideProps or getStaticProps in Next12 are still rendered at build time as a server side component (like with the use client directive in Next13)
I was under the impression that the route would be purely CSR'd without the 'Props' functions. @Rafael Almeida thanks for your input
American FoxhoundOP
it's a SPA
American FoxhoundOP
no... just purely client side. It's an extension for a plactform so it doesn't need to be indexed in any way
alfon
well, what's wrong with the dynamic import?
there's also noSSR() if you want but its undocumented
American FoxhoundOP
nothing wrong with the dynamic import... it's my misunderstanding of the rendering capabilities
although didn't know about noSSR()
@American Foxhound no... just purely client side. It's an extension for a plactform so it doesn't need to be indexed in any way
joulev
you can use this (untested but probably works)
function PurelyCSRed() {
  return <div>{window.location}</div>;
}

function Page() {
  const [isMounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!isMounted) return null;
  return <PurelyCSRed />;
}
@joulev you can use this (untested but probably works) ts function PurelyCSRed() { return <div>{window.location}</div>; } function Page() { const [isMounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!isMounted) return null; return <PurelyCSRed />; }
American FoxhoundOP
Yes I tried that... which didn't work as I have a reduc provieder wrapping the app that calls an SDK that used a window function. I'm going to try moving the provider lower to see if this technicque will works though
and look into noSSR() also
in the root layout or whatever, use the above code
and only render that provider when isMounted is true
American FoxhoundOP
makes sense
thanks for the input 🙂