建站
咨詢
售后
建站咨詢
新聞中心
前言
然而，隨著 Remix 的開源引入, 開發(fā)人員已經(jīng)開始懷疑哪個框架對他們的應(yīng)用程序來說更加友好，所以，在本文中，我將對比 Next.js 和 Remix 的一些重要特性，來幫助您選擇最佳框架。
公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出鲅魚圈免費做網(wǎng)站回饋大家。
路由系統(tǒng)
當(dāng)談到路由時，Remix 和 Next.js 之間有許多相似之處。例如, 它們都遵循基于文件的約定式路由系統(tǒng)，并支持動態(tài)路由。
相同點
在 Next.js 中, 當(dāng)你在 /pages 文件夾下創(chuàng)建一個文件, 它將自動設(shè)置為路由。
pages/index.js ==> /
pages/users/index.js ==> /users
pages/users/create.js ==> /users/create
Remix 也會自動創(chuàng)建路由. 但是, 你需要在app/routes 文件夾下創(chuàng)建文件。
app/routes/index.js ==> /
app/routes/users/index.js ==> /users
app/routes/users/create.js ==> /users/create
差異性
Remix 路由是基于 react-router 構(gòu)建的, 并且你可以直接使用 React Hooks, 比如 useParams 和 useNavigate。另一方面, Remix 內(nèi)置支持嵌套布局的嵌套路由，而 Nest.js 則不支持。
數(shù)據(jù)加載
web 應(yīng)用程序中有幾種數(shù)據(jù)加載技術(shù)。分別是:
- (SSR)Server-side rending in the runtime 服務(wù)端渲染.
- (SSG) Static Site Generation 靜態(tài)生成 + (ISR) Incremental Static Regeneration 增量靜態(tài)生成 .
- (CSR)Client-side rending at runtime 客戶端渲染.
- 混合服務(wù)端渲染和客戶端渲染和靜態(tài)生成
在 Next.js 中， 開發(fā)人員可以自由的選擇上述所有方法技術(shù)中加載數(shù)據(jù)，比如我的博客[1]就是使用了 SSG 將文章詳情頁打成靜態(tài)資源，新寫的文章就使用了增量靜態(tài)生成，不需要再次打包。
你可以使用getServerSideProps這個方法直接獲取數(shù)據(jù)，并且可以通過 getStaticProps 和 getStaticPath 在構(gòu)建時從服務(wù)器端加載數(shù)據(jù)。以下代碼示例顯示如何使用 getServerSideProps 加載數(shù)據(jù)
export const getServerSideProps = async ({ params, query }) => {
const id = params.id
// 通過 url 上的id 獲取數(shù)據(jù)
// const data= await db.res.query(id)
return {props: {id, Data}}
};
export default function age({id, data}) {
return (
url 上的id 參數(shù): {id}
根據(jù)id 插件結(jié)果是: {data}
);
}在 Remix 中 ，只支持 SSR 和 CSR，只支持這 2 種。
你必須導(dǎo)出一個 loader 在路由頁面，然后使用 useFetcher 這個 Hook 從服務(wù)端渲染中獲取數(shù)據(jù)。
import { useLoaderData } from "remix";
export let loader = async ({ params, request }) => {
const id = params.id
// 通過 url 上的id 獲取數(shù)據(jù)
// const data= await db.res.query(id)
return {id, data}
};
export default function Page() {
let {id, dataLimit} = useLoaderData();
return (
url 上的id 參數(shù): {id}
根據(jù)id 插件結(jié)果是: {data}
);
}Next.js 支持服務(wù)器端渲染 (SSR) 、靜態(tài)站點生成 (SSG) 、增量靜態(tài)生成 (ISR) 和 CSR (客戶端渲染) . 對比，Remix 它僅支持 SSR 和 CSR。
使用 Sessions and cookies
在 Next.js 中沒有直接可以操作 cookie 的內(nèi)置函數(shù)。但是像 Cookie.js 這樣的流行庫可以與 Next.js 或 NextAuth.js 一起使用，比如將用戶身份驗證數(shù)據(jù)保存在 cookie 中。
Remix 支持開箱即用的方法操作 cookie 。您可以通過調(diào)用函數(shù)來生成 cookie，然后序列化或解析數(shù)據(jù)以存儲或讀取它。
以下來自 Remix 的代碼片段顯示了如何在 Remix 中創(chuàng)建用于管理瀏覽器 cookie 的邏輯函數(shù)。
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
});樣式
在樣式方面，Remix 與 Next.js 略有不同。Remix 提供了一種內(nèi)置技術(shù)，可以使用links方法動態(tài)添加樣式，而 Next.js 支持 Styled-JSX 作為 CSS in JS 方案或者使用 css modules，全局樣式只能寫在最外層的 app.js 中
function Home() {
return (
My Cart in Next.js
Some paragraph
)
}
export default HomeRemix 使用一種簡單的方法向頁面添加樣式，使用 標(biāo)簽 。當(dāng)頁面切換到該頁面下自動加載樣式原先頁面下的樣式自動刪除，下面的代碼片段展示了如何使用links函數(shù)以在 Remix 中加載樣式表。
export function links() {
return [{
rel: "stylesheet",
href: "https://test.min.css"
}
];
}通過上述代碼，會自動在頁面中裝載和卸載 link。
表單
Next.js 非內(nèi)置，需要使用 ajax 處理。
Remix 提供了內(nèi)置表單功能 通過代替然后可以在 action 中, 使用 formData.get("\_action") 獲取數(shù)據(jù)
export async function action({ request }) {
let formData = await request.formData();
let action = formData.get("_action");
switch (action) {
case "update": {
// do your update
return updateProjectName(formData.get("name"));
}
case "delete": {
// do your delete
return deleteStuff(formData);
}
default: {
throw new Error("Unexpected action");
}
}
}
export default function Projects() {
let project = useLoaderData();
return (
<>
Update Project
);
}
部署
Next.js 可以在任何服務(wù)器上安裝并且運行 next build && next start，并且它支持了 serverless 模式,Netlify 團(tuán)隊也在寫關(guān)于 serverless 的適配。
Remix 也可以在任何平臺上運行，并與任何系統(tǒng)接口。因此，Remix 是 HTTP 服務(wù)器請求處理程序，允許您使用任何服務(wù)器。當(dāng)您構(gòu)建 Remix 應(yīng)用程序時，系統(tǒng)會詢問您要在哪里部署它，在撰寫本文時，會以下選項:
Remix App Server
Express Server
Netlify
Cloudflare Pages
Vercel
Fly.io
Architect (AWS Lambda)
橫向?qū)Ρ?/h2>
|
Next.js |
Remix |
|
|
SSG 靜態(tài)站點生成 |
內(nèi)置 |
不支持 |
|
SSR 服務(wù)器端渲染 |
內(nèi)置 |
通過 loader |
|
API 路由 |
pages/api/ 目錄下 |
Remix 就是路由，你可以更加靈活去進(jìn)行自定義路由 |
|
Forms 表單 |
非內(nèi)置 |
內(nèi)置，且功能強(qiáng)大 |
|
基于文件系統(tǒng)的路由管理 |
頁面級 |
組件級 |
|
會話管理 |
非內(nèi)置 |
內(nèi)置 Cookie、Sessions |
|
禁用 JS |
未提供充分支持 |
靜態(tài)頁面路由 |
|
樣式 |
提供了全局及組件級樣式支持 TailwindCSS 等 |
路由級 CSS 裝載和卸載 |
|
嵌套布局 |
不支持 |
內(nèi)置 |
|
i18n 國際化 |
內(nèi)置 |
非內(nèi)置 |
|
圖片優(yōu)化 |
通過 next/image 組件 |
通過簡單轉(zhuǎn)換、備選質(zhì)量等方式 |
|
谷歌 AMP |
內(nèi)置 |
非內(nèi)置 |
|
適配器 |
Node.js Request 和 Response 接口 |
Fetch API Request 和 Response 接口 |
|
Preload |
鏈接自動 |
非自動 |
|
異常處理 |
創(chuàng)建 404，500 等頁面 |
使用 ErrorBoundary 組件局部拋錯 |
|
Polyfill |
fetch、Object.assign 和 URL |
fetch |
小結(jié)
適用場景 Next.js
靜態(tài)網(wǎng)站。這是其最大優(yōu)勢，配合 Tailwind css 可以更加靈活地制作出樣式優(yōu)美的頁面及組件，擁有著較為完善的生態(tài)圈。
適合快速上手做項目。
Remix
管理后臺，對于數(shù)據(jù)的加載、嵌套數(shù)據(jù)或者組件的路由、并發(fā)加載優(yōu)化做得很好，并且異常的處理已經(jīng)可以精確到局部級別。
或許是下一代的 Web 開發(fā)框架，需要折騰。
總體而言，Remix 是一個強(qiáng)大的框架，它將在 2022 年變得更加普遍。但是，在處理生產(chǎn)級應(yīng)用程序時，使用 Next.js 將是顯而易見的選擇，因為它已經(jīng)建立并得到社區(qū)的支持。
參考
- 網(wǎng)站的未來：Next.js 與 Remix[2]
- Remix vs. Next.js: A Detailed Comparison[3]
本文主要翻譯上述文章，但是存在不全面的地方，我做了修改和補(bǔ)充。
參考資料
[1]博客: https://maqib.cn/
[2]網(wǎng)站的未來：Next.js 與 Remix: https://segmentfault.com/a/1190000041050654
[3]Remix vs. Next.js: A Detailed Comparison: https://blog.bitsrc.io/remix-vs-next-js-a-detailed-comparison-6ff557f7b41f
網(wǎng)站欄目：Remix對比Next.js：一文深度解析
網(wǎng)站路徑：http://www.dlmjj.cn/article/djdiesp.html
