How to make a NextJS app completely client-side?
Unanswered
Armenian Gampr dog posted this in #help-forum
Armenian Gampr dogOP
Is there a way to do this other than marking every single .tsx file as 'use client' at the top? And would this method work when trying to build the app to serve it as a SPA?
10 Replies
Spamming use client is one method. Using the pages router is another. You have plenty of options.
Armenian Gampr dogOP
Is there perhaps a less verbose way while still utilizing the App Router?
Japanese jack mackerel
you could just make a wrapper and use that to wrap any component you use/make as a client component. but just because you put "use client" at the top doesnt just automaticsally make it a "client-side" component.
@Armenian Gampr dog Is there a way to do this other than marking every single .tsx file as 'use client' at the top? And would this method work when trying to build the app to serve it as a SPA?
'use client' is basically a boundary indicator, you don't need it on every file because once a client component imports another component, this file is also considered a client component. so I believe you can add it on every page and omit on everything else and an observation: the
'use client' directive doesn't change the app to CSR, if you don't want to ever render the components on the server you will need to import them with next/dynamic using ssr: false: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssrif you do that for every page then the app will be almost entirely CSR
@Rafael Almeida `'use client'` is basically a boundary indicator, you don't need it on every file because once a client component imports another component, this file is also considered a client component. so I believe you can add it on every page and omit on everything else
and an observation: the `'use client'` directive doesn't change the app to CSR, if you don't want to ever render the components on the server you will need to import them with `next/dynamic` using `ssr: false`: <https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr>
if you do that for every page then the app will be almost entirely CSR
Armenian Gampr dogOP
OK, that's good to know, so to make the app as CSR as possible, I would need to:
1. Mark every layout/page.tsx as 'use client'.
2. Import every component.tsx using
And what about the layout/page components? They aren't imported anywhere, so how would I apply the dynamic importing with no SSR to them?
Additionally, what about the app wouldn't be CSR? Because to be clear, it will be rendered as part of a monolith, with the index.html file being served via a Python server, so I want to make sure functionality is preserved.
1. Mark every layout/page.tsx as 'use client'.
2. Import every component.tsx using
next/dynamic?And what about the layout/page components? They aren't imported anywhere, so how would I apply the dynamic importing with no SSR to them?
Additionally, what about the app wouldn't be CSR? Because to be clear, it will be rendered as part of a monolith, with the index.html file being served via a Python server, so I want to make sure functionality is preserved.
Western paper wasp
'use client' pages are still rendered on the serverthey're still server-side rendered, the only difference is that they’re also subject to hydration after the initial server render
non-
'use client' pages are server-rendered without a subsequent hydration step.If you want just an
index.html file and static assets and to do everything client-side, you probably don’t want a next.js app, it sounds like you just want a plain React appWhat Next.js features are you hoping to take advantage of with no server?