Error converting content: marked is not a function

title:: Tech / Remix Run
- #0 Inbox
- TODO watch from 31:56 https://www.youtube.com/watch?v=wsJaUjd1rUo
- 101
- Remix is "edge native"
- “Half of your app code is related to data mutations. It's time your web framework respects that.”
- Deep Dive Tutorial
  collapsed:: true
- TODO Repo - add vanilla here
- On the server, the entry point for remix is the `handleRequest` function in `entry.server.js`
  - A request comes in. We return the fucking HTML. Done.
  - ```jsx 
		  export default function handleRequest(
		    request: Request,
		    responseStatusCode: number,
		    responseHeaders: Headers,
		    remixContext: EntryContext
		  ) {
		    let markup = renderToString(
		      
		    );
		  
		    responseHeaders.set("Content-Type", "text/html");
		  
		    return new Response("" + markup, {
		      status: responseStatusCode,
		      headers: responseHeaders,
		    });
		  }
		  ```
- On the client, remix "hydrates" the entire document with code in `entry.client.js`
- How is Remix Different than Next.js?
  collapsed:: true
- There are a lot of differences in feature sets, but one major, architectural difference is that Remix doesn't rely on SSG for speed. In practically every app, you will eventually hit a case that SSG can't support. For the application we're comparing here, it's the search page.
- **Why Next.js is slower:** Next.js introduced what we call a "network waterfall request chain".
- Because SSG can't be used here, the app is fetching the search results from the user's browser. It can't load images until it has fetched data, and it can't fetch data until it has loaded, parsed, and evaluated the JavaScript
- Remix doesn't depend on Node.js though. It can run in any JavaScript environment. In fact, it already runs in Cloudflare Workers, which means you're running your code on their 250 servers distributed around the world. Can't get any closer to users than that!
- Remix can prefetch any page because there was no architectural divergence for data loading. Prefetching an unknowable, user-driven search page URL is not any different than prefetching a knowable product URL.
- **How mutations work in Remix:** Remix uses HTML forms.
- Since the dawn of the web, a mutation is modeled as a form and a server page to handle it.
- Remix handles every error around data and rendering in your app, even errors on the server.
	  All you have to do is define an error boundary at the root of your app. You can even get more granular and only take down the section of the page that had an error.
- In our decades-long careers in web dev, we remember how simple it used to be. Put a button in a form, point it at a page that writes to the database, redirect, get the updated UI. It was so easy.
	  When designing Remix APIs, we always look to the platform first. Like the mutation workflow. We knew the HTML form API + a server side handler was right, so we built around that. It wasn't the goal, but a seriously amazing side effect is that the core features of an idiomatic Remix app work without JavaScript!
- Instead of saying "Remix works without JavaScript" we prefer to say "Remix works before JavaScript"
- You will find that when you start learning Remix, you'll spend as much time on the MDN docs, if not more, than the Remix docs. We want Remix to help you build better websites even when you're not using it.
- **Get better at Remix, accidentally get better at the web.**
- Server and HTTP caching only work when your site is getting traffic. Turns out, your business only works when your site is getting traffic too 😳. You don't need two page views a day to be one second faster, you need a mailing list. #lol
- Let's look at another change. Imagine the product team comes to you and says the home page is changing to display similar products to what the user has purchased in the past, instead of a set list of products.
- Like the search page, SSG is out the door, and your performance by default with it. SSG really has a limited set of use cases.
- Virtually every website has users. As your site grows, you're going to start showing the user more and more personalized information. Each time, that becomes a client side fetch. At some point, the majority of your page is client fetched and your performance is gone.
- For Remix, this is just a different database query on the back end.
- Consider the top of the ecommerce food chain: Amazon.com. That entire page is personalized. We already know the end from the beginning. Invest in architecture that will get you there, not stuff you'll need to drop when the product team tweaks the home page
- **Bottom Line.** It's easy to miss the power in Remix's deceptively simple 
 + action + loader APIs and the design to keep as much on the server as possible. It changes the game. These APIs are the source of Remix's faster page loads, faster transitions, better UX around mutations (interruptions, race conditions, errors), and simpler code for the developer.
	  Remix apps get their speed from backend infrastructure and prefetching. Next.js gets its speed from SSG. Since SSG has limited use cases, especially as features and data scale, you will lose that speed.
- If you've got a slow backend API, invest your time making your back end fast. If you don't have any control over it, deploy your own server and cache there where you can speed up any page for all users.
- - Topics
- Data Loading
  - Data loading is built into Remix.
  - If your web dev background is primarily in the last few years, you're probably used to creating two things here: an API route to provide data and a frontend component that consumes it. In Remix your frontend component is also its own API route and it already knows how to talk to itself on the server from the browser. That is, you don't have to fetch it.
  - If your background is a bit farther back than that with MVC web frameworks like Rails, then you can think of your Remix routes as backend views using React for templating, but then they know how to seamlessly hydrate in the browser to add some flair instead of writing detached jQuery code to dress up the user interactions. It's progressive enhancement realized in its fullest. Additionally, your routes are their own controller.
  - Loaders are the backend "API" for their component and it's already wired up for you through useLoaderData.
  - ``` jsx
			  export default function Posts() {
			    const { posts } = useLoaderData();
			    console.log(posts);
			    return (
			      

			        
Posts
			      
			    );
			  }
			  ```
  - If you have your **server and browser consoles both open, you'll note that they both logged our post data.** That's because Remix rendered on the server to send a full HTML document like a traditional web framework, but it also hydrated in the client and logged there too.
  - - Best Practices
  - A solid practice is to create a module that deals with a particular concern. In our case it's going to be reading and writing posts. Let's set that up now and add a getPosts export to our module.
- Stacks
	  collapsed:: true
  - **The Blues Stack:** Deployed to the edge (distributed) with a long-running Node.js server and PostgreSQL database. Intended for large and fast production-grade applications serving millions of users.
  - **The Indie Stack:** Deployed to a long-running Node.js server with a persistent SQLite database. This stack is great for websites with dynamic data that you control (blogs, marketing, content sites). It's also a perfect, low-complexity bootstrap for MVPs, prototypes, and proof-of-concepts that can later be updated to the Blues stack easily.
  - **The Grunge Stack:** Deployed to a serverless function running Node.js with DynamoDB for persistence. Intended for folks who want to deploy a production-grade application on AWS infrastructure serving millions of users.
- Routing
  - An index route will render at the folder's path (just like index.html on a web server).
- Remix teaches you web
- EVERY INPUT IS A FORM!
- Toggle
	  collapsed:: true
  - chip component; checkbox input
  - stepper?
  - https://flexboxpatterns.com/stepper-input
  - - When browsers added  `window.fetch` , they also add three other objects:  `Headers` ,  `Request` , and  `Response` . Remix is built upon this API