Next.js Discord

Discord Forum

Middleware: how to store a state to use in client & server components

Answered
Lionhead posted this in #help-forum
Open in Discord
LionheadOP
Hi there,
I have created a middleware which is checking the hostname of the request (in order to support (sub)domain based multi-tenancy) . The domain part is send to a backend API and retrieves details about the tenant. In all further API requests, these details should be sent in a header to the backend API in order to let it retrieve correct data.
Currently I am storing a cookie with these details, but I have a problem reading it in client-components since cookies in next only can be read in server components.
Therefore I have tried using React's context, with useState, but no luck. The whole client/server components are driving me crazy :-p
Does anyone have an idea for me to get forward?
Like to hear it. Thanks in advance.
Regards, Bert
Answered by B33fb0n3
yea, the cookie function is iirc only available on serverside. What about calling the function without the cookies and getting the cookies inside your serverside function. For example like this:
// I am a client component
const abc = await getCurrentUser(); // no cookies passed to the server action

// Serverside
'use server'

async function getCurrentUser() {
  const cookieStore = cookies();

  // using cookies to retrieve session
  const session = await ...;

  return session;
}
View full answer

19 Replies

LionheadOP
Thanks @B33fb0n3 .. but as far I understand; I want the other way around.. since a middleware is server side I have to set the context/state from a server-side component
not only passing it from client to server
@Lionhead Thanks <@301376057326567425> .. but as far I understand; I want the other way around.. since a middleware is server side I have to set the context/state from a server-side component not only passing it from client to server
B33fb0n3
there are ways to pass state from middleware to serverside pages and the other way around (from pages to middleware), however they are not recommended nor best practices
LionheadOP
hmm that makes no sense at all, since checking the request and when valid, saving the state, is as far I can imagine a job of the middleware
I also tried a provider and context/useState.. but I also want it to be renedered server-side
@Lionhead hmm that makes no sense at all, since checking the request and when valid, saving the state, is as far I can imagine a job of the middleware
B33fb0n3
yes you are right. Imagine having auth and then checking the auth and setting new cookies and whatever is part of the middleware. As said: it's technically possible. And for stuff like auth it's a good thing to pass state (as cookies) to the page. The page should be able to read the current session and should also get the updated states
@Lionhead I also tried a provider and context/useState.. but I also want it to be renedered server-side
B33fb0n3
yea, useContext and useState isn't availabe serverside
LionheadOP
I also store it in a cookie, but when reaching a client component, doing an api call, needs the cookie value, it is not possible since the cookies only can be read server side
(or the other way around, I can't remember that 😄 )
@Lionhead I also store it in a cookie, but when reaching a client component, doing an api call, needs the cookie value, it is not possible since the cookies only can be read server side (or the other way around, I can't remember that 😄 )
B33fb0n3
yea, the cookie function is iirc only available on serverside. What about calling the function without the cookies and getting the cookies inside your serverside function. For example like this:
// I am a client component
const abc = await getCurrentUser(); // no cookies passed to the server action

// Serverside
'use server'

async function getCurrentUser() {
  const cookieStore = cookies();

  // using cookies to retrieve session
  const session = await ...;

  return session;
}
Answer
LionheadOP
let me try that
LionheadOP
await/async is not allowed in client components.. therefore, I guess this is getting me somewhere
but I do get aa Promise instead of my result, probably because of not using the async/await stuff
B33fb0n3
oh sorry. My bad. Yea, do that function where you need it. Of course fetching data should be done serverside and then pass it down to the client. If you need to fetch it on client, use a client library for it. For example react query or swr. Pretty nice things 👍
@Lionhead but I do get aa Promise instead of my result, probably because of not using the async/await stuff
B33fb0n3
But you can also do this (not recommended):
useEffect(() => {
  const fetch = async () => {
    const abc = await getCurrentUser(); // no cookies passed to the server action
    // ...
  }
  
  fetch();
}, [])
LionheadOP
many thanks 🙏 I am getting closer to the goal!
@Lionhead many thanks 🙏 I am getting closer to the goal!
B33fb0n3
Sure thing. Please mark solution
@B33fb0n3 Sure thing. Please mark solution
LionheadOP
Did that! 🙂
B33fb0n3
LionheadOP
🍻