আপনি সম্ভবত ফ্রেমওয়ার্ক ব্লক, রিমিক্সের একটি নতুন বাচ্চাদের চারপাশে প্রচুর হাইপ শুনেছেন। এটি আশ্চর্যজনক হতে পারে যে এটি 2019 সালে আবার শুরু হয়েছিল, তবে এটি মূলত শুধুমাত্র সাবস্ক্রিপশন-ভিত্তিক প্রিমিয়াম ফ্রেমওয়ার্ক হিসাবে উপলব্ধ ছিল। 2021 সালে, প্রতিষ্ঠাতারা বীজ তহবিল সংগ্রহ করেছেন এবং ব্যবহারকারীদের বিনামূল্যে রিমিক্স ব্যবহার শুরু করার জন্য ফ্রেমওয়ার্ক ওপেন সোর্স করেছেন। ফ্লাডগেট খুলেছে এবং সবাই মনে হচ্ছে এটা নিয়ে কথা বলছে, ভালো বা খারাপ। এর মধ্যে ডুব এবং Remix এর মৌলিক কিছু তাকান.
রিমিক্স হল একটি সার্ভার “এজ” প্রথম জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। এটি প্রতিক্রিয়া ব্যবহার করে, অন্তত এখনকার জন্য, সামনের প্রান্তের জন্য এবং সার্ভার-সাইড রেন্ডারিং অ্যাপ্লিকেশনটিকে অগ্রাধিকার দেয়৷ প্রান্তে. প্ল্যাটফর্মগুলি সার্ভার-সাইড কোড নিতে পারে এবং এটি চালাতে পারে সার্ভারহীন বা প্রান্ত ফাংশন এটিকে একটি ঐতিহ্যবাহী সার্ভারের চেয়ে সস্তা করে এবং এটিকে আপনার ব্যবহারকারীদের কাছে রাখা। রিমিক্স প্রতিষ্ঠাতারা এটিকে একটি "সেন্টার স্ট্যাক" ফ্রেমওয়ার্ক বলতে পছন্দ করেন কারণ এটি যে প্ল্যাটফর্মে এটি চালানো হচ্ছে তার জন্য সার্ভার এবং ক্লায়েন্টের মধ্যে করা অনুরোধ এবং প্রতিক্রিয়াগুলিকে অভিযোজিত করে৷
রিমিক্স স্থাপন করা হচ্ছে
যেহেতু রিমিক্সের জন্য একটি সার্ভার প্রয়োজন, আসুন আপনি কীভাবে এটি স্থাপন করতে পারেন সে সম্পর্কে কথা বলি। রিমিক্স নিজেই সার্ভার প্রদান করে না - আপনি সার্ভারটি আনেন - এটি যে কোনোটিতে চালানোর অনুমতি দেয় node.js or Deno পরিবেশ, সহ নেটলিফাই এজ এবং DigitalOcean এর অ্যাপ প্ল্যাটফর্ম. রিমিক্স নিজেই একটি সংকলনকারী, একটি প্রোগ্রাম যা এটি চলমান প্ল্যাটফর্মের জন্য অনুরোধগুলি অনুবাদ করে৷ এই প্রক্রিয়া ব্যবহার করে তৈরি করা সার্ভারে অনুরোধের জন্য হ্যান্ডলার তৈরি করতে। এটি যে এইচটিটিপি হ্যান্ডলারগুলি ব্যবহার করে তাতে নির্মিত হয়৷ ওয়েব ফেচ API এবং দ্বারা সার্ভারে চালানো হয় অভিযোজিত প্ল্যাটফর্মের জন্য তাদের মোতায়েন করা হবে।
রিমিক্স স্ট্যাক
রিমিক্স স্ট্যাকগুলি এমন কিছু প্রকল্প যা আপনার জন্য আগে থেকে কনফিগার করা কিছু সাধারণ সরঞ্জাম রয়েছে৷ সেখানে তিনটি অফিসিয়াল স্ট্যাক যেগুলি রিমিক্স টিম দ্বারা রক্ষণাবেক্ষণ করা হয় এবং সেগুলি সমস্ত সঙ্গীতের ঘরানার নামে নামকরণ করা হয়। এছাড়াও কমিউনিটি রিমিক্স স্ট্যাক সহ একটি সংখ্যা আছে কে-পপ স্ট্যাক Netlify এ টেমপ্লেট টিম দ্বারা তৈরি করা হয়েছে। এই স্ট্যাক একটি পাওয়ার হাউস এবং একটি অন্তর্ভুক্ত সুপাবেস ডাটাবেস এবং প্রমাণীকরণ, Tailwind স্টাইলিং জন্য, সরলবর্গীয় চিরহরিৎ বৃক্ষবিশেষ শেষ থেকে শেষ পরীক্ষা, prettier কোড বিন্যাস, ইএসলিন্ট linting, এবং টাইপরাইটারে মুদ্রি স্ট্যাটিক টাইপিং। কে-পপ স্ট্যাক স্থাপনের বিষয়ে তারা ম্যানিসিকের পোস্টটি দেখুন।
ক্যাশিং রুট
যদিও রিমিক্সের জন্য একটি সার্ভার প্রয়োজন, এটি এখনও সুবিধা নিতে পারে জামস্ট্যাক ক্যাশিং রুট দ্বারা সুবিধা। একটি স্ট্যাটিক সাইট বা স্ট্যাটিক সাইট জেনারেশন (SSG) হল যখন আপনার সমস্ত সামগ্রী বিল্ড টাইমে রেন্ডার করা হয় এবং থাকে স্থির আরেকটি পুনর্নির্মাণ না হওয়া পর্যন্ত। বিষয়বস্তু পূর্ব-উত্পাদিত এবং একটি CDN এ রাখা যেতে পারে। এটি শেষ ব্যবহারকারীর জন্য অনেক সুবিধা এবং দ্রুত সাইট লোড প্রদান করে। যাইহোক, রিমিক্স নেক্সট.জেএস এবং গ্যাটসবি সহ অন্যান্য জনপ্রিয় রিঅ্যাক্ট ফ্রেমওয়ার্কের মতো সাধারণ SSG করে না। SSG এর কিছু সুবিধা পেতে, আপনি দেশীয় ব্যবহার করতে পারেন ক্যাশে-কন্ট্রোল HTTP হেডার একটি রিমিক্সে হেডার ফাংশন একটি নির্দিষ্ট রুট ক্যাশে বা সরাসরি root.tsx ফাইল.
[[headers]]
for = "/build/*"
[headers.values]
"Cache-Control" = "public, max-age=31536000, s-maxage=31536000"তারপর আপনার যোগ করুন হেডার ফাংশন যেখানে আপনি এটি চান। এটি এক ঘন্টার জন্য ক্যাশে:
export function headers() {
return {
"Cache-Control": "public, s-maxage=360",
};
};রিমিক্সিং রাউটিং
অনেক ফ্রেমওয়ার্ক ফাইল সিস্টেমের উপর ভিত্তি করে রাউটিং এর দিকে ঝুঁকেছে। এটি একটি কৌশল যেখানে একটি মনোনীত ফোল্ডার আপনার অ্যাপ্লিকেশনের জন্য রুট সংজ্ঞায়িত করতে ব্যবহৃত হয়। তাদের সাধারণত গতিশীল রুট এবং শেষ পয়েন্ট ঘোষণা করার জন্য বিশেষ সিনট্যাক্স থাকে। রিমিক্স এবং অন্যান্য জনপ্রিয় ফ্রেমওয়ার্কের মধ্যে বর্তমানে সবচেয়ে বড় পার্থক্য হল ব্যবহার করার ক্ষমতা নেস্টেড রাউটিং.
প্রতিটি রিমিক্স অ্যাপ দিয়ে শুরু হয় root.tsx ফাইল এখানেই অ্যাপটির সম্পূর্ণ ভিত্তি রেন্ডার করা হয়। আপনি এখানে কিছু সাধারণ এইচটিএমএল লেআউট পাবেন <html> ট্যাগ, <head> ট্যাগ, এবং তারপর <body> অ্যাপ রেন্ডার করার জন্য প্রয়োজনীয় উপাদানগুলির সাথে ট্যাগ করুন। এখানে উল্লেখ করা এক জিনিস হল <Scripts> কম্পোনেন্ট হল যা সাইটে জাভাস্ক্রিপ্ট সক্রিয় করে; কিছু জিনিস এটি ছাড়া কাজ করবে, কিন্তু সবকিছু নয়। দ্য root.tsx ফাইলের ভিতরের সবকিছুর জন্য একটি প্যারেন্ট লেআউট হিসাবে কাজ করে routes ডিরেক্টরি, রুটের সবকিছু যেখানে রেন্ডার করা হয় <Outlet/> উপাদান আছে root.tsx. এটি রিমিক্সে নেস্টেড রাউটিং এর ভিত্তি।
নেস্টেড রাউটিং
রিমিক্স থেকে দলের কিছু দ্বারা প্রতিষ্ঠিত না শুধুমাত্র প্রতিক্রিয়া রাউটার, এটাও ব্যবহারসমূহ প্রতিক্রিয়া রাউটার. আসলে, তারা রিঅ্যাক্ট রাউটারে রিমিক্স সম্পর্কে কিছু ভাল জিনিস ফিরিয়ে আনা. একটি জটিল সমস্যা যা Next.js এবং SvelteKit-এর রক্ষণাবেক্ষণকারীরা এই মুহূর্তে সমাধান করার চেষ্টা করছে তা হল নেস্টেড রাউটিং।
নেস্টেড রাউটিং প্রথাগত রাউটিং থেকে ভিন্ন। যেখানে একটি নতুন রুট একজন ব্যবহারকারীকে একটি নতুন পৃষ্ঠায় নিয়ে যাবে, প্রতিটি নেস্টেড রুট একই পৃষ্ঠার একটি পৃথক বিভাগ। এটি শুধুমাত্র প্রয়োজনীয় ফাইলগুলির সাথে ব্যবসায়িক যুক্তি যুক্ত রেখে উদ্বেগগুলিকে আলাদা করার অনুমতি দেয়৷ রিমিক্স নেস্টেড রুটটিতে থাকা পৃষ্ঠার শুধুমাত্র অংশে স্থানীয় করা ত্রুটিগুলি পরিচালনা করতে সক্ষম। পৃষ্ঠার অন্যান্য রুটগুলি এখনও ব্যবহারযোগ্য এবং যে রুটটি ভেঙেছে তা সম্পূর্ণ পৃষ্ঠা ক্র্যাশ না করেই ত্রুটিটির প্রাসঙ্গিক প্রসঙ্গ প্রদান করতে পারে৷
একটি রুট ফাইল ইন করলে রিমিক্স এটি করে app/routes বেস ফাইলের ভিতরে লোড করা ফাইলগুলির একটি ডিরেক্টরি হিসাবে একই নামকরণ করা হয়। রুট ফাইল a হয়ে যায় বিন্যাস একটি ব্যবহার করে ডিরেক্টরির ফাইলগুলির জন্য <Outlet /> অন্যান্য রুটগুলি কোথায় লোড করতে হবে তা রিমিক্সকে জানাতে উপাদান।
আউটলেট উপাদান
সার্জারির <Outlet /> কম্পোনেন্ট হল রিমিক্সের একটি সংকেত যেখানে এটি নেস্টেড রুটের জন্য কন্টেন্ট রেন্ডার করবে। এটি ফাইলের রুটে রাখা হয়েছে app/routes নেস্টেড রুটের মতো একই নামের ডিরেক্টরি। নিম্নলিখিত কোড একটি যায় app/routes/about.tsx ফাইল এবং ভিতরে ফাইলগুলির জন্য আউটলেট অন্তর্ভুক্ত করে app/routes/about ফোল্ডার:
import { Outlet } from "@remix-run/react";
export default function About() {
return (
<>
<section>
I am the parent layout. I will be on any page inside of my named directory.
</section>
{ /* All of my children, the files in the named directory, will go here. */ }
<Outlet />
</>
)
}ফোল্ডার গঠন
কোন ফাইল app/routes/ ডিরেক্টরি তার নামের URL এ একটি রুট হয়ে যায়। একটি ডিরেক্টরি একটি সঙ্গে যোগ করা যেতে পারে index.tsx ফাইল.
app/
├── routes/
│ │
│ └── blog
| | ├── index.tsx ## The /blog route
│ └── about.tsx ## The /about route
│ ├── index.tsx ## The / or home route
└── root.tsxযদি একটি রুটের একটি ডিরেক্টরির মতো একই নাম থাকে, তবে নামযুক্ত ফাইলটি ডিরেক্টরির ভিতরে থাকা ফাইলগুলির জন্য একটি লেআউট ফাইল হয়ে যায় এবং লেআউট ফাইলটির প্রয়োজন হয় আউটলেট উপাদান নেস্টেড রুট স্থাপন করতে
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxলেআউটগুলিকে একটি ডবল আন্ডারস্কোর দিয়ে উপসর্গ দিয়ে তৈরি করা যেতে পারে (__).
app/
├── routes/
│ │
│ └── about
│ │ ├── index.tsx
│ ├── index.tsx
│ ├── about.tsx
│ ├── __blog.tsx ## this is also a layout
└── root.tsxhttps://your-url.com/about এখনও রেন্ডার হবে app/routes/about.tsx ফাইল, কিন্তু যা আছে তা রেন্ডার করবে app/routes/about/index.tsx যেখানে আউটলেট উপাদান এর মার্কআপে রয়েছে app/routes/about.tsx.
গতিশীল রুট
একটি গতিশীল রুট হল একটি রুট যা url-এর তথ্যের উপর ভিত্তি করে পরিবর্তিত হয়। এটি একটি ব্লগ পোস্ট বা একটি গ্রাহক আইডি একটি নাম হতে পারে, কিন্তু এটা যাই হোক না কেন $ সিনট্যাক্স রুটের সামনে যোগ করে রিমিক্সে সংকেত দেয় যে এটি গতিশীল। নাম ছাড়া অন্য কোন ব্যাপার না $ উপসর্গ
app/
├── routes/
│ │
│ └── about
│ │ ├── $id.tsx
│ │ ├── index.tsx
│ ├── about.tsx ## this is a layout for /about/index.tsx
│ ├── index.tsx
└── root.tsxযে ডেটা আনুন!
যেহেতু রিমিক্স সার্ভারে তার সমস্ত ডেটা রেন্ডার করে, তাই আপনি অনেক কিছু দেখতে পাবেন না যা একটি প্রতিক্রিয়া অ্যাপের মান হয়ে উঠেছে, যেমন useState() এবং useEffect() হুক, রিমিক্সে। ক্লায়েন্ট-সাইড স্টেটের প্রয়োজন কম কারণ এটি ইতিমধ্যে সার্ভারে মূল্যায়ন করা হয়েছে।
ডেটা আনার জন্য আপনি কোন ধরনের সার্ভার ব্যবহার করেন তাও ব্যাপার না। যেহেতু রিমিক্স অনুরোধ এবং প্রতিক্রিয়ার মধ্যে বসে এবং এটি যথাযথভাবে অনুবাদ করে, আপনি মান ব্যবহার করতে পারেন ওয়েব ফেচ API. রিমিক্স এ এটি করে loader ফাংশন যে কেবল সার্ভারে চলে এবং ব্যবহার করে useLoaderData() কম্পোনেন্টে ডাটা রেন্ডার করতে হুক। এখানে ব্যবহার করে একটি উদাহরণ একটি পরিষেবা API হিসাবে বিড়াল একটি র্যান্ডম বিড়াল ইমেজ রেন্ডার করতে.
import { Outlet, useLoaderData } from '@remix-run/react'
export async function loader() {
const response = await fetch('<https://cataas.com/cat?json=true>')
const data = await response.json()
return {
data
}
}
export default function AboutLayout() {
const cat = useLoaderData<typeof loader>()
return (
<>
<img
src={`https://cataas.com/cat/${cat}`}
alt="A random cat."
/>
<Outlet />
</>
)
}রুট পরামিতি
গতিশীল রুটে, এর সাথে প্রিফিক্স করা রুট $ যে ডেটা রেন্ডার করা উচিত তা পরিচালনা করতে URL প্যারামিটার অ্যাক্সেস করতে সক্ষম হওয়া দরকার। দ্য loader ফাংশন একটি মাধ্যমে এই অ্যাক্সেস আছে params যুক্তি.
import { useLoaderData } from '@remix-run/react'
import type { LoaderArgs } from '@remix-run/node'
export async function loader({ params }: LoaderArgs) {
return {
params
}
}
export default function AboutLayout() {
const { params } = useLoaderData<typeof loader>()
return <p>The url parameter is {params.tag}.</p>
}অন্যান্য রিমিক্স ফাংশন
রিমিক্সে আরও কয়েকটি সহায়ক ফাংশন রয়েছে যা সাধারণ HTML উপাদান এবং বৈশিষ্ট্যগুলিতে অতিরিক্ত কার্যকারিতা যোগ করে রুট মডিউল API. প্রতিটি রুট এই ধরনের ফাংশনগুলির নিজস্ব সংজ্ঞায়িত করতে পারে।
অ্যাকশন ফাংশন
An action ফাংশন আপনাকে স্ট্যান্ডার্ড ওয়েব ব্যবহার করে একটি ফর্ম অ্যাকশনে অতিরিক্ত কার্যকারিতা যোগ করতে দেয় FormData API.
export async function action({ request }) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}হেডার ফাংশন
কোন HTTP স্ট্যান্ডার্ড হেডার a মধ্যে যেতে পারেন headers ফাংশন কারণ প্রতিটি রুটের একটি শিরোনাম থাকতে পারে, নেস্টেড রুটের সাথে দ্বন্দ্ব এড়াতে, গভীরতম রুট — অথবা সবচেয়ে ফরোয়ার্ড স্ল্যাশ সহ URL (/) — জয়ী। আপনি শিরোনামগুলিও পাস করতে পারেন, actionHeaders, loaderHeaders, বা parentHeaders
export function headers({
actionHeaders,
loaderHeaders,
parentHeaders,
}) {
return {
"Cache-Control": loaderHeaders.get("Cache-Control"),
};
}মেটা ফাংশন
এই ফাংশনটি HTML নথির জন্য মেটা ট্যাগ সেট করবে। একটি সেট করা হয় root.tsx ডিফল্টরূপে ফাইল, কিন্তু তারা প্রতিটি রুটের জন্য আপডেট করা যেতে পারে।
export function meta() {
return {
title: "Your page title",
description: "A new description for each route.",
};
};লিঙ্ক ফাংশন
এইচটিএমএল link উপাদান বসবাস <head> একটি HTML নথির ট্যাগ এবং তারা অন্যান্য জিনিসের মধ্যে CSS আমদানি করে। দ্য links ফাংশন, সঙ্গে বিভ্রান্ত করা যাবে না <Link /> উপাদান, আপনাকে শুধুমাত্র সেই রুটে জিনিসপত্র আমদানি করতে দেয় যার প্রয়োজন হয়। সুতরাং, উদাহরণস্বরূপ, সিএসএস ফাইলগুলিকে স্কোপ করা যেতে পারে এবং শুধুমাত্র সেই নির্দিষ্ট ফাইলগুলির প্রয়োজনের রুটে আমদানি করা যেতে পারে। দ্য link উপাদান একটি থেকে ফেরত দেওয়া হয় links() বস্তুর একটি অ্যারে হিসাবে কাজ করে এবং হয় একটি হতে পারে HtmlLinkDescriptor থেকে link এপিআই বা একটি PageLinkDescriptor এটি একটি পৃষ্ঠার জন্য ডেটা প্রিফেচ করতে পারে।
export function links() {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png",
},
// add an external stylesheet
{
rel: "stylesheet",
href: "<https://example.com/some/styles.css>",
crossOrigin: "true",
},
// add a local stylesheet,
{ rel: "stylesheet", href: stylesHref },
// prefetch a page's data
{ page: "/about/community" }
]
}রুট মধ্যে সংযোগ
রিমিক্স নামে আপনার অ্যাপের বিভিন্ন রুটের মধ্যে যাওয়ার জন্য একটি উপাদান প্রদান করে <Link/>. ক্লায়েন্ট-সাইড রাউটিং পেতে, ব্যবহার করুন <Link to="">Name</Link> এর পরিবর্তে উপাদান <a href="">Name</a>. দ্য <Link /> কম্পোনেন্ট এছাড়াও একটি প্রপ লাগে prefetch গ্রহণ সহ none গতানুগতিক, intent ডেটা প্রিফেচ করতে যদি রিমিক্স ব্যবহারকারীর হভার শনাক্ত করে বা লিঙ্ক ফোকাস করে, বা render যা লিঙ্কটি রেন্ডার হওয়ার সাথে সাথে রুটের ডেটা আনবে।
import { Link } from "@remix-run/react";
export default function Nav() {
return (
<nav>
<Link to="/">Home</Link>{" "}
<Link to="/about">About</Link>{" "}
<Link to="/about/community" prefetch="intent">Community</Link>
</nav>
);
}পরবর্তী পদক্ষেপ
এখন আপনি রিমিক্সের মূল বিষয়গুলি জানেন এবং আপনি আসলে অ্যাপ্লিকেশন তৈরি করতে শুরু করতে প্রস্তুত, তাই না? রিমিক্স প্রদান করে একটি জোকস অ্যাপ এবং একটি ব্লগ টিউটোরিয়াল আপনি এই মৌলিক জ্ঞান বাস্তবায়ন শুরু করতে. এছাড়াও আপনি স্ক্র্যাচ থেকে শুরু করতে পারেন এবং একটি একেবারে নতুন রিমিক্স অ্যাপ তৈরি করতে পারেন। অথবা যদি আপনি ডুব দিতে প্রস্তুত হন, তাহলে দিন কে-পপ স্ট্যাক একটি চেষ্টা. আমি সত্যিই রিমিক্সের সাথে আমার সময় উপভোগ করেছি এবং ওয়েব স্ট্যান্ডার্ডগুলিতে ফোকাস করতে এবং এটিকে মূল বিষয়গুলিতে ফিরিয়ে আনতে পছন্দ করি৷ এখন তৈরি করা শুরু করার পালা!
