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. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:22">01:22</a> Syntax is on <a href= "www.youtube.com/@syntaxfm">YouTube</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=02:16">02:16</a> Let’s talk about the cache problem.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=03:33">03:33</a> User-specific data and caching security.</li> <li class="has-line-data" data-line-start="8" data-line-end="15"> <a href="#t=06:27">06:27</a> Why might this pop up? <ul> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=06:29">06:29</a> Marketing A/B testing - cookie based.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=06:55">06:55</a> User-selected features - such as themes.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=06:58">06:58</a> Language or geo-based items - accept language.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=07:11">07:11</a> Images - WebP for some browsers, jpg for others.</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=07:45">07:45</a> JSON/HTML based on accept header.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=08:17">08:17</a> Different encoding.</li> </ul> </li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=08:26">08:26</a> <a href= "https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation"> Content negotiation</a>.</li> <li class="has-line-data" data-line-start="16" data-line-end="26"> <a href="#t=08:54">08:54</a> The solutions. <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=09:04">09:04</a> Provide different URLs/Query parameter.</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=11:19">11:19</a> Don’t cache the page, cache the data based on query.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=15:01">15:01</a> Implement a “Cache Key” - one render for every option.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://www.netlify.com/blog/netlify-cache-key-variations/">Netlify</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://www.fastly.com/blog/getting-most-out-vary-fastly">Fastly</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://developers.cloudflare.com/cache/how-to/cache-keys/">Cloudflare</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=18:17">18:17</a> Use edge logic.</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> <a href="#t=19:52">19:52</a> Just do it client-side.</li> </ul> </li> </ul> <a id="Hit_us_up_on_Socials_26"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott:<a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

753: Cache Ruins Everything Around Me

Syntax - Tasty Web Development Treats