Remix is a new react-based JavaScript framework that supports server-side rendering. It comes from the team behind React Router and provides a fresh take on fullstack web app development.  

#react #js #firstlook

🔗 Resources

- Remix Docs https://remix.run
- Remix vs Next.js https://sergiodxa.com/articles/remix-vs-next-js-comparison
- Next 12 First Look https://youtu.be/lRQ5z7i7pxE

📚 Chapters

00:00 What is Remix?
01:12 Server-side Rendering
02:01 Get Started
02:48 Routing
04:20 Data Fetching
05:01 Form Actions
06:19 Styles
06:54 React Server Components?
07:41 Business Model
8:08 Other Exciting Developments

🔥 Get More Content - Upgrade to PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

🔖 Topics Covered

- What is Remix?
- React Remix Tutorial
- Remix vs Next.js
- Does remix use server components?
- React Remix Basics for webdev
- Nested routing in remix
- How remix actions work
2024-02-04T05:39:10.878Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
0c680d81-8c0a-4118-962f-9f37ae399fac
908fc8b9d174f6a7111489ce64ebf4afd813d9af977a9430cfb99784bad8a198
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
They say, every day, a new JavaScript framework is born, and this day in history is no exception.
Yesterday, the team behind React Router released their new framework, Remix, as a free and open source project.
To be fair, this framework has actually been around for over a year, but you probably didn't use it because they were charging $250 for a license to use it.
And that's actually now a very low price.
Fortunately for us cheap developers, they changed their business model.
It's now free and open source with an MIT In today's video, you'll get to feel the experience of a premium JavaScript framework.
We'll compare it to other React based frameworks like Next.
Js s in Gatsby.
And most importantly, try to figure out when and why you would want to use Remix.
If you're new here, like and subscribe, and stay tuned for a special surprise video this Friday with a new course announcement and discount.
First of all, what is Remix, and why would I wanna use it?
It's a React based framework that allows you to render code on the server, which tends to result in better performance and search engine optimization, as opposed to using React only on the client side.
This is nothing new, and a problem that's already been solved by frameworks like Next.
Js.
However, Remix goes about it in a slightly different way that I think you'll find very interesting.
It actually feels kind of old school in a way that might feel familiar to a HP or Ruby on Rails developer.
The first interesting point is that it only does server side rendering.
It doesn't do static site generation or incremental static regeneration like Next.
Js does.
That's kind of interesting because jamstack applications that use static generation have been very popular in recent years, and also tend to be the fastest time to first bite when it comes to performance.
And they're really easy to deploy because you're only dealing with static files.
The main drawback though is that you have to rebuild those pages whenever the data changes.
With Remix, you're not building jamstack applications.
It goes all in on server rendering, which means that you'll have to have an actual server to run the application.
But at the same time, it'll be much more well suited for handling dynamic data.
To me, it looks like Remix would be ideal for an application that has a lot of pages, and all those pages rely on some dynamic data that lives in a database somewhere, but it might be overkill if you're just building a blog that you post to once a year.
Let's go ahead and initialize a new project from the landline, and you'll notice how it does this cool rainbow animation.
Totally unnecessary, but it tricks my brain into thinking this framework must be really good.
As we set up the project, notice how it provides a bunch of different back end servers that can help streamline deployment.
I'm going to choose Express, then when we open the project, you'll notice that we're met with a fairly simple file structure.
In the server directory, we have an Express JS app.
The only thing it requires from Remix is the create request handler function.
This function takes an incoming request from user and renders the React code on the server with Remix, and then sends a response back to the user.
It's also worth noting that Remix doesn't necessarily need Node.
Js and could work on other run times like Deno.
And you'll also notice the Express app is configured with caching, telling the server to send a cache response unless the underlying data has changed.
That's pretty cool, but all the interesting stuff is going on in the app directory.
Here, we have a routes directory and any component inside of it will be mapped to a URL based on the file structure, which is the exact same way that it works in Next JS.
One minor difference is that dynamic routes start with a dollar sign versus brackets in Next ES.
But there is one very important difference that could be a game changer for certain types of apps, and that's a feature called nested routes.
Whenever you have a route nested under a parent, the child will automatically inherit the UI of the parent.
If you've ever used a framework like Angular or Ember.
Js, you should to recognize this pattern.
Here's how it works.
You have a parent component, like in this case, the about page, then somewhere in the UI, you have a router outlet.
This outlet that will be replaced with a child component based on the URL you navigate to.
In this case, we have an about directory with an index file inside of That component will be rendered in the outlet when we go to the about URL.
But if we add another component here, like, woah, dude, it will be rendered to that same outlet when we navigate to the woah URL.
That means when you define a child route, you only need to think about one small part of the UI as opposed to building an entirely new page.
Now, that could be really cool for certain types of applications, especially something with a complex dashboard, because you can also create your own custom error boundaries, which means that if a child component fails, it will render an error message there and not nuke the entire page.
But in other cases, you may not want your child to inherit the parent's UI.
In which case, you can opt out by moving your file somewhere else and creating a file path with periods in between the segments.
Now that we know how the basic routing system works, Let's talk about data fetching.
In any given route, you export a React component for your front end UI, but you can also export a function called loader, to fetch data on the server for that component.
The loader function will only be executed on the server.
This is almost exactly how it works in Next JS with get server side props.
The main difference though, is that instead of passing props to the component, Remix provides a hook called useLoaderData to access whatever data you fetched on the server.
It's also worth noting that when it comes to data fetching, everything is based on the browser fetch API.
It actually polyfills the fetch API on a server, so you can access fetch inside of your loader function just like you were working in the browser.
Reading data from your server is essential, but another unique way that Remix stands out is that it also allows you to write to your server, made possible with a new old idea about how to work with HTML forms.
Normally, when dealing with a form in React, you bind to the on submit event, and then prevent default to write a custom function to handle the form submission.
Remix takes a more old school approach by providing you with a form component that gets submitted like a normal form.
In other words, you don't need to prevent default.
What you do instead is define an action function that will run on your server.
This function will have access to the values in the form, which you can then use to update your database.
The action function returns a response, which can then be accessed in the front end UI with a hook, and that could result in a far more simplified round trip when it comes to writing data across the entire stack.
In addition, it provides another hook called use transition that allows you to get the state of the action, which could be used to display a loading spinner while the update is working on the server, or to perform optimistic updates to update the UI before the server is finished making its updates.
On the surface, this looks really cool, but I'm a little skeptical about how well it would scale complexity.
I know from experience how insanely complicated forms can get, and I'm curious how this approach would handle client side validation, nested form fields, auto save features, and things like that.
Now, taking a step back to the big picture, I think the really interesting features that Remix offers are nested routing and actions for handling form submission.
There are a lot of other minor differences, like for meta tags, you export a function, instead of using the head component like you would in Next.
When it comes to riling, Remix doesn't support CSS modules, and there are some caveats if you're using a CSS and JS library.
However, you can still scope your styles to like pages by placing them in the app directory.
Overall, I'd say that it does have everything in place that you would need to build a serious application.
Another question you may have is where do React server components come in.
Remember, server components are still experimental in React 18.
If you watch my next 12 video, you'll know that server components open in the door to a bunch of cool new features and ways to simplify our code.
I'm not sure if Remix has plans to use them, but in their loader functions, they just return JSON.
Run.
In theory, a loader function could also return a server component, but I'm not sure if it would make much of a difference at that point, because you can also disable JavaScript on a Remix component.
In other words, they both allow you to ship 0 JavaScript to the client.
In my opinion, I kind of like how Next.
Js is embracing the new React 18 features, but with Remix, so you have a lot more framework specific abstractions.
There's nothing wrong with that.
Frameworks are supposed to create their own abstractions to make your life easier.
But, in general, I think it's better to embrace what's available in the core framework.
Another good question is how will Remix separate you from your money?
Initially, it was offered as a paid framework, which is a very unusual business model.
It's hard to justify paying for a JavaScript framework when there are plenty of battle tested solutions out there.
I'm not sure what their plans are, I'm only speculating here, but I'm guessing they'll offer a paid hosting service following a model similar to Vercel or Netlify.
You pay them, they pay AWS for infrastructure until they can get enough customers to be acquired.
It's a lot easier to lose money and get acquired, versus trying to sell a JavaScript framework.
To summarize, I think Remix definitely looks like an awesome option for building full stack React apps.
The only thing more impressive than the framework itself is their marketing game.
The Remix landing page is one hell of a sales pitch, but that's what you need to stand out in the ruthless world of JavaScript frameworks.
Personally, I'm still a lot more excited about Next 12, and that's likely the option I'll go with when building the next version of the Fireship IO website.
But it's good to see a competitor to Next.
Js because it's kind of been dominating the space for a while.
Competition is always a win for independent developers.
There's also a of other exciting things going on in the space.
Like, Rich Harris, the creator of Svelte, recently joined Vercel to work on Svelte full time.
And, I can pretty much guarantee you, that in SvelteKit is going to be absolutely awesome in the future.
Then, you also have Nuxt 3 for Vue, which also looks incredible, and then you have frameworks like Blits that build on top of Next.
Js that provide additional tools for building database backed applications.
The bottom line is that there's a ton of stuff going on in the server side rendering space right now, and Remix is definitely an option worth checking out.
But, I'm curious to know what you think, so let me know in the comments.
Thanks for watching, and I will see you in the next one.

Speaker 0: They say, every day, a new JavaScript framework is born, and this day in history is no exception. Yesterday, the team behind React Router released their new framework, Remix, as a free and open source project. To be fair, this framework has actually been around for over a year, but you probably didn't use it because they were charging $250 for a license to use it. And that's actually now a very low price. Fortunately for us cheap developers, they changed their business model.

It's now free and open source with an MIT In today's video, you'll get to feel the experience of a premium JavaScript framework. We'll compare it to other React based frameworks like Next. Js s in Gatsby. And most importantly, try to figure out when and why you would want to use Remix. If you're new here, like and subscribe, and stay tuned for a special surprise video this Friday with a new course announcement and discount.

First of all, what is Remix, and why would I wanna use it? It's a React based framework that allows you to render code on the server, which tends to result in better performance and search engine optimization, as opposed to using React only on the client side. This is nothing new, and a problem that's already been solved by frameworks like Next. Js. However, Remix goes about it in a slightly different way that I think you'll find very interesting.

It actually feels kind of old school in a way that might feel familiar to a HP or Ruby on Rails developer. The first interesting point is that it only does server side rendering. It doesn't do static site generation or incremental static regeneration like Next. Js does. That's kind of interesting because jamstack applications that use static generation have been very popular in recent years, and also tend to be the fastest time to first bite when it comes to performance.

And they're really easy to deploy because you're only dealing with static files. The main drawback though is that you have to rebuild those pages whenever the data changes. With Remix, you're not building jamstack applications. It goes all in on server rendering, which means that you'll have to have an actual server to run the application. But at the same time, it'll be much more well suited for handling dynamic data.

To me, it looks like Remix would be ideal for an application that has a lot of pages, and all those pages rely on some dynamic data that lives in a database somewhere, but it might be overkill if you're just building a blog that you post to once a year. Let's go ahead and initialize a new project from the landline, and you'll notice how it does this cool rainbow animation. Totally unnecessary, but it tricks my brain into thinking this framework must be really good. As we set up the project, notice how it provides a bunch of different back end servers that can help streamline deployment. I'm going to choose Express, then when we open the project, you'll notice that we're met with a fairly simple file structure.

In the server directory, we have an Express JS app. The only thing it requires from Remix is the create request handler function. This function takes an incoming request from user and renders the React code on the server with Remix, and then sends a response back to the user. It's also worth noting that Remix doesn't necessarily need Node. Js and could work on other run times like Deno.

And you'll also notice the Express app is configured with caching, telling the server to send a cache response unless the underlying data has changed. That's pretty cool, but all the interesting stuff is going on in the app directory. Here, we have a routes directory and any component inside of it will be mapped to a URL based on the file structure, which is the exact same way that it works in Next JS. One minor difference is that dynamic routes start with a dollar sign versus brackets in Next ES. But there is one very important difference that could be a game changer for certain types of apps, and that's a feature called nested routes.

Whenever you have a route nested under a parent, the child will automatically inherit the UI of the parent. If you've ever used a framework like Angular or Ember. Js, you should to recognize this pattern. Here's how it works. You have a parent component, like in this case, the about page, then somewhere in the UI, you have a router outlet.

This outlet that will be replaced with a child component based on the URL you navigate to. In this case, we have an about directory with an index file inside of That component will be rendered in the outlet when we go to the about URL. But if we add another component here, like, woah, dude, it will be rendered to that same outlet when we navigate to the woah URL. That means when you define a child route, you only need to think about one small part of the UI as opposed to building an entirely new page. Now, that could be really cool for certain types of applications, especially something with a complex dashboard, because you can also create your own custom error boundaries, which means that if a child component fails, it will render an error message there and not nuke the entire page.

But in other cases, you may not want your child to inherit the parent's UI. In which case, you can opt out by moving your file somewhere else and creating a file path with periods in between the segments. Now that we know how the basic routing system works, Let's talk about data fetching. In any given route, you export a React component for your front end UI, but you can also export a function called loader, to fetch data on the server for that component. The loader function will only be executed on the server.

This is almost exactly how it works in Next JS with get server side props. The main difference though, is that instead of passing props to the component, Remix provides a hook called useLoaderData to access whatever data you fetched on the server. It's also worth noting that when it comes to data fetching, everything is based on the browser fetch API. It actually polyfills the fetch API on a server, so you can access fetch inside of your loader function just like you were working in the browser. Reading data from your server is essential, but another unique way that Remix stands out is that it also allows you to write to your server, made possible with a new old idea about how to work with HTML forms.

Normally, when dealing with a form in React, you bind to the on submit event, and then prevent default to write a custom function to handle the form submission. Remix takes a more old school approach by providing you with a form component that gets submitted like a normal form. In other words, you don't need to prevent default. What you do instead is define an action function that will run on your server. This function will have access to the values in the form, which you can then use to update your database.

The action function returns a response, which can then be accessed in the front end UI with a hook, and that could result in a far more simplified round trip when it comes to writing data across the entire stack. In addition, it provides another hook called use transition that allows you to get the state of the action, which could be used to display a loading spinner while the update is working on the server, or to perform optimistic updates to update the UI before the server is finished making its updates. On the surface, this looks really cool, but I'm a little skeptical about how well it would scale complexity. I know from experience how insanely complicated forms can get, and I'm curious how this approach would handle client side validation, nested form fields, auto save features, and things like that. Now, taking a step back to the big picture, I think the really interesting features that Remix offers are nested routing and actions for handling form submission.

There are a lot of other minor differences, like for meta tags, you export a function, instead of using the head component like you would in Next. When it comes to riling, Remix doesn't support CSS modules, and there are some caveats if you're using a CSS and JS library. However, you can still scope your styles to like pages by placing them in the app directory. Overall, I'd say that it does have everything in place that you would need to build a serious application. Another question you may have is where do React server components come in.

Remember, server components are still experimental in React 18. If you watch my next 12 video, you'll know that server components open in the door to a bunch of cool new features and ways to simplify our code. I'm not sure if Remix has plans to use them, but in their loader functions, they just return JSON. Run. In theory, a loader function could also return a server component, but I'm not sure if it would make much of a difference at that point, because you can also disable JavaScript on a Remix component.

In other words, they both allow you to ship 0 JavaScript to the client. In my opinion, I kind of like how Next. Js is embracing the new React 18 features, but with Remix, so you have a lot more framework specific abstractions. There's nothing wrong with that. Frameworks are supposed to create their own abstractions to make your life easier.

But, in general, I think it's better to embrace what's available in the core framework. Another good question is how will Remix separate you from your money? Initially, it was offered as a paid framework, which is a very unusual business model. It's hard to justify paying for a JavaScript framework when there are plenty of battle tested solutions out there. I'm not sure what their plans are, I'm only speculating here, but I'm guessing they'll offer a paid hosting service following a model similar to Vercel or Netlify.

You pay them, they pay AWS for infrastructure until they can get enough customers to be acquired. It's a lot easier to lose money and get acquired, versus trying to sell a JavaScript framework. To summarize, I think Remix definitely looks like an awesome option for building full stack React apps. The only thing more impressive than the framework itself is their marketing game. The Remix landing page is one hell of a sales pitch, but that's what you need to stand out in the ruthless world of JavaScript frameworks.

Personally, I'm still a lot more excited about Next 12, and that's likely the option I'll go with when building the next version of the Fireship IO website. But it's good to see a competitor to Next. Js because it's kind of been dominating the space for a while. Competition is always a win for independent developers. There's also a of other exciting things going on in the space.

Like, Rich Harris, the creator of Svelte, recently joined Vercel to work on Svelte full time. And, I can pretty much guarantee you, that in SvelteKit is going to be absolutely awesome in the future. Then, you also have Nuxt 3 for Vue, which also looks incredible, and then you have frameworks like Blits that build on top of Next. Js that provide additional tools for building database backed applications. The bottom line is that there's a ton of stuff going on in the server side rendering space right now, and Remix is definitely an option worth checking out.

But, I'm curious to know what you think, so let me know in the comments. Thanks for watching, and I will see you in the next one.
They say, every day, a new JavaScript framework is born, and this day in history is no exception. Yesterday, the team behind React Router released their new framework, Remix, as a free and open source project.
To be fair, this framework has actually been around for over a year, but you probably didn't use it because they were charging $250 for a license to use it. And that's actually now a very low price. Fortunately for us cheap developers, they changed their business model. It's now free and open source with an MIT In today's video, you'll get to feel the experience of a premium JavaScript framework.
copyright licenses
We'll compare it to other React based frameworks like Next. Js s in Gatsby. And most importantly, try to figure out when and why you would want to use Remix.
If you're new here, like and subscribe, and stay tuned for a special surprise video this Friday with a new course announcement and discount. First of all, what is Remix, and why would I wanna use it? It's a React based framework that allows you to render code on the server, which tends to result in better performance and search engine optimization, as opposed to using React only on the client side. This is nothing new, and a problem that's already been solved by frameworks like Next.
programming
youtube
Js. However, Remix goes about it in a slightly different way that I think you'll find very interesting. It actually feels kind of old school in a way that might feel familiar to a HP or Ruby on Rails developer. The first interesting point is that it only does server side rendering. It doesn't do static site generation or incremental static regeneration like Next. Js does. That's kind of interesting because jamstack applications that use static generation have been very popular in recent years, and also tend to be the fastest time to first bite when it comes to performance. And they're really easy to deploy because you're only dealing with static files. The main drawback though is that you have to rebuild those pages whenever the data changes.
With Remix, you're not building jamstack applications. It goes all in on server rendering, which means that you'll have to have an actual server to run the application. But at the same time, it'll be much more well suited for handling dynamic data. To me, it looks like Remix would be ideal for an application that has a lot of pages, and all those pages rely on some dynamic data that lives in a database somewhere, but it might be overkill if you're just building a blog that you post to once a year.
software
Let's go ahead and initialize a new project from the landline, and you'll notice how it does this cool rainbow animation. Totally unnecessary, but it tricks my brain into thinking this framework must be really good. As we set up the project, notice how it provides a bunch of different back end servers that can help streamline deployment.
streaming
I'm going to choose Express, then when we open the project, you'll notice that we're met with a fairly simple file structure. In the server directory, we have an Express JS app. The only thing it requires from Remix is the create request handler function. This function takes an incoming request from user and renders the React code on the server with Remix, and then sends a response back to the user. It's also worth noting that Remix doesn't necessarily need Node. Js and could work on other run times like Deno. And you'll also notice the Express app is configured with caching, telling the server to send a cache response unless the underlying data has changed. That's pretty cool, but all the interesting stuff is going on in the app directory. Here, we have a routes directory and any component inside of it will be mapped to a URL based on the file structure, which is the exact same way that it works in Next JS. One minor difference is that dynamic routes start with a dollar sign versus brackets in Next ES. But there is one very important difference that could be a game changer for certain types of apps, and that's a feature called nested routes.
Whenever you have a route nested under a parent, the child will automatically inherit the UI of the parent. If you've ever used a framework like Angular or Ember. Js, you should to recognize this pattern. Here's how it works. You have a parent component, like in this case, the about page, then somewhere in the UI, you have a router outlet.
parenting
This outlet that will be replaced with a child component based on the URL you navigate to. In this case, we have an about directory with an index file inside of That component will be rendered in the outlet when we go to the about URL. But if we add another component here, like, woah, dude, it will be rendered to that same outlet when we navigate to the woah URL. That means when you define a child route, you only need to think about one small part of the UI as opposed to building an entirely new page. Now, that could be really cool for certain types of applications, especially something with a complex dashboard, because you can also create your own custom error boundaries, which means that if a child component fails, it will render an error message there and not nuke the entire page. But in other cases, you may not want your child to inherit the parent's UI. In which case, you can opt out by moving your file somewhere else and creating a file path with periods in between the segments. Now that we know how the basic routing system works, Let's talk about data fetching. In any given route, you export a React component for your front end UI, but you can also export a function called loader, to fetch data on the server for that component. The loader function will only be executed on the server. This is almost exactly how it works in Next JS with get server side props. The main difference though, is that instead of passing props to the component, Remix provides a hook called useLoaderData to access whatever data you fetched on the server. It's also worth noting that when it comes to data fetching, everything is based on the browser fetch API. It actually polyfills the fetch API on a server, so you can access fetch inside of your loader function just like you were working in the browser. Reading data from your server is essential, but another unique way that Remix stands out is that it also allows you to write to your server, made possible with a new old idea about how to work with HTML forms. Normally, when dealing with a form in React, you bind to the on submit event, and then prevent default to write a custom function to handle the form submission. Remix takes a more old school approach by providing you with a form component that gets submitted like a normal form. In other words, you don't need to prevent default. What you do instead is define an action function that will run on your server. This function will have access to the values in the form, which you can then use to update your database. The action function returns a response, which can then be accessed in the front end UI with a hook, and that could result in a far more simplified round trip when it comes to writing data across the entire stack. In addition, it provides another hook called use transition that allows you to get the state of the action, which could be used to display a loading spinner while the update is working on the server, or to perform optimistic updates to update the UI before the server is finished making its updates. On the surface, this looks really cool, but I'm a little skeptical about how well it would scale complexity. I know from experience how insanely complicated forms can get, and I'm curious how this approach would handle client side validation, nested form fields, auto save features, and things like that. Now, taking a step back to the big picture, I think the really interesting features that Remix offers are nested routing and actions for handling form submission. There are a lot of other minor differences, like for meta tags, you export a function, instead of using the head component like you would in Next. When it comes to riling, Remix doesn't support CSS modules, and there are some caveats if you're using a CSS and JS library. However, you can still scope your styles to like pages by placing them in the app directory. Overall, I'd say that it does have everything in place that you would need to build a serious application. Another question you may have is where do React server components come in. Remember, server components are still experimental in React 18. If you watch my next 12 video, you'll know that server components open in the door to a bunch of cool new features and ways to simplify our code. I'm not sure if Remix has plans to use them, but in their loader functions, they just return JSON. Run. In theory, a loader function could also return a server component, but I'm not sure if it would make much of a difference at that point, because you can also disable JavaScript on a Remix component. In other words, they both allow you to ship 0 JavaScript to the client. In my opinion, I kind of like how Next. Js is embracing the new React 18 features, but with Remix, so you have a lot more framework specific abstractions. There's nothing wrong with that. Frameworks are supposed to create their own abstractions to make your life easier. But, in general, I think it's better to embrace what's available in the core framework. Another good question is how will Remix separate you from your money? Initially, it was offered as a paid framework, which is a very unusual business model.
It's hard to justify paying for a JavaScript framework when there are plenty of battle tested solutions out there. I'm not sure what their plans are, I'm only speculating here, but I'm guessing they'll offer a paid hosting service following a model similar to Vercel or Netlify. You pay them, they pay AWS for infrastructure until they can get enough customers to be acquired.
customer support
It's a lot easier to lose money and get acquired, versus trying to sell a JavaScript framework. To summarize, I think Remix definitely looks like an awesome option for building full stack React apps. The only thing more impressive than the framework itself is their marketing game. The Remix landing page is one hell of a sales pitch, but that's what you need to stand out in the ruthless world of JavaScript frameworks. Personally, I'm still a lot more excited about Next 12, and that's likely the option I'll go with when building the next version of the Fireship IO website. But it's good to see a competitor to Next. Js because it's kind of been dominating the space for a while. Competition is always a win for independent developers. There's also a of other exciting things going on in the space. Like, Rich Harris, the creator of Svelte, recently joined Vercel to work on Svelte full time. And, I can pretty much guarantee you, that in SvelteKit is going to be absolutely awesome in the future. Then, you also have Nuxt 3 for Vue, which also looks incredible, and then you have frameworks like Blits that build on top of Next.
Js that provide additional tools for building database backed applications. The bottom line is that there's a ton of stuff going on in the server side rendering space right now, and Remix is definitely an option worth checking out. But, I'm curious to know what you think, so let me know in the comments.
databases
Thanks for watching, and I will see you in the next one.
They say, every day, a new JavaScript framework is born, and this day in history is no exception. Yesterday, the team behind React Router released their new framework, Remix, as a free and open source project. To be fair, this framework has actually been around for over a year, but you probably didn't use it because they were charging $250 for a license to use it. And that's actually now a very low price. Fortunately for us cheap developers, they changed their business model. It's now free and open source with an MIT In today's video, you'll get to feel the experience of a premium JavaScript framework. We'll compare it to other React based frameworks like Next. Js s in Gatsby. And most importantly, try to figure out when and why you would want to use Remix. If you're new here, like and subscribe, and stay tuned for a special surprise video this Friday with a new course announcement and discount. First of all, what is Remix, and why would I wanna use it? It's a React based framework that allows you to render code on the server, which tends to result in better performance and search engine optimization, as opposed to using React only on the client side. This is nothing new, and a problem that's already been solved by frameworks like Next. Js. However, Remix goes about it in a slightly different way that I think you'll find very interesting. It actually feels kind of old school in a way that might feel familiar to a HP or Ruby on Rails developer. The first interesting point is that it only does server side rendering. It doesn't do static site generation or incremental static regeneration like Next. Js does. That's kind of interesting because jamstack applications that use static generation have been very popular in recent years, and also tend to be the fastest time to first bite when it comes to performance. And they're really easy to deploy because you're only dealing with static files. The main drawback though is that you have to rebuild those pages whenever the data changes. With Remix, you're not building jamstack applications. It goes all in on server rendering, which means that you'll have to have an actual server to run the application. But at the same time, it'll be much more well suited for handling dynamic data. To me, it looks like Remix would be ideal for an application that has a lot of pages, and all those pages rely on some dynamic data that lives in a database somewhere, but it might be overkill if you're just building a blog that you post to once a year. Let's go ahead and initialize a new project from the landline, and you'll notice how it does this cool rainbow animation. Totally unnecessary, but it tricks my brain into thinking this framework must be really good. As we set up the project, notice how it provides a bunch of different back end servers that can help streamline deployment. I'm going to choose Express, then when we open the project, you'll notice that we're met with a fairly simple file structure. In the server directory, we have an Express JS app. The only thing it requires from Remix is the create request handler function. This function takes an incoming request from user and renders the React code on the server with Remix, and then sends a response back to the user. It's also worth noting that Remix doesn't necessarily need Node. Js and could work on other run times like Deno. And you'll also notice the Express app is configured with caching, telling the server to send a cache response unless the underlying data has changed. That's pretty cool, but all the interesting stuff is going on in the app directory. Here, we have a routes directory and any component inside of it will be mapped to a URL based on the file structure, which is the exact same way that it works in Next JS. One minor difference is that dynamic routes start with a dollar sign versus brackets in Next ES. But there is one very important difference that could be a game changer for certain types of apps, and that's a feature called nested routes. Whenever you have a route nested under a parent, the child will automatically inherit the UI of the parent. If you've ever used a framework like Angular or Ember. Js, you should to recognize this pattern. Here's how it works. You have a parent component, like in this case, the about page, then somewhere in the UI, you have a router outlet. This outlet that will be replaced with a child component based on the URL you navigate to. In this case, we have an about directory with an index file inside of That component will be rendered in the outlet when we go to the about URL. But if we add another component here, like, woah, dude, it will be rendered to that same outlet when we navigate to the woah URL. That means when you define a child route, you only need to think about one small part of the UI as opposed to building an entirely new page. Now, that could be really cool for certain types of applications, especially something with a complex dashboard, because you can also create your own custom error boundaries, which means that if a child component fails, it will render an error message there and not nuke the entire page. But in other cases, you may not want your child to inherit the parent's UI. In which case, you can opt out by moving your file somewhere else and creating a file path with periods in between the segments. Now that we know how the basic routing system works, Let's talk about data fetching. In any given route, you export a React component for your front end UI, but you can also export a function called loader, to fetch data on the server for that component. The loader function will only be executed on the server. This is almost exactly how it works in Next JS with get server side props. The main difference though, is that instead of passing props to the component, Remix provides a hook called useLoaderData to access whatever data you fetched on the server. It's also worth noting that when it comes to data fetching, everything is based on the browser fetch API. It actually polyfills the fetch API on a server, so you can access fetch inside of your loader function just like you were working in the browser. Reading data from your server is essential, but another unique way that Remix stands out is that it also allows you to write to your server, made possible with a new old idea about how to work with HTML forms. Normally, when dealing with a form in React, you bind to the on submit event, and then prevent default to write a custom function to handle the form submission. Remix takes a more old school approach by providing you with a form component that gets submitted like a normal form. In other words, you don't need to prevent default. What you do instead is define an action function that will run on your server. This function will have access to the values in the form, which you can then use to update your database. The action function returns a response, which can then be accessed in the front end UI with a hook, and that could result in a far more simplified round trip when it comes to writing data across the entire stack. In addition, it provides another hook called use transition that allows you to get the state of the action, which could be used to display a loading spinner while the update is working on the server, or to perform optimistic updates to update the UI before the server is finished making its updates. On the surface, this looks really cool, but I'm a little skeptical about how well it would scale complexity. I know from experience how insanely complicated forms can get, and I'm curious how this approach would handle client side validation, nested form fields, auto save features, and things like that. Now, taking a step back to the big picture, I think the really interesting features that Remix offers are nested routing and actions for handling form submission. There are a lot of other minor differences, like for meta tags, you export a function, instead of using the head component like you would in Next. When it comes to riling, Remix doesn't support CSS modules, and there are some caveats if you're using a CSS and JS library. However, you can still scope your styles to like pages by placing them in the app directory. Overall, I'd say that it does have everything in place that you would need to build a serious application. Another question you may have is where do React server components come in. Remember, server components are still experimental in React 18. If you watch my next 12 video, you'll know that server components open in the door to a bunch of cool new features and ways to simplify our code. I'm not sure if Remix has plans to use them, but in their loader functions, they just return JSON. Run. In theory, a loader function could also return a server component, but I'm not sure if it would make much of a difference at that point, because you can also disable JavaScript on a Remix component. In other words, they both allow you to ship 0 JavaScript to the client. In my opinion, I kind of like how Next. Js is embracing the new React 18 features, but with Remix, so you have a lot more framework specific abstractions. There's nothing wrong with that. Frameworks are supposed to create their own abstractions to make your life easier. But, in general, I think it's better to embrace what's available in the core framework. Another good question is how will Remix separate you from your money? Initially, it was offered as a paid framework, which is a very unusual business model. It's hard to justify paying for a JavaScript framework when there are plenty of battle tested solutions out there. I'm not sure what their plans are, I'm only speculating here, but I'm guessing they'll offer a paid hosting service following a model similar to Vercel or Netlify. You pay them, they pay AWS for infrastructure until they can get enough customers to be acquired. It's a lot easier to lose money and get acquired, versus trying to sell a JavaScript framework. To summarize, I think Remix definitely looks like an awesome option for building full stack React apps. The only thing more impressive than the framework itself is their marketing game. The Remix landing page is one hell of a sales pitch, but that's what you need to stand out in the ruthless world of JavaScript frameworks. Personally, I'm still a lot more excited about Next 12, and that's likely the option I'll go with when building the next version of the Fireship IO website. But it's good to see a competitor to Next. Js because it's kind of been dominating the space for a while. Competition is always a win for independent developers. There's also a of other exciting things going on in the space. Like, Rich Harris, the creator of Svelte, recently joined Vercel to work on Svelte full time. And, I can pretty much guarantee you, that in SvelteKit is going to be absolutely awesome in the future. Then, you also have Nuxt 3 for Vue, which also looks incredible, and then you have frameworks like Blits that build on top of Next. Js that provide additional tools for building database backed applications. The bottom line is that there's a ton of stuff going on in the server side rendering space right now, and Remix is definitely an option worth checking out. But, I'm curious to know what you think, so let me know in the comments. Thanks for watching, and I will see you in the next one.
They
they
say,
say
every
every
day,
day
a
a
new
new
JavaScript
javascript
framework
framework
is
is
born,
born
and
and
this
this
day
day
in
in
history
history
is
is
no
no
exception.
exception
Yesterday,
yesterday
the
the
team
team
behind
behind
React
react
Router
router
released
released
their
their
new
new
framework,
framework
Remix,
remix
as
as
a
a
free
free
and
and
open
open
source
source
project.
project
To
to
be
be
fair,
fair
this
this
framework
framework
has
has
actually
actually
been
been
around
around
for
for
over
over
a
a
year,
year
but
but
you
you
probably
probably
didn't
didn't
use
use
it
it
because
because
they
they
were
were
charging
charging
$250
$250
for
for
a
a
license
license
to
to
use
use
it.
it
And
and
that's
that's
actually
actually
now
now
a
a
very
very
low
low
price.
price
Fortunately
fortunately
for
for
us
us
cheap
cheap
developers,
developers
they
they
changed
changed
their
their
business
business
model.
model
It's
it's
now
now
free
free
and
and
open
open
source
source
with
with
an
an
MIT
mit
In
in
today's
today's
video,
video
you'll
you'll
get
get
to
to
feel
feel
the
the
experience
experience
of
of
a
a
premium
premium
JavaScript
javascript
framework.
framework
We'll
we'll
compare
compare
it
it
to
to
other
other
React
react
based
based
frameworks
frameworks
like
like
Next.
next
Js
js
s
s
in
in
Gatsby.
gatsby
And
and
most
most
importantly,
importantly
try
try
to
to
figure
figure
out
out
when
when
and
and
why
why
you
you
would
would
want
want
to
to
use
use
Remix.
remix
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
stay
stay
tuned
tuned
for
for
a
a
special
special
surprise
surprise
video
video
this
this
Friday
friday
with
with
a
a
new
new
course
course
announcement
announcement
and
and
discount.
discount
First
first
of
of
all,
all
what
what
is
is
Remix,
remix
and
and
why
why
would
would
I
i
wanna
wanna
use
use
it?
it
It's
it's
a
a
React
react
based
based
framework
framework
that
that
allows
allows
you
you
to
to
render
render
code
code
on
on
the
the
server,
server
which
which
tends
tends
to
to
result
result
in
in
better
better
performance
performance
and
and
search
search
engine
engine
optimization,
optimization
as
as
opposed
opposed
to
to
using
using
React
react
only
only
on
on
the
the
client
client
side.
side
This
this
is
is
nothing
nothing
new,
new
and
and
a
a
problem
problem
that's
that's
already
already
been
been
solved
solved
by
by
frameworks
frameworks
like
like
Next.
next
Js.
js
However,
however
Remix
remix
goes
goes
about
about
it
it
in
in
a
a
slightly
slightly
different
different
way
way
that
that
I
i
think
think
you'll
you'll
find
find
very
very
interesting.
interesting
It
it
actually
actually
feels
feels
kind
kind
of
of
old
old
school
school
in
in
a
a
way
way
that
that
might
might
feel
feel
familiar
familiar
to
to
a
a
HP
hp
or
or
Ruby
ruby
on
on
Rails
rails
developer.
developer
The
the
first
first
interesting
interesting
point
point
is
is
that
that
it
it
only
only
does
does
server
server
side
side
rendering.
rendering
It
it
doesn't
doesn't
do
do
static
static
site
site
generation
generation
or
or
incremental
incremental
static
static
regeneration
regeneration
like
like
Next.
next
Js
js
does.
does
That's
that's
kind
kind
of
of
interesting
interesting
because
because
jamstack
jamstack
applications
applications
that
that
use
use
static
static
generation
generation
have
have
been
been
very
very
popular
popular
in
in
recent
recent
years,
years
and
and
also
also
tend
tend
to
to
be
be
the
the
fastest
fastest
time
time
to
to
first
first
bite
bite
when
when
it
it
comes
comes
to
to
performance.
performance
And
and
they're
they're
really
really
easy
easy
to
to
deploy
deploy
because
because
you're
you're
only
only
dealing
dealing
with
with
static
static
files.
files
The
the
main
main
drawback
drawback
though
though
is
is
that
that
you
you
have
have
to
to
rebuild
rebuild
those
those
pages
pages
whenever
whenever
the
the
data
data
changes.
changes
With
with
Remix,
remix
you're
you're
not
not
building
building
jamstack
jamstack
applications.
applications
It
it
goes
goes
all
all
in
in
on
on
server
server
rendering,
rendering
which
which
means
means
that
that
you'll
you'll
have
have
to
to
have
have
an
an
actual
actual
server
server
to
to
run
run
the
the
application.
application
But
but
at
at
the
the
same
same
time,
time
it'll
it'll
be
be
much
much
more
more
well
well
suited
suited
for
for
handling
handling
dynamic
dynamic
data.
data
To
to
me,
me
it
it
looks
looks
like
like
Remix
remix
would
would
be
be
ideal
ideal
for
for
an
an
application
application
that
that
has
has
a
a
lot
lot
of
of
pages,
pages
and
and
all
all
those
those
pages
pages
rely
rely
on
on
some
some
dynamic
dynamic
data
data
that
that
lives
lives
in
in
a
a
database
database
somewhere,
somewhere
but
but
it
it
might
might
be
be
overkill
overkill
if
if
you're
you're
just
just
building
building
a
a
blog
blog
that
that
you
you
post
post
to
to
once
once
a
a
year.
year
Let's
let's
go
go
ahead
ahead
and
and
initialize
initialize
a
a
new
new
project
project
from
from
the
the
landline,
landline
and
and
you'll
you'll
notice
notice
how
how
it
it
does
does
this
this
cool
cool
rainbow
rainbow
animation.
animation
Totally
totally
unnecessary,
unnecessary
but
but
it
it
tricks
tricks
my
my
brain
brain
into
into
thinking
thinking
this
this
framework
framework
must
must
be
be
really
really
good.
good
As
as
we
we
set
set
up
up
the
the
project,
project
notice
notice
how
how
it
it
provides
provides
a
a
bunch
bunch
of
of
different
different
back
back
end
end
servers
servers
that
that
can
can
help
help
streamline
streamline
deployment.
deployment
I'm
i'm
going
going
to
to
choose
choose
Express,
express
then
then
when
when
we
we
open
open
the
the
project,
project
you'll
you'll
notice
notice
that
that
we're
we're
met
met
with
with
a
a
fairly
fairly
simple
simple
file
file
structure.
structure
In
in
the
the
server
server
directory,
directory
we
we
have
have
an
an
Express
express
JS
js
app.
app
The
the
only
only
thing
thing
it
it
requires
requires
from
from
Remix
remix
is
is
the
the
create
create
request
request
handler
handler
function.
function
This
this
function
function
takes
takes
an
an
incoming
incoming
request
request
from
from
user
user
and
and
renders
renders
the
the
React
react
code
code
on
on
the
the
server
server
with
with
Remix,
remix
and
and
then
then
sends
sends
a
a
response
response
back
back
to
to
the
the
user.
user
It's
it's
also
also
worth
worth
noting
noting
that
that
Remix
remix
doesn't
doesn't
necessarily
necessarily
need
need
Node.
node
Js
js
and
and
could
could
work
work
on
on
other
other
run
run
times
times
like
like
Deno.
deno
And
and
you'll
you'll
also
also
notice
notice
the
the
Express
express
app
app
is
is
configured
configured
with
with
caching,
caching
telling
telling
the
the
server
server
to
to
send
send
a
a
cache
cache
response
response
unless
unless
the
the
underlying
underlying
data
data
has
has
changed.
changed
That's
that's
pretty
pretty
cool,
cool
but
but
all
all
the
the
interesting
interesting
stuff
stuff
is
is
going
going
on
on
in
in
the
the
app
app
directory.
directory
Here,
here
we
we
have
have
a
a
routes
routes
directory
directory
and
and
any
any
component
component
inside
inside
of
of
it
it
will
will
be
be
mapped
mapped
to
to
a
a
URL
url
based
based
on
on
the
the
file
file
structure,
structure
which
which
is
is
the
the
exact
exact
same
same
way
way
that
that
it
it
works
works
in
in
Next
next
JS.
js
One
one
minor
minor
difference
difference
is
is
that
that
dynamic
dynamic
routes
routes
start
start
with
with
a
a
dollar
dollar
sign
sign
versus
versus
brackets
brackets
in
in
Next
next
ES.
es
But
but
there
there
is
is
one
one
very
very
important
important
difference
difference
that
that
could
could
be
be
a
a
game
game
changer
changer
for
for
certain
certain
types
types
of
of
apps,
apps
and
and
that's
that's
a
a
feature
feature
called
called
nested
nested
routes.
routes
Whenever
whenever
you
you
have
have
a
a
route
route
nested
nested
under
under
a
a
parent,
parent
the
the
child
child
will
will
automatically
automatically
inherit
inherit
the
the
UI
ui
of
of
the
the
parent.
parent
If
if
you've
you've
ever
ever
used
used
a
a
framework
framework
like
like
Angular
angular
or
or
Ember.
ember
Js,
js
you
you
should
should
to
to
recognize
recognize
this
this
pattern.
pattern
Here's
here's
how
how
it
it
works.
works
You
you
have
have
a
a
parent
parent
component,
component
like
like
in
in
this
this
case,
case
the
the
about
about
page,
page
then
then
somewhere
somewhere
in
in
the
the
UI,
ui
you
you
have
have
a
a
router
router
outlet.
outlet
This
this
outlet
outlet
that
that
will
will
be
be
replaced
replaced
with
with
a
a
child
child
component
component
based
based
on
on
the
the
URL
url
you
you
navigate
navigate
to.
to
In
in
this
this
case,
case
we
we
have
have
an
an
about
about
directory
directory
with
with
an
an
index
index
file
file
inside
inside
of
of
That
that
component
component
will
will
be
be
rendered
rendered
in
in
the
the
outlet
outlet
when
when
we
we
go
go
to
to
the
the
about
about
URL.
url
But
but
if
if
we
we
add
add
another
another
component
component
here,
here
like,
like
woah,
woah
dude,
dude
it
it
will
will
be
be
rendered
rendered
to
to
that
that
same
same
outlet
outlet
when
when
we
we
navigate
navigate
to
to
the
the
woah
woah
URL.
url
That
that
means
means
when
when
you
you
define
define
a
a
child
child
route,
route
you
you
only
only
need
need
to
to
think
think
about
about
one
one
small
small
part
part
of
of
the
the
UI
ui
as
as
opposed
opposed
to
to
building
building
an
an
entirely
entirely
new
new
page.
page
Now,
now
that
that
could
could
be
be
really
really
cool
cool
for
for
certain
certain
types
types
of
of
applications,
applications
especially
especially
something
something
with
with
a
a
complex
complex
dashboard,
dashboard
because
because
you
you
can
can
also
also
create
create
your
your
own
own
custom
custom
error
error
boundaries,
boundaries
which
which
means
means
that
that
if
if
a
a
child
child
component
component
fails,
fails
it
it
will
will
render
render
an
an
error
error
message
message
there
there
and
and
not
not
nuke
nuke
the
the
entire
entire
page.
page
But
but
in
in
other
other
cases,
cases
you
you
may
may
not
not
want
want
your
your
child
child
to
to
inherit
inherit
the
the
parent's
parent's
UI.
ui
In
in
which
which
case,
case
you
you
can
can
opt
opt
out
out
by
by
moving
moving
your
your
file
file
somewhere
somewhere
else
else
and
and
creating
creating
a
a
file
file
path
path
with
with
periods
periods
in
in
between
between
the
the
segments.
segments
Now
now
that
that
we
we
know
know
how
how
the
the
basic
basic
routing
routing
system
system
works,
works
Let's
let's
talk
talk
about
about
data
data
fetching.
fetching
In
in
any
any
given
given
route,
route
you
you
export
export
a
a
React
react
component
component
for
for
your
your
front
front
end
end
UI,
ui
but
but
you
you
can
can
also
also
export
export
a
a
function
function
called
called
loader,
loader
to
to
fetch
fetch
data
data
on
on
the
the
server
server
for
for
that
that
component.
component
The
the
loader
loader
function
function
will
will
only
only
be
be
executed
executed
on
on
the
the
server.
server
This
this
is
is
almost
almost
exactly
exactly
how
how
it
it
works
works
in
in
Next
next
JS
js
with
with
get
get
server
server
side
side
props.
props
The
the
main
main
difference
difference
though,
though
is
is
that
that
instead
instead
of
of
passing
passing
props
props
to
to
the
the
component,
component
Remix
remix
provides
provides
a
a
hook
hook
called
called
useLoaderData
useloaderdata
to
to
access
access
whatever
whatever
data
data
you
you
fetched
fetched
on
on
the
the
server.
server
It's
it's
also
also
worth
worth
noting
noting
that
that
when
when
it
it
comes
comes
to
to
data
data
fetching,
fetching
everything
everything
is
is
based
based
on
on
the
the
browser
browser
fetch
fetch
API.
api
It
it
actually
actually
polyfills
polyfills
the
the
fetch
fetch
API
api
on
on
a
a
server,
server
so
so
you
you
can
can
access
access
fetch
fetch
inside
inside
of
of
your
your
loader
loader
function
function
just
just
like
like
you
you
were
were
working
working
in
in
the
the
browser.
browser
Reading
reading
data
data
from
from
your
your
server
server
is
is
essential,
essential
but
but
another
another
unique
unique
way
way
that
that
Remix
remix
stands
stands
out
out
is
is
that
that
it
it
also
also
allows
allows
you
you
to
to
write
write
to
to
your
your
server,
server
made
made
possible
possible
with
with
a
a
new
new
old
old
idea
idea
about
about
how
how
to
to
work
work
with
with
HTML
html
forms.
forms
Normally,
normally
when
when
dealing
dealing
with
with
a
a
form
form
in
in
React,
react
you
you
bind
bind
to
to
the
the
on
on
submit
submit
event,
event
and
and
then
then
prevent
prevent
default
default
to
to
write
write
a
a
custom
custom
function
function
to
to
handle
handle
the
the
form
form
submission.
submission
Remix
remix
takes
takes
a
a
more
more
old
old
school
school
approach
approach
by
by
providing
providing
you
you
with
with
a
a
form
form
component
component
that
that
gets
gets
submitted
submitted
like
like
a
a
normal
normal
form.
form
In
in
other
other
words,
words
you
you
don't
don't
need
need
to
to
prevent
prevent
default.
default
What
what
you
you
do
do
instead
instead
is
is
define
define
an
an
action
action
function
function
that
that
will
will
run
run
on
on
your
your
server.
server
This
this
function
function
will
will
have
have
access
access
to
to
the
the
values
values
in
in
the
the
form,
form
which
which
you
you
can
can
then
then
use
use
to
to
update
update
your
your
database.
database
The
the
action
action
function
function
returns
returns
a
a
response,
response
which
which
can
can
then
then
be
be
accessed
accessed
in
in
the
the
front
front
end
end
UI
ui
with
with
a
a
hook,
hook
and
and
that
that
could
could
result
result
in
in
a
a
far
far
more
more
simplified
simplified
round
round
trip
trip
when
when
it
it
comes
comes
to
to
writing
writing
data
data
across
across
the
the
entire
entire
stack.
stack
In
in
addition,
addition
it
it
provides
provides
another
another
hook
hook
called
called
use
use
transition
transition
that
that
allows
allows
you
you
to
to
get
get
the
the
state
state
of
of
the
the
action,
action
which
which
could
could
be
be
used
used
to
to
display
display
a
a
loading
loading
spinner
spinner
while
while
the
the
update
update
is
is
working
working
on
on
the
the
server,
server
or
or
to
to
perform
perform
optimistic
optimistic
updates
updates
to
to
update
update
the
the
UI
ui
before
before
the
the
server
server
is
is
finished
finished
making
making
its
its
updates.
updates
On
on
the
the
surface,
surface
this
this
looks
looks
really
really
cool,
cool
but
but
I'm
i'm
a
a
little
little
skeptical
skeptical
about
about
how
how
well
well
it
it
would
would
scale
scale
complexity.
complexity
I
i
know
know
from
from
experience
experience
how
how
insanely
insanely
complicated
complicated
forms
forms
can
can
get,
get
and
and
I'm
i'm
curious
curious
how
how
this
this
approach
approach
would
would
handle
handle
client
client
side
side
validation,
validation
nested
nested
form
form
fields,
fields
auto
auto
save
save
features,
features
and
and
things
things
like
like
that.
that
Now,
now
taking
taking
a
a
step
step
back
back
to
to
the
the
big
big
picture,
picture
I
i
think
think
the
the
really
really
interesting
interesting
features
features
that
that
Remix
remix
offers
offers
are
are
nested
nested
routing
routing
and
and
actions
actions
for
for
handling
handling
form
form
submission.
submission
There
there
are
are
a
a
lot
lot
of
of
other
other
minor
minor
differences,
differences
like
like
for
for
meta
meta
tags,
tags
you
you
export
export
a
a
function,
function
instead
instead
of
of
using
using
the
the
head
head
component
component
like
like
you
you
would
would
in
in
Next.
next
When
when
it
it
comes
comes
to
to
riling,
riling
Remix
remix
doesn't
doesn't
support
support
CSS
css
modules,
modules
and
and
there
there
are
are
some
some
caveats
caveats
if
if
you're
you're
using
using
a
a
CSS
css
and
and
JS
js
library.
library
However,
however
you
you
can
can
still
still
scope
scope
your
your
styles
styles
to
to
like
like
pages
pages
by
by
placing
placing
them
them
in
in
the
the
app
app
directory.
directory
Overall,
overall
I'd
i'd
say
say
that
that
it
it
does
does
have
have
everything
everything
in
in
place
place
that
that
you
you
would
would
need
need
to
to
build
build
a
a
serious
serious
application.
application
Another
another
question
question
you
you
may
may
have
have
is
is
where
where
do
do
React
react
server
server
components
components
come
come
in.
in
Remember,
remember
server
server
components
components
are
are
still
still
experimental
experimental
in
in
React
react
18.
18
If
if
you
you
watch
watch
my
my
next
next
12
12
video,
video
you'll
you'll
know
know
that
that
server
server
components
components
open
open
in
in
the
the
door
door
to
to
a
a
bunch
bunch
of
of
cool
cool
new
new
features
features
and
and
ways
ways
to
to
simplify
simplify
our
our
code.
code
I'm
i'm
not
not
sure
sure
if
if
Remix
remix
has
has
plans
plans
to
to
use
use
them,
them
but
but
in
in
their
their
loader
loader
functions,
functions
they
they
just
just
return
return
JSON.
json
Run.
run
In
in
theory,
theory
a
a
loader
loader
function
function
could
could
also
also
return
return
a
a
server
server
component,
component
but
but
I'm
i'm
not
not
sure
sure
if
if
it
it
would
would
make
make
much
much
of
of
a
a
difference
difference
at
at
that
that
point,
point
because
because
you
you
can
can
also
also
disable
disable
JavaScript
javascript
on
on
a
a
Remix
remix
component.
component
In
in
other
other
words,
words
they
they
both
both
allow
allow
you
you
to
to
ship
ship
0
0
JavaScript
javascript
to
to
the
the
client.
client
In
in
my
my
opinion,
opinion
I
i
kind
kind
of
of
like
like
how
how
Next.
next
Js
js
is
is
embracing
embracing
the
the
new
new
React
react
18
18
features,
features
but
but
with
with
Remix,
remix
so
so
you
you
have
have
a
a
lot
lot
more
more
framework
framework
specific
specific
abstractions.
abstractions
There's
there's
nothing
nothing
wrong
wrong
with
with
that.
that
Frameworks
frameworks
are
are
supposed
supposed
to
to
create
create
their
their
own
own
abstractions
abstractions
to
to
make
make
your
your
life
life
easier.
easier
But,
but
in
in
general,
general
I
i
think
think
it's
it's
better
better
to
to
embrace
embrace
what's
what's
available
available
in
in
the
the
core
core
framework.
framework
Another
another
good
good
question
question
is
is
how
how
will
will
Remix
remix
separate
separate
you
you
from
from
your
your
money?
money
Initially,
initially
it
it
was
was
offered
offered
as
as
a
a
paid
paid
framework,
framework
which
which
is
is
a
a
very
very
unusual
unusual
business
business
model.
model
It's
it's
hard
hard
to
to
justify
justify
paying
paying
for
for
a
a
JavaScript
javascript
framework
framework
when
when
there
there
are
are
plenty
plenty
of
of
battle
battle
tested
tested
solutions
solutions
out
out
there.
there
I'm
i'm
not
not
sure
sure
what
what
their
their
plans
plans
are,
are
I'm
i'm
only
only
speculating
speculating
here,
here
but
but
I'm
i'm
guessing
guessing
they'll
they'll
offer
offer
a
a
paid
paid
hosting
hosting
service
service
following
following
a
a
model
model
similar
similar
to
to
Vercel
vercel
or
or
Netlify.
netlify
You
you
pay
pay
them,
them
they
they
pay
pay
AWS
aws
for
for
infrastructure
infrastructure
until
until
they
they
can
can
get
get
enough
enough
customers
customers
to
to
be
be
acquired.
acquired
It's
it's
a
a
lot
lot
easier
easier
to
to
lose
lose
money
money
and
and
get
get
acquired,
acquired
versus
versus
trying
trying
to
to
sell
sell
a
a
JavaScript
javascript
framework.
framework
To
to
summarize,
summarize
I
i
think
think
Remix
remix
definitely
definitely
looks
looks
like
like
an
an
awesome
awesome
option
option
for
for
building
building
full
full
stack
stack
React
react
apps.
apps
The
the
only
only
thing
thing
more
more
impressive
impressive
than
than
the
the
framework
framework
itself
itself
is
is
their
their
marketing
marketing
game.
game
The
the
Remix
remix
landing
landing
page
page
is
is
one
one
hell
hell
of
of
a
a
sales
sales
pitch,
pitch
but
but
that's
that's
what
what
you
you
need
need
to
to
stand
stand
out
out
in
in
the
the
ruthless
ruthless
world
world
of
of
JavaScript
javascript
frameworks.
frameworks
Personally,
personally
I'm
i'm
still
still
a
a
lot
lot
more
more
excited
excited
about
about
Next
next
12,
12
and
and
that's
that's
likely
likely
the
the
option
option
I'll
i'll
go
go
with
with
when
when
building
building
the
the
next
next
version
version
of
of
the
the
Fireship
fireship
IO
io
website.
website
But
but
it's
it's
good
good
to
to
see
see
a
a
competitor
competitor
to
to
Next.
next
Js
js
because
because
it's
it's
kind
kind
of
of
been
been
dominating
dominating
the
the
space
space
for
for
a
a
while.
while
Competition
competition
is
is
always
always
a
a
win
win
for
for
independent
independent
developers.
developers
There's
there's
also
also
a
a
of
of
other
other
exciting
exciting
things
things
going
going
on
on
in
in
the
the
space.
space
Like,
like
Rich
rich
Harris,
harris
the
the
creator
creator
of
of
Svelte,
svelte
recently
recently
joined
joined
Vercel
vercel
to
to
work
work
on
on
Svelte
svelte
full
full
time.
time
And,
and
I
i
can
can
pretty
pretty
much
much
guarantee
guarantee
you,
you
that
that
in
in
SvelteKit
sveltekit
is
is
going
going
to
to
be
be
absolutely
absolutely
awesome
awesome
in
in
the
the
future.
future
Then,
then
you
you
also
also
have
have
Nuxt
nuxt
3
3
for
for
Vue,
vue
which
which
also
also
looks
looks
incredible,
incredible
and
and
then
then
you
you
have
have
frameworks
frameworks
like
like
Blits
blits
that
that
build
build
on
on
top
top
of
of
Next.
next
Js
js
that
that
provide
provide
additional
additional
tools
tools
for
for
building
building
database
database
backed
backed
applications.
applications
The
the
bottom
bottom
line
line
is
is
that
that
there's
there's
a
a
ton
ton
of
of
stuff
stuff
going
going
on
on
in
in
the
the
server
server
side
side
rendering
rendering
space
space
right
right
now,
now
and
and
Remix
remix
is
is
definitely
definitely
an
an
option
option
worth
worth
checking
checking
out.
out
But,
but
I'm
i'm
curious
curious
to
to
know
know
what
what
you
you
think,
think
so
so
let
let
me
me
know
know
in
in
the
the
comments.
comments
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speakers discuss the use of a new JavaScript framework called Remix for better performance and search engine optimization, as well as building dynamic routes and creating a new project. They also touch on the process of creating a React app using the Express JS app, including the creation request handler function and the use of a cache response. Remix's approach to data fetching and the use of a new old method for writing to the server are discussed, along with the use of a different method for writing to the front end UI and functions. The speakers emphasize the importance of writing to the server and the use of a new old idea for writing to the front end UI. They also mention other developers in the server side and offer to recommend them.
Remix is a NEW JavaScript framework you MUST try
They say, every day, a new JavaScript framework is born, and this day in history is no exception. Yesterday, the team behind React Router released their new framework, Remix, as a free and open source project. To be fair, this framework has actually been around for over a year, but you probably didn't use it because they were charging $250 for a license to use it. And that's actually now a very low price. Fortunately for us cheap developers, they changed their business model. It's now free and open source with an MIT In today's video, you'll get to feel the experience of a premium JavaScript framework. We'll compare it to other React based frameworks like Next. Js s in Gatsby. And most importantly, try to figure out when and why you would want to use Remix. If you're new here, like and subscribe, and stay tuned for a special surprise video this Friday with a new course announcement and discount. First of all, what is Remix, and why would I wanna use it? It's a React based framework that allows you to render code on the server, which tends to result in better performance and search engine optimization, as opposed to using React only on the client side. This is nothing new, and a problem that's already been solved by frameworks like Next. Js. However, Remix goes about it in a slightly different way that I think you'll find very interesting. It actually feels kind of old school in a way that might feel familiar to a HP or Ruby on Rails developer. The first interesting point is that it only does server side rendering. It doesn't do static site generation or incremental static regeneration like Next. Js does. That's kind of interesting because jamstack applications that use static generation have been very popular in recent years, and also tend to be the fastest time to first bite when it comes to performance. And they're really easy to deploy because you're only dealing with static files. The main drawback though is that you have to rebuild those pages whenever the data changes. With Remix, you're not building jamstack applications. It goes all in on server rendering, which means that you'll have to have an actual server to run the application. But at the same time, it'll be much more well suited for handling dynamic data. To me, it looks like Remix would be ideal for an application that has a lot of pages, and all those pages rely on some dynamic data that lives in a database somewhere, but it might be overkill if you're just building a blog that you post to once a year. Let's go ahead and initialize a new project from the landline, and you'll notice how it does this cool rainbow animation. Totally unnecessary, but it tricks my brain into thinking this framework must be really good. As we set up the project, notice how it provides a bunch of different back end servers that can help streamline deployment. I'm going to choose Express, then when we open the project, you'll notice that we're met with a fairly simple file structure. In the server directory, we have an Express JS app. The only thing it requires from Remix is the create request handler function. This function takes an incoming request from user and renders the React code on the server with Remix, and then sends a response back to the user. It's also worth noting that Remix doesn't necessarily need Node. Js and could work on other run times like Deno. And you'll also notice the Express app is configured with caching, telling the server to send a cache response unless the underlying data has changed. That's pretty cool, but all the interesting stuff is going on in the app directory. Here, we have a routes directory and any component inside of it will be mapped to a URL based on the file structure, which is the exact same way that it works in Next JS. One minor difference is that dynamic routes start with a dollar sign versus brackets in Next ES. But there is one very important difference that could be a game changer for certain types of apps, and that's a feature called nested routes. Whenever you have a route nested under a parent, the child will automatically inherit the UI of the parent. If you've ever used a framework like Angular or Ember. Js, you should to recognize this pattern. Here's how it works. You have a parent component, like in this case, the about page, then somewhere in the UI, you have a router outlet. This outlet that will be replaced with a child component based on the URL you navigate to. In this case, we have an about directory with an index file inside of That component will be rendered in the outlet when we go to the about URL. But if we add another component here, like, woah, dude, it will be rendered to that same outlet when we navigate to the woah URL. That means when you define a child route, you only need to think about one small part of the UI as opposed to building an entirely new page. Now, that could be really cool for certain types of applications, especially something with a complex dashboard, because you can also create your own custom error boundaries, which means that if a child component fails, it will render an error message there and not nuke the entire page. But in other cases, you may not want your child to inherit the parent's UI. In which case, you can opt out by moving your file somewhere else and creating a file path with periods in between the segments. Now that we know how the basic routing system works, Let's talk about data fetching. In any given route, you export a React component for your front end UI, but you can also export a function called loader, to fetch data on the server for that component. The loader function will only be executed on the server. This is almost exactly how it works in Next JS with get server side props. The main difference though, is that instead of passing props to the component, Remix provides a hook called useLoaderData to access whatever data you fetched on the server. It's also worth noting that when it comes to data fetching, everything is based on the browser fetch API. It actually polyfills the fetch API on a server, so you can access fetch inside of your loader function just like you were working in the browser. Reading data from your server is essential, but another unique way that Remix stands out is that it also allows you to write to your server, made possible with a new old idea about how to work with HTML forms. Normally, when dealing with a form in React, you bind to the on submit event, and then prevent default to write a custom function to handle the form submission. Remix takes a more old school approach by providing you with a form component that gets submitted like a normal form. In other words, you don't need to prevent default. What you do instead is define an action function that will run on your server. This function will have access to the values in the form, which you can then use to update your database. The action function returns a response, which can then be accessed in the front end UI with a hook, and that could result in a far more simplified round trip when it comes to writing data across the entire stack. In addition, it provides another hook called use transition that allows you to get the state of the action, which could be used to display a loading spinner while the update is working on the server, or to perform optimistic updates to update the UI before the server is finished making its updates. On the surface, this looks really cool, but I'm a little skeptical about how well it would scale complexity. I know from experience how insanely complicated forms can get, and I'm curious how this approach would handle client side validation, nested form fields, auto save features, and things like that. Now, taking a step back to the big picture, I think the really interesting features that Remix offers are nested routing and actions for handling form submission. There are a lot of other minor differences, like for meta tags, you export a function, instead of using the head component like you would in Next. When it comes to riling, Remix doesn't support CSS modules, and there are some caveats if you're using a CSS and JS library. However, you can still scope your styles to like pages by placing them in the app directory. Overall, I'd say that it does have everything in place that you would need to build a serious application. Another question you may have is where do React server components come in. Remember, server components are still experimental in React 18. If you watch my next 12 video, you'll know that server components open in the door to a bunch of cool new features and ways to simplify our code. I'm not sure if Remix has plans to use them, but in their loader functions, they just return JSON. Run. In theory, a loader function could also return a server component, but I'm not sure if it would make much of a difference at that point, because you can also disable JavaScript on a Remix component. In other words, they both allow you to ship 0 JavaScript to the client. In my opinion, I kind of like how Next. Js is embracing the new React 18 features, but with Remix, so you have a lot more framework specific abstractions. There's nothing wrong with that. Frameworks are supposed to create their own abstractions to make your life easier. But, in general, I think it's better to embrace what's available in the core framework. Another good question is how will Remix separate you from your money? Initially, it was offered as a paid framework, which is a very unusual business model. It's hard to justify paying for a JavaScript framework when there are plenty of battle tested solutions out there. I'm not sure what their plans are, I'm only speculating here, but I'm guessing they'll offer a paid hosting service following a model similar to Vercel or Netlify. You pay them, they pay AWS for infrastructure until they can get enough customers to be acquired. It's a lot easier to lose money and get acquired, versus trying to sell a JavaScript framework. To summarize, I think Remix definitely looks like an awesome option for building full stack React apps. The only thing more impressive than the framework itself is their marketing game. The Remix landing page is one hell of a sales pitch, but that's what you need to stand out in the ruthless world of JavaScript frameworks. Personally, I'm still a lot more excited about Next 12, and that's likely the option I'll go with when building the next version of the Fireship IO website. But it's good to see a competitor to Next. Js because it's kind of been dominating the space for a while. Competition is always a win for independent developers. There's also a of other exciting things going on in the space. Like, Rich Harris, the creator of Svelte, recently joined Vercel to work on Svelte full time. And, I can pretty much guarantee you, that in SvelteKit is going to be absolutely awesome in the future. Then, you also have Nuxt 3 for Vue, which also looks incredible, and then you have frameworks like Blits that build on top of Next. Js that provide additional tools for building database backed applications. The bottom line is that there's a ton of stuff going on in the server side rendering space right now, and Remix is definitely an option worth checking out. But, I'm curious to know what you think, so let me know in the comments. Thanks for watching, and I will see you in the next one.
The speakers discuss the use of a new JavaScript framework called Remix for better performance and search engine optimization, as well as building dynamic routes and creating a new project. They also touch on the process of creating a React app using the Express JS app, including the creation request handler function and the use of a cache response. Remix's approach to data fetching and the use of a new old method for writing to the server are discussed, along with the use of a different method for writing to the front end UI and functions. The speakers emphasize the importance of writing to the server and the use of a new old idea for writing to the front end UI. They also mention other developers in the server side and offer to recommend them.