How to Use TANStack Query to share data between Remix loaders by sergiodxa
The blog of sergiodxa
The blog of sergiodxa
Hydration errors can be caused by dates, ad blockers, browser extensions, invalid HTML, 3rd party scripts, CSS in JS libs, character encoding, IDs, and more
Improve user experience and productivity by making your UI faster. Persist data automatically, debounce saves, and show changes optimistically.
React doesn't like mismatches between client and server rendering. Avoid it by rendering tricky content like dates only on the client. Fade it in for a smooth UI and to avoid layout shift.
Remix is a fantastic framework but it's not without its issues. Here are some of my struggles after building a few different projects with it.
Extension for Visual Studio Code - Remix generator for route files to help you generate your routes faster.
Command line utility to upgrade all Remix dependencies together
Speaker Bio: Ryan Florence has been obsessed with UX since using an Intellivision. https://remix.run/conf/2023/speakers/ryan-florence Speaker Bio: Michael Jackson, the author or Remix, not the pop star. https://remix.run/conf/2023/speakers/michael-jackson Learn more at https://remix.run
Edge computing is increasingly being adopted by web developers these days to improve UX and decrease latency of their applications. Cloudflare Workers, Deno Deploy, Netlify Edge Functions, and Vercel Edge Functions, all have made edge computing available to developers of full stack applications. With this adoption new architectural patterns and anti-patterns for building web applications have emerged. In this talk we’ll cover how developers can utilize edge computing to build full-stack applications and what are the strengths and weaknesses of this approach. We’ll also look into the future — beyond the edge, and explore how thinking of the network as the computer will fundamentally change the architecture of web applications in order to make building planet-scale applications accessible to everyone. Speaker Bio: Nevi Shah is a Product Manager at Cloudflare. She works on Cloudflare Pages and Cloudflare D1. https://remix.run/conf/2023/speakers/nevi-shah Speaker Bio: Igor Minar is a software engineer at Cloudflare and co-creator of AngularJS, Angular, and Karma. He has spent the last 15 years helping developers by building infrastructure, APIs, and tooling for the Web. Igor built some of the biggest web development communities during his time at Google. He collaborated with the TypeScript team to bring type-checking and better tooling to developers, as well as browser vendors to design and improve web APIs. He has also worked to establish pragmatic best practices in the web ecosystem by creating conventional commits and many evergreen libraries. https://remix.run/conf/2023/speakers/igor-minar
I will discuss some of the things we've built at LinkedIn with Remix, why we chose it over other alternatives, our incremental migration story and how Remix is enabling us to ship faster & more ambitious web UIs for our users. Whether your an indie hacker, working at startup or large company, and are interested in moving to Remix, this talk is for you. Speaker Bio: Clifford Fajardo is a full-stack software engineer at LinkedIn where he works on infrastructure tools.He has worked at both startups and other large companies, including Salesforce. In his spare time you might find Clifford contributing to open source, hiking trails in the Bay Area, or eating at his favorite pizza shop: Bronco Billy's Pizza. He has a twin brother and is a proud Nicaraguan-American 🇳🇮 https://remix.run/conf/2023/speakers/clifford-fajardo
An exploration of how using MDX with Remix enhances the Markdown authoring experience, unlocks an ecosystem of tools to improve accessibility, and enables developers to craft more customized content experiences. This talk will walk through multiple ways MDX can be incorporated into a Remix site and provides examples of leveraging MDX to strengthen the usability and accessibility of content. Speaker Bio: Monica Powell is a software engineer who is passionate about making contributing to open-source more approachable, creating technology to elevate people, and building community. You can find her developing educational technology as a Senior Software Engineer at Newsela, teaching web development, and contributing to open-source projects. GitHub recognized her as an inaugural GitHub Star based on her involvement in the tech community. https://remix.run/conf/2023/speakers/monica-powell
Using Remix to create a stand alone API is simple, fast and really fun! In just a couple minutes you can stand up a super straight forward API. This can let folks dip their toe into the wonderful world of remix without rewriting their front end. Speaker Bio: Shane Walker is a self-taught developer with a passion for learning new things and watching them come to life. From his first “Hello World” app, he was hooked. He is invigorated by solving problems in code. https://remix.run/conf/2023/speakers/shane-walker
As any Remixologist will tell you, modern web apps are just pages/links/forms layered in spinners/latency/jank. If that's true, we should use Remix and web fundamentals everywhere to build better experiences! But what about highly interactive apps with streaming data and visualizations? Just how far should we push the envelope? Let's find out! In this talk, we'll implement a multi-user musical instrument with Remix, (ab)using things like: - Forms and FormData - Web Audio - Browser history - Progressive enhancement - Full stack components - Response and Server-sent events Speaker Bio: Jon Jensen is a Senior Software Engineer at Netflix working to improve the developer experience for other UI engineers. Previously he worked at Amazon and Instructure, working on all things software-y. In his spare time he's usually in the mountains, playing Minecraft with his kids, or following the Red Food Truck around Salt Lake City. https://remix.run/conf/2023/speakers/jon-jensen
Most of the time our API calls work, so why don’t assume that they’ll do and provide a seamless experience? Optimistic UI means to simulate a positive response from the server before receiving one. This talk will introduce examples of optimistic UIs, highlight their benefits, and provide guidance on incorporating them into our applications. Speaker Bio: Giovanni Benussi has been a full-stack developer for more than 12 years. He started working on Ruby on Rails, eventually working on new features, maintenance, and scalability for the framework. Nowadays he works primarily with React. https://remix.run/conf/2023/speakers/giovanni-benussi
The Remix Form and Action have drastically simplified our forms. While it's easy to validate form data on the server, people have always been searching for a good client-side form validation solution. What if we could use the platform to implement simple client-side validation without adding another dependency? In this talk, we'll explore how to utilize the Constraint Validation API to provide a modern form validation experience in Remix. Speaker Bio: Edmund Hung is a senior web developer from Hong Kong who works on the global online food-ordering and delivery platform, Delivery Hero. He maintains Remix Guide and is currently building Conform, a form validation library focusing on progressive enhancement. In his spare time, he enjoys cycling and gaming. https://remix.run/conf/2023/speakers/edmund-hung
Backstreet's back. Speaker Bio: Dan is a software engineer on the React team at Meta. https://remix.run/conf/2023/speakers/dan-abramov
Get advanced with `defer` and other Remix features to power a lag-free, web-based native app, without giving up Remix's data loading and mutations on the server. Chasing the dream of write-once/run-anywhere by wrapping your website in a native app shell? Scared that a great Remix website won't feel as snappy as the instant transitions of your old SPA? Fear not—by being smart with `defer` and leveraging the browser platform, you can power a spinner-free website and super-speedy native app from the same routes. Speaker Bio: Oscar Newman is a product and design-focused software engineer working on consumer healthcare experiences at Solv Health, where he has led a team-wide migration to Remix. He's passionate about consumer healthcare and building compelling user experiences. He's dabbled in design systems and front-end tooling, and is terrible at algorithms and most coding interviews. https://remix.run/conf/2023/speakers/oscar-newman
Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts. Speaker Bio: Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts. https://remix.run/conf/2023/speakers/arisa-fukuzaki Note: due to technical difficulties during Arisa's talk at the conference, Arisa was invited to run through her talk again later that evening. This video is that up-to-date version.
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial! Speaker Bio: Christopher Chedeau is the co-creator of React Native and Prettier, and the creator of React Conf, Excalidraw, and Yoga (the layout engine, not the one where you stretch a lot). https://remix.run/conf/2023/speakers/christopher-chedeau
A panel Q&A discussion at Remix Conf with the React team and Michael Jackson. Speaker Bio: Joe was planning to major in math and philosophy but got into computer science after writing physics simulations in Matlab. Prior to React, he worked on Relay, RSocket JS, and the Skip programming language. While he’s not building some sort of reactive system he enjoys running, studying Japanese, and spending time with his family. https://remix.run/conf/2023/speakers/joe-savona Speaker Bio: Dan is a software engineer on the React team at Meta. https://remix.run/conf/2023/speakers/dan-abramov Speaker Bio: Ricky majored in theoretical math and spent his early career working at startups and the Jest core team. In 2018 he joined Meta and somehow found himself on the React team. When he's not pushing bugs to your React code you can find him tweeting, skiing, golfing, or closing GitHub issues that do not match the issue template. https://remix.run/conf/2023/speakers/ricky-hanlon Speaker Bio: Michael is the co-creator of Remix. https://remix.run/conf/2023/speakers/michael-jackson
Join us for a thrilling ride as we explore the world of headless e-commerce with Shopify Hydrogen! This tech stack is taking the e-commerce industry by storm, and in this talk, we'll show you just how easy and fun it is to build a high-performance online store using Hydrogen's ready-to-use React components. From creating collections and products to implementing a shopping cart, we'll cover it all and give you the tools you need to elevate your developer experience. Don't miss out on this opportunity to learn the ins and outs of Shopify Hydrogen and see firsthand how it can revolutionize your e-commerce projects. Speaker Bio: Alexandra Spalato is a Developer Relations engineer at Storyblok. She was born and raised in France and lives now on the beautiful Spanish island of Mallorca. While working as a freelance developer and entrepreneur, she decided to fully specialize in the JAM Stack. She is an advocate for headless architecture and has taken that advocacy full time at Storyblok. https://remix.run/conf/2023/speakers/alexandra-spalato
Mock Service Worker (MSW) is a powerful tool for speeding up development and testing by intercepting and modifying network requests. In this talk, we will explore the benefits of using MSW and how it can be leveraged to streamline your development process. We will cover best practices for implementing MSW, including how to use it for both testing and local development. Additionally, we will discuss real-world examples of how MSW has been used to improve the efficiency and effectiveness of development teams. Speaker Bio: Sean McQuaid is a Senior Software Engineer on the Customer Technology Solutions team at Chick-fil-A. Prior to learning how to code, he attended music school and played the trumpet professionally for over a decade. Sean is very passionate about testing, performance, and tools that provide a good developer experience. https://remix.run/conf/2023/speakers/sean-mcquaid
It’s 2023, and we have witnessed significant advancements in the web platform. Much of that came from innovation, pushing the web to unimaginable capabilities. This has also sadly come at the unimaginable costs to user experience and web performance. A Fist Full of Data is an eye opening talk about data on the web, and the modern means used to mitigate the user experience malaise. Speaker Bio: Henri is a freelance developer who has turned his interests to a passionate mix of site performance engineering and pinches of user experience. When not reading the deluge of daily research docs and case studies, or indiscriminately auditing sites in devtools, Henri can be found contributing back to the community, co-programming meetups including the Toronto Web Performance Group or volunteering his time for lunch and learns at various bootcamps. Otherwise, he’s focusing on running the fastest 5k possible. https://remix.run/conf/2023/speakers/henri-helvetica
Hope you are strapped in for some accessibility! In this session we will breakdown how you can use built-in React tools and web accessibility guidelines to create flexible and accessible components for your website. Speaker Bio: Cat Johnson is a Software Engineer at Microsoft who has worked for more than six years in the industry. She works on React Web Components and focuses on building accessible technology. Cat loves to talk about and teach how to create more accessible and inclusive web applications. She hosts a podcast discussing new technology and how it can create a positive social impact in our world today. She firmly believes that technology can be used to create a more inclusive and equitable world as long as we keep it in check. https://remix.run/conf/2023/speakers/cat-johnson
How does Remix update your browser in dev? It's more than just watch mode, live reload, or even HMR. Let's dive into how Remix offers a world-class dev experience. Speaker Bio: Pedro Cattori is a software engineer on the Remix team at Shopify. He lives in Washington, D.C. He works on the Remix compiler, dev server, TypeScript integration, and writing algorithms that the rest of the team pretends to understand and prefers to never look at. https://remix.run/conf/2023/speakers/pedro-cattori
Do you currently feel stuck and limited working on a React SPA? It is time to sit down with the decision-makers at your company and convince them to unlock the full potential of the web platform with Remix. In this talk, I want to make 5 points to convince your boss to try Remix. You might have already fallen in love with the Remix-way of building for the web, but you will need a business case with solid business incentives to make your boss pay attention. Let’s build one together! Speaker Bio: Andre Landgraf is a full-stack developer from Germany. He currently lives in Cupertino, CA and works for LinkedIn. At work, Andre is known as the Remix guy. He is passionate about building for the web and enjoys learning, writing, and teaching about it. https://remix.run/conf/2023/speakers/andre-landgraf
What is the difference between Real User Monitoring (RUM) and Lab tests (Lighthouse), and why are both important to deliver a great user experience. Speaker Bio: Erick Tamayo is a Senior Front-end developer at Shopify. He also created Metronome, a tool for real user monitoring (RUM) specifically for Remix. Erick has been following Remix since its creation in 2020 and decided to join the community in 2021. https://remix.run/conf/2023/speakers/erick-tamayo
It started life as a create-react-app landing page in front of a vendor’s SaaS app that got an instant SEO upgrade with Remix v1.1.1’s server side rendering, and it’s never looked back. Need an unauthenticated version of “portal” content before the SaaS vendor supported it? Remix made that easy. Need to migrate content from a 25 year old on-premise vendor solution to a 10 year old on-premise vendor solution but want a modern user experience? We import the vendor’s design library into Remix and handoff the .NET app’s existing user sessions to Remix by POSTing JWTs. Remix is filling the gaps for Schoolcraft College and leveraging a hodgepodge of APIs and creaky old databases. Higher education development can be fun! Speaker Bio: Brandon Kish is a web developer at Schoolcraft College in Livonia, Michigan. He previously taught web design to community college students and misses the CSS Zen Garden. https://remix.run/conf/2023/speakers/brandon-kish
Want to get rich? Step 1: Buy *.ai domain Step 2: Create pitch deck and start picking out private jets You've already got your Remix app, now just layer on some OpenAI GPT-3/4 so you can justify one of those .ai domains and raise a bunch of money. We'll look at how to utilize a Large Language Model (LLM) in a Remix app. We'll unpack some interesting performance constraints, and identify the technical mechanics to work around them. Speaker Bio: Andrew Petersen is a full-stack developer with over a decade of professional experience. He excels at leading development teams and collaborating with non-technical stakeholders. When not coding, you can find him in the backcountry with his wife and two dogs. Their favorite spots are in southern Utah and Idaho's Sawtooth mountains. https://remix.run/conf/2023/speakers/andrew-petersen
How do you build community? Especially around a web framework on the cusp of a public v1 release right as society is reopening after a global pandemic? It's not too dissimilar from building a website: trial and error, continuous delivery, teamwork, and a lot of optimism and emojis 😅 In this talk I will share the history and lessons learned from building the Remix Austin meetup. How we went from a single meeting of 2 people in a loud bar, to a community of engineers of varying experience who regularly meet to share demos, talks, and even build a website together. My hope is that our trial and error will be inspiration for anyone trying to build their own tech community. Additionally I hope to encourage the larger Remix community to continue building better websites by cultivating a culture of sharing and connectedness. Speaker Bio: Brooks Lybrand is a Senior Web Engineer for H-E-B, [what he believes is] the best grocery store in the world [okay, at least in Texas]. Brooks specializes in building proof-of-concepts, evaluating tools, and creating highly interactive, data-rich applications. He enjoys exploring new ideas and technologies to help create better experiences for both developers and end-users. When not writing code, he loves spending time with his wife and dogs, camping, playing board games, and pretending he knows what he's talking about when it comes to coffee and mixed drinks. https://remix.run/conf/2023/speakers/brooks-lybrand
34 years ago HTTP was born, 9 years later HTML v2 added the form element and at about the same time Ruby on Rails showed us the power of server-side mutations with semantic URLs. Along the way, we went full SPA and embraced everything-client. It’s now 2023, a time to leverage the best practices of the past and Remix some classics. Join me as I dive into what it was like to swap our homegrown react framework with Remix and how this change will impact Shopify headless commerce codebases, patterns and performance in the future. Speaker Bio: I'm a Full-stack engineer with a decade of experience developing highly performing e-commerce applications for agencies and brands such as Cuts Clothing, Vuori, Liquid IV amongst many others. Currently, I am a member of the Hydrogen team at Shopify where our focus is to deliver the best framework and tools for developing headless commerce applications. I am passionate about web standards, React and of course Remix. https://remix.run/conf/2023/speakers/jp-prieto
When we build web applications, pretty much always the fun part of it is the happy path: That everything works! But what if something goes wrong? It’s so easy to oversee all the error instances which naturally leads to not covering them well enough. Let’s discuss challenges about errors and explore patterns and tools that can help us make better user experiences when things go wrong. Speaker Bio: Glenn is a software engineer, tech speaker and workshop instructor with a passion for building innovative products and beautiful user interfaces using cutting edge web technologies and open source software such as React, GraphQL and TypeScript. Aside from tech, you’ll find him either traveling, on a road bike or playing the guitar. https://remix.run/conf/2023/speakers/glenn-reyes
Let's look at real world look at a migration from a React SPA and self-managed Express API to Remix on Google Cloud Run in a production setting. At Nellis Auction we made the jump and have insights to share with those of you looking to make the switch as well (hint: the performance boost for our customers was dramatic). Speaker Bio: Brian Lee is the VP of Engineering at Nellis Auction, an advisor at Reality Defender, and is currently seeking Masters in Computer Science at Vanderbilt University in Nashville, TN. Brian graduated from UNLV in 2013. Throughout his career he has worked in many areas, including geographic information systems, artificial intelligence, machine learning, custom video streaming, mobile development, and gaming engines. His work has spanned several languages and technologies, but it was always nestled within the web ecosystem. https://remix.run/conf/2023/speakers/brian-lee
I've been running a side business on an old-React/Flux/React Router 3.0 frontend with a Rails backend. Despite being conceptually simple, the frontend was nearly unmaintainable. In this talk we'll explore how React Router data loaders really turned things around for this creaky old site. Speaker Bio: Cameron Matheson likes writing code and hanging out with his family. He's been living in the year of Desktop Linux since 1998. https://remix.run/conf/2023/speakers/cameron-matheson
When their inventor, Lou Montulli, came up with the concept for cookies, he couldn’t have known the impact these little packets of data would have on the internet as we know it. Join me in this exciting journey as we uncover the humble beginnings of the HTTP cookie, its maligned use by advertisers, yet evolution into a still quite versatile tool for web developers today. The cookie was unfashionable for a span with Single Page Applications, but with Remix, we can once again easily harness the power of cookies in a secure way. In this talk, we'll dive deep into the world of cookies and explore the variety of ways they can be used in Remix to enhance the user experience and simplify the development process. Whether you're a seasoned developer who remembers the good ol’ days or just starting out, you'll leave with a better understanding of the powerful role cookies play in developing modern web sites with Remix. Speaker Bio: Scott Smerchek lives in Kansas City and works remotely for UDisc, creating web applications to help disc golfers of all abilities. He works primarily with Node.js, PostgresSQL, MongoDB, and React. He is passionate about functional programming—regardless of the language. https://remix.run/conf/2023/speakers/scott-smerchek
Like most things in Remix, realtime data comes with the platform! Server-sent Events let us pass messages from the server to connected clients, making it possible for instant updates when any user makes a change. But how can you use this to make sure every route's data is kept fresh? Enter useLiveLoader, a technique to connect Server-sent Events with useLoaderData to always keep your data fresh. With just one hook, we get the same route data loading as useLoaderData with automatic real-time updates. Let's take a peek at what realtime in Remix looks like, and how to build this kind of hook for your own app. Speaker Bio: Alex Anderson is a software engineer at Echobind, a full-service software agency. He's a maker in many mediums, including code, baked goods, games, tech courses, and music. A spaceship enthusiast, Alex created Thorium: an open-source platform for live-action spaceship bridge simulations. He enjoys building games and puzzles with the web. https://remix.run/conf/2023/speakers/alex-anderson
Create and deploy a Remix app to AWS with SST.
This is a Remix Stack with the foundational things setup and configured for you to hit the ground running on your next EPIC idea.
Recently I tried setting up CDN on my remix.run website hosted on fly.io.
Create RPCs by exporting functions from your resource routes. Get full end-to-end type safety and autocompletion. Use custom fetcher hooks to get automatic revalidation, request cancellation, and more.
Learn more at https://remix.run https://remix.run/conf/2023 Join discord: https://rmx.as/discord CC https://event-captioner.deepgram.com/events/remix-2023
Safely type your handle data in Remix without needing to resort to duck typing with Symbols.
Learn more at https://remix.run/conf/2022 Chat at https://rmx.as/discord
A simple Remix app with Vercel Postgres as the database
Remix run stack built for the edge (cloudflare pages and d1)
It's important to architect your APIs in a way that can't be spoofed by a mischievous client application.
How I achieved consistent date formatting in Remix on both client side and server side rendered React using a LocaleProvider and Intl.DateTimeFormat.
Learn what an ETag and If-None-Match are, why they're beneficial to your users, and how to implement them in your Remix application quickly and easily with remix-etag.