Remix

What is Remix?

Remix is React framework used for server-side rendering (SSR). This means that both the backend and the front end can be made using a single Remix app. Data is rendered on the server and served to the client side with minimum JavaScript (or even no-js).

Sounds like a Next.js to me

It definitely does! Remix and Next.js are tools that aim to resolve pretty much the same problem - build a full stack application using react and having SSR with no hassle. Even tho they look pretty much the same on the top level they have a lot of differences in terms of development. For example, it handles routing in different ways or supports traditional forms and many other things.

How it handles Data

As I said before, the remix is SSR oriented and it uses functions like loader and useFetcher to fetch data. It looks something like this:

import { useLoaderData } from "remix";

export let loader = async ({ params }) => {
   const {id} = params
   const res = await fetch(
    `https://anyapi.com/products/${id}`
  );
  const data = await res.json();
   return {id,data}
};

export default function Home() {
  let {id, data} = useLoaderData();
  return (
    <div>
      <span>The params is: {id}</span>
      <span>The data is: {data}</span>
    </div>
  );
}

Credit: https://techblog.geekyants.com/remix-vs-nextjs

What about styles?

This was one of the first questions that came to my mind, I know that next.js supports css-in-js and css modules. Remix doesn't support these features. It has something like LinksFunction that helps to load css files for a specific component and as I understand it helps to avoid conflicts with other CSS linked to other files. It looks something like this:

import type { LinksFunction } from "remix";
import stylesUrl from "../styles/index.css";

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: stylesUrl }];
};

export default function IndexRoute() {
  return <div>Hello Index Route</div>;
}

Credit: https://techblog.geekyants.com/remix-vs-nextjs

Personally, I am a big fan of tailwind and would be pro using it for styling and avoid writing vanilla css. As far as I see it has a remix support and installation guide for it: https://tailwindcss.com/docs/guides/remix

Any cool features?

Yes sir, remix has many nice features that I wasn't thinking about but which might save much time.

Data Writes

Data writes (some people call these mutations) in Remix are built on top of two fundamental web APIs: <form> and HTTP. We then use progressive enhancement to enable optimistic UI, loading indicators, and validation feedback--but the programming model is still built on HTML forms.

Credit: https://remix.run/docs/en/v1/guides/data-writes#data-writes

To me, it's like good old PHP forms, looks interesting to me

Transitions

Remix has some cool feature for checking transition state, which gonna definitely help to avoid writing hundreds setLoading(true) everywhere and dealing with handling transition state. It looks something like this in an example of submission button:

function SubmitButton() {
  const transition = useTransition();

  const text =
    transition.state === "submitting"
      ? "Saving..."
      : transition.state === "loading"
      ? "Saved!"
      : "Go";

  return <button type="submit">{text}</button>;
}

One other thing

I highly recommend watching a fireship video about the remix, it is 9 minutes long and it provides a really good idea of what remix is: https://www.youtube.com/watch?v=r4B69HAOXnA