Cache Ruins Everything Around Me

Scott and Wes dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching.
Show Notes
00:00 Welcome to Syntax!
01:22 Syntax is on CZcams.
02:16 Let's talk about the cache problem.
03:33 User-specific data and caching security.
06:27 Why might this pop up?
06:29 Marketing A/B testing - cookie based.
06:55 User-selected features - such as themes.
06:58 Language or geo-based items - accept language.
07:11 Images - WebP for some browsers, jpg for others.
07:45 JSON/HTML based on accept header.
08:17 Different encoding.
08:26 Content negotiation.
08:54 The solutions.
09:04 Provide different URLs/Query parameter.
11:19 Don’t cache the page, cache the data based on query.
15:01 Implement a “Cache Key” - one render for every option.
18:17 Use edge logic.
19:52 Just do it client-side.
All links available at syntax.fm/753
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: / stolinski
Wes: / wesbos
Randy: / @randyrektor
Syntax: / syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript

[@aufdem2]

The camera shot with Scott's empty chair. 😂 Hope your little one is feeling better...

[@syntaxfm]

She’s better now, she was just upset that she was having cache issues.

[@aufdem2]

@@syntaxfm all too familiar! 🤮

[@christianbar9082]

Since you care about setting the right theme for *returning* users you could use a serviceworker that’s installed when the page is visited for the first time. On subsequent visits it’s already installed and can intercept the request to the page and modify the html.
Anyway, thank you for all your shows and your awesome, fun and interesting content.

[@sam_sam_sam]

Josh Comeau has an excellent article titled "The Quest for the Perfect Dark Mode" where he shows a client-side-only solution that avoids the flash of un-themed content. I think it would work for any number of themes beyond light and dark. It works by inserting an intentionally block script into the top of the body so the script runs before the HTML is rendered. The section in the article titled "A workable solution" shows this.
P.S. I tried posting this with a link to the article and CZcams deleted my comment :(

[@dezfowler]

Would an option here be to have everything static and fully cachable content apart from a userTheme.css file that is maybe only cachable in the browser with content output dynamically on server-side or edge by node or other equivalent of something like... @import "cookie[userTheme]";

[@dezfowler]

Clarified this a bit to hopefully make it a bit more obvious what I was getting at.

[@jakehebert]

What about a rewrite? I think you could use a middleware rewrite for all routes that don't start with one of your theme names. That way it would cache the route but still serve different versions based on cookies.
I'm thinking about this in NextJS since that's what Im most familiar with, the drawback I'm thinking about is that i think accessing the cookies might invalidate the server cache? But that would mean all solutions using Next's cache would not work using cookies. I'll have to look into it. I'll share a solution here if I find one.

[@MuhammadYusuf-nz5nj]

good content good luck 👍👍

[@syntaxfm]

🫡

[@JoakimTveter]

C.R.E.A.M, Get the data!

[@Dedseq]

Data data bytes YOOOooooh

[@deephousefridays1911]

You sure Its cache? Sounds like session dismanagent.

[@syntaxfm]

There aren't user sessions, the theme is store in an httpOnly cookie.

[@gofudgeyourselves9024]

ok