how to write separate code for client and server?
Unanswered
Thai posted this in #help-forum
ThaiOP
I want to write a function that does separate code on the client and server, what's the easiest way to do this? I thought there was something like
util.client.ts and util.server.ts, but I can't find any mention of it on the docs35 Replies
pass it to client components as prop
ThaiOP
oh I'm thinking of something more like a date formatter where I want to use diff code on client and server
ideally, have something like
formatDate.client.ts and formatDate.server.ts and then call formatDate(...) all over the place@Thai oh I'm thinking of something more like a date formatter where I want to use diff code on client and server
u can only run serverside code using a api route, fetching on route request or using server actions with a form
ThaiOP
yeah I'm talking more about having specific code for client and server
react native does this with
.ios.js and .android.js for instance: https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions@Thai yeah I'm talking more about having specific code for client and server
so you want a function that can be run by server components everywhere?
or what
ThaiOP
yeah, like the date formatter
it'll be run everywhere
oh you can do that already
just create a util
make sure the api is not type of document
and use it on serverside aswell
ThaiOP
you mean by doing something like
typeof window === 'undefined'?@Thai you mean by doing something like `typeof window === 'undefined'`?
no, if you want a date formatter then use moment
moment js
ThaiOP
sorry date formatting is just my example for how it'll be used
in truth, I want to use some binaries on node, and then on client i'll use the wasm version
if you have a function for example: await add(1,2).then
you can call that on client and server
you can call that on client and server
that can be run by browser and nodejs
buy functions using the document api can only be run on client
you will get weird errors
thats why frameworks are cool you can create a util class and use it everywhere
ThaiOP
no I get that
again, I want to run different code for client and server. On client I will use wasm, on the server I'll use the actual binary
ThaiOP
oh hmm remix has this
@Thai I want to write a function that does separate code on the client and server, what's the easiest way to do this? I thought there was something like `util.client.ts` and `util.server.ts`, but I can't find any mention of it on the docs
the doc suggest using
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment
server-only packagehttps://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment
ThaiOP
that still doesn’t do what i want
i think it’s just not possible with nextjs
though there’s probably a webpack config that would make it work
@Thai https://remix.run/docs/en/main/file-conventions/-client
ThaiOP
essentially i want this
currectly, nextjs doesn't have the feature like this