Remix

Special functions - export a func with these names and they'll get called by Remix:
1. **loader** - Returns server data. Make API calls here
2. **action** - Handles posted form data. Has same API as loader, but responds to POST, PUT, PATCH, DELETE calls, unlike loader which responds to GET calls.
3. **meta** - Sets HTML meta tags
4. **headers** - Set headers
5. **links** - Creates link tags in head (for CSS, favicon, preloaded images)
6. Default export is the layout that renders the rest of your app in an `Outlet`
7. Export optional `ErrorBoundary` - Renders when there's an uncaught error anywhere on the route, (during render of data loading, including loader and action). Like normal React ErrorBoundary, but receives error as prop.
8. Export optional `CatchBoundary` - Like any other route component, but renders when an action/loader throws a `Response`, and has access to `useCatch` instead of `useLoaderData`.

Hooks
1. **useLoaderData** - Returns JSON from loader
2. **useActionData** - Returns JSON from action. Returns undefined if there hasn't been an action yet.

## CRA differences

1. Uses esbuild, so build is crazy fast
2. Asks for hosting at app creation
3. Includes server
4. Like Next, uses npm run dev for dev, and npm start to run the build (so it's hosting friendly, since the hosted solution would call npm start)
5. Fast build, built in Go
6. Graceful degradation - Works without JS
7. You get to decide what to render at the root - Just slap an html at the root of the component!
8. CSS is automatically tied to a route, and placed in the head via `Link` , then displayed on a given route via Links . Result? No worries about styling clashes across pages! So no more need for CSS in JS / CSS modules! And CSS for each page is lazy loaded, using the platform!🔥
9. Add a .server extension to instruct remix to only run the file on the server, never send it to the browser.
10. Comes configured with `~` as a reference to /app (TypeScript's path in tsconfig is set up to honor this)
11. Loaders basically give you a BFF for free. The queries to the DB run on the server, so they're fast, avoid a round trip, and only the data you specify is returned to the client.
12. Export an `action` function to handle a form submission.
13. Built in caching support using the platform
14. Use Link rel="prefetch" to preload links
15. Seamlessly share code between the client and the server - see new.tsx in jokes app for an example of how the validation functions are just plain JS functions declared in the component. So they can be leveraged on either side. But if they're not referenced on the client, they should be tree-shaken out for the client build.

## Next similarities
1. File based routes (though can use remix.config to declare routes too if preferred)
2. Dynamic routes use `$slug` instead of `[slug]`

## Remix advantages over Next

1. [Fetching and displaying data requires significantly less code than Next](https://blog.plasmic.app/posts/remix-for-nextjs-developers/#client-server-form-handling-architecture).
2. Fetches nested routes in parallel
3. Easy to upgrade to if you're using React Router 6.4 already
4. Uses `useLoaderData` instead of injecting props via `getServerSideProps` - [Example](https://twitter.com/andrewingram/status/1470352609584234504)
3. Embraces progressive enhancement. Remix works without JS by default. Forms and links still work without JS. So Remix degrades gracefully without JS (which we know [can happen for various reasons](https://kryogenix.org/code/browser/everyonehasjs.html). Next has a feature to optionally remove only the framework's JS runtime (not all JS), but it's been experimental for over a year. [More](https://twitter.com/gerrit_alex/status/1470357792397668356).
5. Embraces web standards. Learning Remix is basically learning web standards. Uses browser's [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) type.
6. Styles are automatically scoped to the page, since they're only loaded for the page. No need for special tech like CSS modules.
8. Export `links` object to add links (like stylesheet references) to the head.
9. The component contains its API route via loader, which runs on the server, but is declared inside the component. This makes type safety easy. Think of Remix routes as backend views using React for templating, but then they know how to seamlessly hydrate in the browser to add some flair.
10. Export `actionFunction` in the same file to handle server POSTs. Can omit the action on the form since it posts to the same page by default. Result: Less file hopping, less config, and simpler mental model.
11. Includes `json` function for easily returning json from an ActionFunction
12. Includes `redirect` func which can be run on the server to fire a redirect.

## Next advantages over Remix

1. Vercel is a larger, more established startup with more VC funding
2. React Server components support
3. Next includes a smart Image component (Remix claims theirs is coming soon)
4. Next supports static pre-compiled pages
5. Has fewer package deps, so package.json is more concise
7. Intelligently prefetches links. With Remix, you opt-in via the platform: `Link rel="prefetch"`
8. Better error messages - Remix errors sometimes don't mention the component where the error is being thrown. So gotta comment things out to hunt issues down 👎

## Utils

https://github.com/sergiodxa/remix-utils
https://github.com/brophdawg11/remix-validity-state

## Typing Remix

https://www.epicweb.dev/fully-typed-web-apps