Within the developer neighborhood, it is vitally frequent to see new frameworks and instruments seem every single day. A few of them provide a unique strategy to unravel situations which are at the moment being solved with different instruments. Others deliver a brand new idea or concept, proposing a unique option to face the tasks. Because the carpenter has totally different instruments to do totally different duties, the builders have many accessible frameworks and libraries which are a superb match for various use circumstances.
Let’s speak about Remix, the (type of) new framework to create JavaScript tasks utilizing server-side rendering. Let’s undergo its essential options and ideas and see the similarities and variations with one other well-liked JavaScript framework: Subsequent.js.
What’s Remix?
In accordance with its official web site, Remix is an edge-first full stack framework that permits builders to create nice consumer experiences specializing in net requirements. With it, you’ll be able to create your net utility utilizing React and JavaScript for each the client-side rendering and server-side rendering.
As it’s constructed on the Internet Fetch API, functions created with Remix can run wherever. Remix makes use of server-side rendering to control the information and render the HTML content material within the server, sending the much less quantity of JavaScript attainable to the shopper.
Remix was initially a subscription-based premium framework however, lower than a yr in the past, it was launched as an open-source framework. After this, the neighborhood of Remix builders and customers began to develop and get extra well-liked.
Remix Foremost Options
Let’s spotlight a few of the essential options offered by Remix:
Routes:
Like different frameworks, Remix permits builders to handle the totally different routes of their net tasks utilizing JavaScript/TypeScript information that comprise handler capabilities. We’re in a position to generate routes in our web site creating information that observe the file system hierarchy of our tasks, creating analog URLs for our pages. Remix routes work utilizing the partial routing characteristic offered by React-Router. With this strategy in thoughts, we will spotlight the next advantages.
Nested elements:
Remix offers you the opportunity of managing nested pages and elements. We are able to create a file to deal with a sure route and, on the identical degree within the file system, a folder with the identical identify. All of the information that we create inside that folder will likely be nested elements of the mum or dad route, as an alternative of various pages.
Error Dealing with:
Nested elements deliver one other profit: if an error happens whereas rendering a sure part, it doesn’t have an effect on the opposite nested components of the web page. So, we will encapsulate the error simply within the part the place it occurred, as an alternative of getting a common web page error.
Varieties:
As Remix focuses on net requirements, it makes use of native strategies (POST, PUT, DELETE, PATCH) to deal with types as an alternative of utilizing JavaScript for that.
Loaders and Actions:
Remix gives two various kinds of capabilities to create server-side dynamic content material. The loader capabilities are used to deal with GET HTTP requests within the server, primarily used to get information from totally different sources. The motion capabilities monitor POST, PUT, DELETE, and PATCH requests, targeted on information manipulation and modification.
Now, that we talked about a few of the essential options of Remix, let’s examine it with one of the well-liked and most used React frameworks these days: Subsequent.js.
What are the variations between Remix and Subsequent.js?
If we take a fast look, Subsequent.js and Remix might appear to be they re following the identical objective — and, in all probability, they do. But when we analyze the options and approaches they provide, we are going to determine similarities and variations, and we will take into consideration situations being solved in a extra appropriate means with one of many frameworks greater than the opposite.
React Based mostly
Each frameworks had been created on prime of React, however Remix tries to decouple itself from it. We are able to see that Remix gives greater ranges of abstraction. Additionally, totally different Remix neighborhood members have been engaged on totally different implementations utilizing different frameworks, like Vue.js, Angular, and Svelte. Subsequent.js relies on React, and there’s no plan to alter this in the meanwhile.
Server-side Rendering
Apart from the options we talked about above, we will see that each Remix and Subsequent.js provide server-side rendering (SSR) to generate the markup and content material of our pages from the net server earlier than sending it to the shopper.
Whereas in all probability Subsequent.js depends on the client-side hydration strategy, native from React, Remix tries to generate as a lot content material as attainable server-side. That helps to keep away from sending JavaScript code, producing content material, and fetching information from the shopper.
Static Website Era
Alternatively, Subsequent.js presents the opportunity of pre-generating static pages and content material at construct time, utilizing static web site technology (SSG), whereas Remix doesn’t. Relying on the kind of pages we wish to create, this options is one thing that might present nice advantages. With SSG we will fetch information and render pages at construct time, having static pages earlier than the customers go to our web site, with out having to attend for the content material to be generated.
However SSG may additionally change into problematic: every time we apply modifications to the code or the content material of our utility, we have to watch for a construct course of to generate the brand new model of the static belongings. This might change into a ache level, since construct time will enhance if our undertaking will get greater and greater. To deal with this drawback, Vercel staff developed a characteristic referred to as Incremental Static Regeneration (ISR), and the model new On-Demand ISR.
Stale Whereas Revalidate
To serve content material as quick as attainable, Remix depends on the stale-while-revalidate caching directive (SWR). As a substitute of pre-generating static content material, it primes the cache when the app is getting site visitors. The pages and paperwork are served from the cache, whereas they revalidate within the background for the following customer.
Consumer-side Navigation
One of many options utilized by Subsequent.js to supply a easy navigation to the customers is prefetching. We are able to use the <Hyperlink> part to make our web site to pre-load the web page that <hyperlink> redirects to when the component seems within the viewport. If we go to the homepage of an internet site and we see a “Contact” hyperlink on the web page, Subsequent.js will obtain and fetch the content material associated to the contact web page. So, after we click on on the hyperlink, we don’t have to attend for the web page to be downloaded.
However there’s a limitation: Subsequent.js solely presents prefetching for pages that had been pre-built utilizing static web site technology (SSG). If we’ve got hyperlinks to pages which are generated dynamically, the characteristic gained’t be triggered.
Remix doesn’t have this limitation. Because it makes use of the HTML <hyperlink rel=”prefetch”> tag (as an alternative of a cache like Subsequent.js), we will prefetch not solely hyperlinks, however really any web page.
Edge First
After we’re fetching information and rendering content material from the server, we even have to guage how far is the server that executes the code from the customers sending the HTTP requests. If my essential server is positioned in Brazil, and a consumer is visiting my web site from China, the web page load course of will likely be slower than mine, if I go to the identical web page from Argentina. That is associated to the geographical distance the HTTP request has to journey to the nearer server that evaluates it and executes the code.
Regardless that fashionable functions depend on CDNs to ship static content material, the server-side code that’s processed to generate dynamic content material is mostly executed within the information middle, working in a specific location. A workaround to this state of affairs can be utilizing the SWR caching directive, with the caveat of ultimately serving stale content material whereas the CDN refreshes the useful resource.
Having this difficulty in thoughts, within the final years, a brand new idea was originated: Edge computing. The concept is to observe the identical strategy utilized by the CDNs, replicating the server logic in numerous servers and areas, executing the dynamic code as nearer to the consumer as attainable. Whereas Remix is outlined as “Edge First,” which means that the framework was thought to run on the Edge from its conception, Vercel launched the Edge Capabilities as an extra characteristic for the appliance deployed within the platform.
Server-side Code
When describing the principle options of Remix, we stated the framework makes use of native HTTP strategies to handle types with the assistance of motion and loader capabilities. A type, a server, a POST request that transports the shape’s serialized information to the server, a server-side motion, a brand new web page as the results of our request. Again to the net requirements.
Remix gives the <Kind> component, an optimized model of the HTML type. With it and the motion capabilities, we will have the shopper code and the server code associated to our routes altogether in the identical file. Remix will know tips on how to handle the consumer interface of our pages and the server-side habits hooked up to the requests. No context, no state administration.
Subsequent.js, however, depends on JavaScript code to know tips on how to handle the state of the appliance, which APIs name, revalidate information and replace the interface of the net web page. Utilizing API Routes, we will have separate information that execute server-side performance and return information to our frontend.
As we stated, and as you’ll be able to see, Remix has a means of mutating the information that tries to return to the fundamentals, recalling these days when PHP was the massive factor.
Node.js dependency
As we stated earlier than, Remix is predicated on the Internet Fetch API, as an alternative of relying on Node.js. That offers us the opportunity of working Remix functions not solely over Node.js servers (like Vercel or Netlify), but additionally on different kinds of platforms (like Cloudflare Staff or the brand new Deno Deploy).
Conclusion
Remix turned open-source not so way back, nevertheless it already has a really energetic neighborhood collaborating and creating tasks following the net requirements. The framework has a promising future. Let’s see the way it evolves, which options are added, which associated tasks are created to enhance the developer expertise, and which different situations it tries to unravel.
Additional Studying on Smashing Journal
“Remix Routes Demystified,” Átila Fassina
“Dynamic Information-Fetching In An Authenticated Subsequent.js App,” Caleb Olojo
“How To Preserve A Massive Subsequent.js Software,” Nirmalya Ghosh
“Localizing Your Subsequent.js App,” Átila Fassina
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!