logo

Remix vs Next.js:Podrobné srovnání

Podrobné srovnání mezi frameworky Remix JS a Next.js

Next.js je jedním z nejpopulárnějších frameworků React používaných pro vykreslování na straně serveru. Existuje již dlouhou dobu a poskytuje výjimečný vývojářský zážitek se všemi funkcemi, které vývojáři potřebují.

S uvedením Remixu s otevřeným zdrojovým kódem se však vývojáři začali ptát, který rámec pro jejich aplikaci je lepší. V tomto článku tedy porovnám a porovnám některé významné funkce Next.js s funkcemi Remix, abych vám pomohl vybrat ten nejlepší framework.

Jak nahrát soubory do aws s3 pomocí nodejs lambda a api gateway 2022

Nasaďte aplikaci React pomocí AWS Amplify v roce 2022

  1. Směrování

Pokud jde o směrování, existuje mnoho podobností mezi Remix a Next.js. Například sledují směrovací systém založený na souborech a podporují vnořené směrování a dynamické segmenty směrování.

Pokud jde o podobnosti, když vytvoříte soubor v adresáři /pages, bude automaticky nastaven jako trasa v Next.js. 

pages/index.js ==> /
pages/users/index.js ==> /users
pages/users/create.js ==> /users/create

Remix také může vytvářet automatické trasy. Musíte však umístit soubory do adresáře app/routes.

Pokud jde o rozdíly, směrování Remix je postaveno na React Routeru a umožňuje vám využívat React Hooks, jako useParams a useNavigate. Na druhou stranu má Remix vestavěnou podporu pro vnořené směrování s vnořenými rozvrženími, zatímco Nest.js vyžaduje ruční konfigurace.

  1. Načítání dat

Ve webových aplikacích existuje několik technik načítání dat. Jsou to:

  • Vykreslování na straně serveru za běhu.
  • Vykreslování na straně serveru v době sestavení.
  • Vykreslování na straně klienta za běhu.
  • Kombinace běhového prostředí na straně serveru, času sestavení na straně klienta a serveru a běhového prostředí na straně klienta.

V Next.js mohou vývojáři použít všechny výše uvedené techniky s různými funkcemi k exportu dat ze stránky.

Můžete použít getServerSideProps k načtení dat na straně serveru za běhu, zatímco getStaticProps a getStaticPath lze použít k načtení dat ze strany serveru v době sestavení. Následující příklad ukazuje, jak použít getServerSideProps k načtení dat. 

export const getServerSideProps = async ({ params, query }) => { 
  // get a param from the url const id = params.id // getting data from the url query string const DataLimit = query.DataLimit
  return {props: {id, DataLimit}}
};
export default function FirstPage() { 

  let {id, DataLimit} = useLoaderData(); 
  return ( 
      <div> 
        <h1>The parameters are: {id}</h1>
        <h1>The DataLimit url query is: {DataLimit}</h1> 
      </div> 
  );
}

V Remixu existují pouze dva způsoby načítání dat. K vykreslení dat můžete použít stranu serveru za běhu a stranu klienta za běhu.

Chcete-li načíst data ze strany serveru, musíte exportovat funkci zavaděče z trasy a načíst data na straně klienta pomocí funkce Fetcher Hook v Remixu. 

import { useLoaderData } from "remix"; 
export let loader = async ({ params, request }) => { 
  // get a param from the page url const id = params.id // getting data from the url query string const url = new URL(request.url) const dataLimit = url.searchParams.get("dataLimit")
  return {id, dataLimit}
}; 
export default function FirstPage() { 
  let {id, dataLimit} = useLoaderData();
  return ( 
        <div> 
          <h1>The parameter is: {id}</h1> 
          <h1>The limit for url query is: {dataLimit}</h1> 
        </div> 
  );
}

Next.js podporuje vykreslování na straně serveru (SSR), generování statického webu (SSG), přírůstkovou regeneraci webu (ISR) a CSR (vykreslování na straně klienta) . Na druhou stranu Remix podporuje pouze SSR a CSR.

  1. Používání relací a souborů cookie

Neexistují žádné vestavěné funkce pro interakci s cookies nebo relacemi v Next.js. Oblíbené knihovny jako Cookie.js však mohou spolupracovat s Next.js nebo NextAuth.js, aby provedly ověření uživatele a uložily data relace do souboru cookie.

Remix má podporu pro soubory cookie a relace ihned po vybalení. Soubor cookie můžete vygenerovat voláním funkce, poté serializovat nebo analyzovat data, abyste je mohli uložit nebo přečíst.

Následující fragment kódu z Remix ukazuje, jak vytvořit logickou funkci pro správu souboru cookie prohlížeče v Remixu. 

import { createCookie } from "remix";

const cookie = createCookie("cookie-name", {
  expires: new Date(Date.now() + 60),
  httpOnly: true,
  maxAge: 60,
  path: "/",
  sameSite: "lax",
  secrets: ["s3cret1"],
  secure: true
});
  1. Nasazení

Next.js lze nainstalovat na jakýkoli server, na kterém lze spustit Node.js spuštěním dalšího sestavení &&next start. Má vestavěnou podporu pro běh v bezserverovém režimu při nasazení na Vercel a tým Netlify napsal adaptér pro nasazení bez serveru. k jejich službám.

Remix byl postaven tak, aby běžel na jakékoli platformě a rozhraní s jakýmkoli systémem. Výsledkem je, že Remix je obslužnou rutinou požadavků uvnitř HTTP serveru, což vám umožňuje využívat jakýkoli server. Když vytvoříte aplikaci Remix, budete dotázáni, kam ji chcete nasadit, a od tohoto psaní máte následující možnosti:

  • Remix App Server
  • Expresní server
  • Netlify
  • Stránky Cloudflare
  • Vercel
  • Fly.io
  • Architekt (AWS Lambda)
  1. Styl

Remix se od Next.js mírně liší, pokud jde o styl. Remix nabízí vestavěnou techniku ​​propojování klasických šablon stylů CSS pomocí značek odkazů, zatímco Next.js přichází s Styled-JSX jako výchozím řešením CSS v JS.

Styled-JSX vám umožňuje stylizovat vaše komponenty pomocí zapouzdřených CSS s rozsahem ve vaší aplikaci Next.js. Můžete použít <style jsx> tag do existující komponenty React a definujte v ní CSS následovně:

function Home() {
return (
<div className="container">
  <h1>My Cart in Next.js</h1><p>Some paragraph</p><style jsx>
    {'
      .container {
        margin: 20px;
      }
      p {
        color: blue;
      }
    `}          
   </style></div>
 )
}               
export default Home

Remix používá jednoduchý způsob přidávání stylů na stránku pomocí <link rel ="stylesheet"> štítek. Když přidáte odkaz na šablonu stylů, můžete použít modul odkazů ve směrování Remix k exportu rozvržení. Fragment kódu níže ukazuje, jak použít funkci odkazů k načtení šablony stylů v Remixu. 

export function links() {
return [{
      rel: "stylesheet",
      href: "https://test.min.css"
   }
  ];
}

Následující příklad ukazuje, jak tag sloučí komponentu odkazů v každé vnořené trase při vykreslování komponenty myCart. 

import { Links } from "remix";
export default function myCart() {
  return (
    <html><head><Links />
        {/* ... */}
      </head>
      {/* ... */}
    </html>
  );
}

Závěr

Remix vylepšuje vývojářskou zkušenost pomocí nových abstrakcí a uživatelských zkušeností tím, že distribuuje méně JavaScriptu. Next.js má ale rozsáhlejší uživatelskou základnu s významnějšími zdroji přidělenými na jeho vývoj od týmu Vercel.

Remix se používá hlavně pro osobní projekty a aplikace hraček, pokud jde o reálné aplikace. Na druhou stranu se Next.js používá v mnoha produkčních aplikacích.

Celkově vzato je Remix robustní rámec a v roce 2022 bude převládat. Ale když se zabýváte aplikacemi na produkční úrovni, použití Next.js by bylo jasnou volbou, protože je dobře zavedeno a má podporu komunity.

Doufáme, že vám to pomohlo. Děkuji za přečtení!

přečtěte si více

21 lekcí, které bych rád znal dříve ve své kariéře softwarového inženýrství

10 způsobů, jak zlepšit logické myšlení v programování