#need help to config cache control

34 messages Β· Page 1 of 1 (latest)

mild beacon
#

Hello,

I have a question about request.cacheControl, as I'm not sure how to configure it on my home page. I have an offline mode and a online mode. When the user arrives on my page for the first time, he's not logged in, so I thought I'd set the cacheControl to public like the example in the documentation

cacheControl({
    staleWhileRevalidate: 60 * 60 * 24 * 7,
    maxAge: 5,
  });

I was thinking of adding a condition: if the user is logged in and has a session, set the cacheControl to private? Is this a good practice?

cacheControl({
    private: true,
    staleWhileRevalidate: 3600,
    maxAge: 5,
  });

Because once logged in, I display some information in the top right-hand corner (fullname and email)

swift rain
#

Depending on type of page that might not be acceptable

#

If it's to cache a mostly static page that isn't supposed to change much, serving a stale fullname and email once should be acceptable

mild beacon
# swift rain If it's to cache a mostly static page that isn't supposed to change much, servin...

Thank you very much for your reply.
I was wondering if I could condition if the user was authenticated or not, and configure the cacheControl accordingly:

export const onGet: RequestHandler = async ({ cacheControl }) => {
  const supabase = createServerClient(
    env.get("PUBLIC_SUPABASE_URL")!,
    env.get("PUBLIC_SUPABASE_ANON_KEY")!,
    {
      cookies: {
        get(name: string) {
          return cookie.get(name)?.value;
        },
      },
    }
  );

  const { data } = await supabase.auth.getSession();

 if (data.session) {
     cacheControl(
    {
      staleWhileRevalidate: 60 * 60 * 24 * 7,
      maxAge: 5,
    },
    "CDN-Cache-Control"
  );
 } else {
   cacheControl(
    {
      private: true,
      staleWhileRevalidate: 3600,
      maxAge: 5,
    },
    "CDN-Cache-Control"
  );
 }
};

But I wonder if it's good practice/performing?

swift rain
#

You can do that

#

Or you can implement a route guard

#

at your root layout for example

#

and add the private cacheControl on a sub layout designed for your authenticated users

#

@mild beacon

mild beacon
swift rain
mild beacon
# swift rain You probably will have to implement a /signin route that you redirect to wheneve...

I can start by explaining the context.
In my project, I have a header on my home page. On the right-hand side of this header, I have connection and registration buttons. If the user logs in (auth is managed via supabase) then the buttons are replaced by an avatar and user information (last name, first name and email). Basically, I had declared the cache control as follows:

export const onGet: RequestHandler = async ({ cacheControl }) => {
  cacheControl({
    staleWhileRevalidate: 60 * 60 * 24 * 7,
    maxAge: 5,
  });
};

But I had some side effects:

  • When I created an account, confirmed the registration and was redirected to my home page, the top-right button was always displayed. I had to do a browser refresh to see the user information.
  • When I logged in to an account, logged out and logged back in, the previous account information was displayed.

So I wondered if it would be a good practice/performant to have a condition if the user is logged in or not to configure cacheControl:

export const onGet: RequestHandler = async ({ cacheControl }) => {
  const supabase = createServerClient(
    env.get("PUBLIC_SUPABASE_URL")!,
    env.get("PUBLIC_SUPABASE_ANON_KEY")!,
    {
      cookies: {
        get(name: string) {
          return cookie.get(name)?.value;
        },
      },
    }
  );

  const { data } = await supabase.auth.getSession();

 if (data.session) {
     cacheControl(
    {
      staleWhileRevalidate: 60 * 60 * 24 * 7,
      maxAge: 5,
    },
    "CDN-Cache-Control"
  );
 } else {
   cacheControl(
    {
      private: true,
      staleWhileRevalidate: 3600,
      maxAge: 5,
    },
    "CDN-Cache-Control"
  );
 }
};
swift rain
#

Instead of having one page with a different header, could have two different pages for logged in and non-logged in users?

#

Caching is mostly a perf/cost feature

#

If you're early in your project you might not want to bother with it

#

if you serve dynamic content, you likely don't want to cache

#

For example, I don't set cacheControl headers for signed-in users in the 𝕏 stack

#

because I serve dynamic content

mild beacon
# swift rain because I serve dynamic content
  • You mean 2 home pages, one for non-connected users and one for connected users. That would be a fair duplication for a header, I think.
  • Yes I'm at the beginning of the project, I thought I'd remove it for now. Since it's not in production, but sooner or later I'll have to deal with it. So I figure I might as well do it now
  • I'm not sure where you're going with this, do you have an example?
swift rain
#

So for non signed-in users, they are always redirected to this page if they are on a guarded route

mild beacon
# swift rain Only /pub/privacy-policy and /pub/terms-of-service are served with cacheControl ...

From what I understand from your code, if the person doesn't have a session and isn't on the signin page, they are redirected to the /signin/ route, which forces the user to be connected to your platform no matter what?

  if (
    !session &&
    url.pathname !== "/signin/" &&
    !url.pathname.startsWith("/pub/")
  ) {
    throw redirect(302, `/signin/`);
  }

However, I don't see the page where request.cacheControl is declared

swift rain
#

Ups

#

looks like I removed it

#

but I could definitely add a cacheControl on that layout since the two pages are static

swift rain
#

~ I could remove the /pub with an optional route /(pub)

#

so that the user doesn't see the /pub

mild beacon
swift rain