Using Next.js for CSR only
I remember Theo once saying that he would recommend using Next.js even if you plan on doing CSR only. I am not sure how would I do that, if I am using the folder based routing I guess I always end up hitting the server for the server to decide what to return to me, even if I wrap my whole app to return null if running on the server, still some .js needs to be run on every request, which for my purposes wastes server resources for no obvious reason.
What I would like to achieve is to have a regular static html file returned with the root element and then the react just doing its thing when it gets loaded, while still having my codebase using file based routing and having the ability to make a couple of pages static or ssr when needed or easily handle securing data over a custom proxy api endpoint or something like that.
6 Replies
use "use client" directive if you want to do CSR.
by default all routes are server rendered.
this might help you!
https://nextjs.org/docs/app/building-your-application/deploying/static-exports
Deploying: Static Exports | Next.js
Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.
I remember him also stating the exact opposite though.
I see 0 benefits of nextjs for CSR only, happy to be corrected
To @shivam and @utopy thanks, I'll try to go with the app router and do some small tests with use client to see does it behave like I would expect
for @Y7YA the benefits of next.js that I am looking for are
- file based routing
- api routes to "proxy" secure data
- ability to render a couple of public facing landing pages statically
However the entire app itself is behind a login screen and I don't really see any benefits in doing SSR on every request, I would like the server to just respond with an "empty" HTML file instead of running node at all.
file based routing is a con imo but fair enough lol
If you're using next then use can easily protect all your routes with authentication middleware. you can also do your role based auth here. Example of how it's done with Clerk and Next.js: https://clerk.com/docs/references/nextjs/auth-middleware#usage
authMiddleware() | Next.js | Clerk
The
authMiddleware() method allows you to protect your Next.js application using middleware.