Newly open-sourced React framework
Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience.
Nowadays, it seems like there’s a React framework being introduced every day. And while every React framework has something special to offer, Remix stands out. Though it isn’t new, it recently became open source after initially being available on a paid subscription basis.
In this article, we will discuss some cool things about Remix, then move on to create an SSR weather app using this new framework.
Benefits of using Remix
Remix, just like other frameworks, has some special built-in features that make it convenient for developers. Here are some of my favorites:
Any page inside a route folder is nested in the route instead of being separate. This means you can embed these components into your parent page, which also means less loading time.
Another advantage of doing this is that we can enforce error boundaries to these embedded pages, which will help with error handling.
Suppose you get an error in a Remix component or a nested route; the errors are limited to the component and the component will fail to render, or it will simply show an error. In other frameworks, it will break the entire page, and you will see a huge error screen.
While error boundaries can be implemented in Next.js as well, Remix has this built in, and I think it’s a cool feature for production builds so that the user doesn’t get locked out of the entire page for a simple error.
Remix automatically handles all loading states for you; all you have to do is tell Remix what to show when the app is loading. In other frameworks like Next.js, you need to set the loading state using some state management library like Redux or Recoil. While there are libraries that can help you do the exact same thing in other frameworks, Remix has this built in.
Now we are going back to when developers used PHP. We used to specify a form method and action with a valid PHP URL; we use a similar approach in Remix.
Drawbacks of using Remix
- Routing system might be confusing
- Smaller community
What makes Remix different from Next.js?
Remix and Next.js because both of them support SSR. However, while Next.js supports SSG and other awesome tools, Remix only focuses on SSR.
If you want to follow this tutorial locally on your own computer, it is important for you to have these things installed:
Creating a Remix app
Navigate to a safe directory and use the following command in the terminal to initialize the installation of our Remix app:
Of course, you can replace app-name with whatever project name is suitable for you. Once you hit Enter, you will see an interactive menu that will help you make a Remix app.
Let’s talk briefly about a few of these files:
- app/ – This is where all your Remix app code goes
- app/root.tsx – This is where we put the root component for our application. You render the <html> element here.
- app/routes/ – This is where all your “route modules” will go. Remix uses the files in this directory to create the URL routes for your app based on the name of the files.
- public/ – This is where your static assets go (images/fonts/etc)
- remix.config.js – Remix has a handful of configuration options you can set in this file.
Go ahead and run the build:
npm run build
That should output something like this:
Building Remix app in production mode…
Built in 132ms
Now you should also have a
- .cache/ directory (something used internally by Remix)
- build/ directory, and a
- public/build directory.
The build/ directory is our server-side code. The public/build/ holds all our client-side code. These three directories are listed in your .gitignore file so you don’t commit the generated files to source control.
Let’s run the built app now:
This will start the server and output this:
Remix App Server started at http://localhost:3000