<p>I’ve been building on the web for a long time. There’s a part of me that still has a bit of an old school mentality, and it’s hard for me to get really excited about new technology. Sure React was cool when it came out for its state management, but I didn’t see it as the be-all and end-all for building on the web. I really like <a href="https://craftcms.com/">Craft CMS</a> for building CMS powered sites since I have full control over the HTML being sent to the browser, and it’s really easy to extend for complex functionality, but it can be a bit complex to setup for beginners and with additional complexity can come performance issues.&nbsp;So it’s been a while since I’ve seen something to be <em>really</em> excited about.</p>
<p>Enter <a href="https://remix.run/">Remix</a>.</p>
<p>Remix is an interesting mix of old school techniques along with modern technology. Ryan Florence actually sums it up perfectly as to where Remix fits in.</p>
<blockquote class="twitter-tweet" data-dnt="true" data-theme="dark"><p lang="en" dir="ltr">Forget “full stack”. Remix is center stack.<br><br>It’s an HTTP tunnel between interactivity and business logic. It’s the part of the stack that no tool before it has solved, not completely.<br><br>I think I finally know how to talk about Remix.</p>— Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/1482233495195770883?ref_src=twsrc%5Etfw">January 15, 2022</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>I was able to easily switch my site that was fully powered by Craft to utilize Craft only as a GraphQL endpoint and Remix powering the rest. The two big things I needed to figure out were: how to get data from the GraphQL endpoint, and then how to process input from a user (for my contact form). I would definitely recommend reading through the Remix docs and the two tutorials, but if you can understand these two big pictures things, you’ll have enough to get started with Remix and go deeper once you get into it.</p>
<h2>Getting GraphQL Data (aka Loaders)</h2>
<p>Remix provides a <a href="https://remix.run/docs/en/v1/api/conventions#loader">loader hook</a> that runs on the server to hydrate your component. In this simple example, I run a GraphQL request and return JSON with the results of that request in the loader function.</p>