A presentation at Remix Conf in in Salt Lake City, UT, USA by Sarah Dayan
Outstanding Search Experiences with Remix and Algolia Sarah Dayan—Remix Conference 2022
anyone?
But… Search is hard.
But… Search is hard. t a e Gr
Immediate feedback Relevant results
Immediate feedback Relevant results
Immediate feedback Relevant results
This is nice. Let’s do better.
Immediate feedback Relevant results
export async function loader() { const data = await somethingToFetchOnTheServer(); return { data }; }; export default function Route() { const { data } = useLoaderData(); return <p>{data.name}</p>; }
import { InstantSearchSSRProvider } from ‘react-instantsearch-hooks-web’; import { getServerState } from ‘react-instantsearch-hooks-server’;
Without SSR With SSR
Immediate feedback Relevant results
tech < ux
Great tools enable outstanding experiences.
@algolia @frontstuff_io Demo site algolia.com sarahdayan.com bit.ly/3LAOWV1 We are Front End Experiences @ Algolia ❤
Outstanding search starts with two principles: immediate feedback and relevant results. Search-as-you-type experiences have become the standard since Google introduced Google Suggest and Google Instant on their search page in the 2000s.
Users not only love the immediate feedback of instant experiences, they expect it. They also expect search to be excellent at understanding their intent, even when they misspell or forget words. Services like Algolia are designed to deliver instant, as-you-type, relevant results right from the first keystrokes. But what happens when the user’s network is slow? What’s relevant when the user didn’t express intent yet?
In this talk, we’ll see how you can combine Algolia’s client-side search with the power of Remix’s server runtime to create snappy and delightful yet reliable and resilient search experiences that serve everyone.
The following resources were mentioned during the presentation or are useful additional information.
This is Webflix, the Remix demo site showcased during the presentation.
You can clone it and run it on your machine by following the installation instructions in the README.
Here’s what was said about this presentation on social media.
for free. You
can too.