રિએક્ટ સસ્પેન્સ રિસોર્સ પૂલ: કાર્યક્ષમ શેર્ડ ડેટા લોડિંગ મેનેજમેન્ટ

રિએક્ટ સસ્પેન્સ એ રિએક્ટ 16.6 માં રજૂ કરાયેલું એક શક્તિશાળી મિકેનિઝમ છે જે તમને ડેટા ફેચિંગ જેવી એસિન્ક્રોનસ કામગીરી પૂર્ણ થવાની રાહ જોતી વખતે કમ્પોનન્ટ રેન્ડરિંગને "સસ્પેન્ડ" કરવાની મંજૂરી આપે છે. આ લોડિંગ સ્ટેટ્સને હેન્ડલ કરવા અને વપરાશકર્તા અનુભવને સુધારવા માટે વધુ ડિક્લરેટિવ અને કાર્યક્ષમ રીતનો દરવાજો ખોલે છે. જ્યારે સસ્પેન્સ પોતે એક ઉત્તમ સુવિધા છે, ત્યારે તેને રિસોર્સ પૂલ પેટર્ન સાથે જોડવાથી વધુ સારા પર્ફોર્મન્સ ગેઇન્સ અનલૉક થઈ શકે છે, ખાસ કરીને જ્યારે બહુવિધ કમ્પોનન્ટ્સમાં શેર્ડ ડેટા સાથે કામ કરવામાં આવે છે.

રિએક્ટ સસ્પેન્સને સમજવું

રિસોર્સ પૂલ પેટર્નમાં ઊંડા ઉતરતા પહેલાં, ચાલો રિએક્ટ સસ્પેન્સના મૂળભૂત સિદ્ધાંતોને ઝડપથી યાદ કરીએ:

• ડેટા ફેચિંગ માટે સસ્પેન્સ: સસ્પેન્સ તમને એક કમ્પોનન્ટને રેન્ડર કરવાનું ત્યાં સુધી રોકવા દે છે જ્યાં સુધી તેનો જરૂરી ડેટા ઉપલબ્ધ ન થાય.
• એરર બાઉન્ડ્રીઝ: સસ્પેન્સની સાથે, એરર બાઉન્ડ્રીઝ તમને ડેટા ફેચિંગ પ્રક્રિયા દરમિયાન એરર્સને સરળતાથી હેન્ડલ કરવાની મંજૂરી આપે છે, નિષ્ફળતાના કિસ્સામાં ફોલબેક UI પ્રદાન કરે છે.
• લેઝી લોડિંગ કમ્પોનન્ટ્સ: સસ્પેન્સ કમ્પોનન્ટ્સનું લેઝી લોડિંગ સક્ષમ કરે છે, ફક્ત જરૂર હોય ત્યારે જ કમ્પોનન્ટ્સ લોડ કરીને પ્રારંભિક પેજ લોડ સમયને સુધારે છે.

સસ્પેન્સનો ઉપયોગ કરવાની મૂળભૂત રચના આના જેવી દેખાય છે:

<Suspense fallback={<p>Loading...</p>}>
  <MyComponent />
</Suspense>

આ ઉદાહરણમાં, MyComponent એસિન્ક્રોનસલી ડેટા ફેચ કરી રહ્યું હોઈ શકે છે. જો ડેટા તરત જ ઉપલબ્ધ ન હોય, તો fallback પ્રોપ, આ કિસ્સામાં, લોડિંગ સંદેશ, પ્રદર્શિત થશે. એકવાર ડેટા તૈયાર થઈ જાય, MyComponent રેન્ડર થશે.

પડકાર: રિડન્ડન્ટ ડેટા ફેચિંગ

જટિલ એપ્લિકેશન્સમાં, બહુવિધ કમ્પોનન્ટ્સ માટે સમાન ડેટા પર આધાર રાખવો સામાન્ય છે. એક સરળ અભિગમ એ હશે કે દરેક કમ્પોનન્ટ તેને જરૂરી ડેટા સ્વતંત્ર રીતે ફેચ કરે. જો કે, આ રિડન્ડન્ટ ડેટા ફેચિંગ તરફ દોરી શકે છે, નેટવર્ક રિસોર્સનો બગાડ કરી શકે છે અને સંભવિતપણે એપ્લિકેશનને ધીમી કરી શકે છે.

એક એવા દૃશ્યનો વિચાર કરો જ્યાં તમારી પાસે વપરાશકર્તાની માહિતી દર્શાવતું ડેશબોર્ડ છે, અને યુઝર પ્રોફાઇલ વિભાગ અને તાજેતરની એક્ટિવિટી ફીડ બંનેને વપરાશકર્તાની વિગતોની જરૂર છે. જો દરેક કમ્પોનન્ટ પોતાનો ડેટા ફેચ શરૂ કરે, તો તમે અનિવાર્યપણે સમાન માહિતી માટે બે સરખી વિનંતીઓ કરી રહ્યા છો.

રિસોર્સ પૂલ પેટર્નનો પરિચય

રિસોર્સ પૂલ પેટર્ન ડેટા રિસોર્સનો એક કેન્દ્રિય પૂલ બનાવીને આ સમસ્યાનો ઉકેલ પૂરો પાડે છે. દરેક કમ્પોનન્ટ સ્વતંત્ર રીતે ડેટા ફેચ કરવાને બદલે, તેઓ પૂલમાંથી શેર્ડ રિસોર્સની ઍક્સેસની વિનંતી કરે છે. જો રિસોર્સ પહેલેથી જ ઉપલબ્ધ હોય (એટલે કે, ડેટા પહેલેથી જ ફેચ થઈ ગયો હોય), તો તે તરત જ પરત કરવામાં આવે છે. જો રિસોર્સ હજુ ઉપલબ્ધ ન હોય, તો પૂલ ડેટા ફેચ શરૂ કરે છે અને તે પૂર્ણ થયા પછી તમામ વિનંતી કરનારા કમ્પોનન્ટ્સ માટે ઉપલબ્ધ કરાવે છે.

આ પેટર્ન ઘણા ફાયદાઓ આપે છે:

• રિડન્ડન્ટ ફેચિંગમાં ઘટાડો: ખાતરી કરે છે કે ડેટા ફક્ત એક જ વાર ફેચ થાય છે, ભલે બહુવિધ કમ્પોનન્ટ્સને તેની જરૂર હોય.
• સુધારેલ પર્ફોર્મન્સ: નેટવર્ક ઓવરહેડ ઘટાડે છે અને એકંદર એપ્લિકેશન પર્ફોર્મન્સમાં સુધારો કરે છે.
• કેન્દ્રિય ડેટા મેનેજમેન્ટ: ડેટા માટે સત્યનો એક જ સ્ત્રોત પૂરો પાડે છે, ડેટા મેનેજમેન્ટ અને સુસંગતતાને સરળ બનાવે છે.

રિએક્ટ સસ્પેન્સ સાથે રિસોર્સ પૂલનો અમલ

રિએક્ટ સસ્પેન્સનો ઉપયોગ કરીને તમે રિસોર્સ પૂલ પેટર્ન કેવી રીતે અમલમાં મૂકી શકો તે અહીં છે:

1. રિસોર્સ ફેક્ટરી બનાવો: આ ફેક્ટરી ફંક્શન ડેટા ફેચિંગ પ્રોમિસ બનાવવા અને સસ્પેન્સ માટે જરૂરી ઇન્ટરફેસ પ્રદાન કરવા માટે જવાબદાર રહેશે.
2. રિસોર્સ પૂલનો અમલ કરો: પૂલ બનાવેલા રિસોર્સને સંગ્રહિત કરશે અને તેમની લાઇફસાઇકલનું સંચાલન કરશે. તે એ પણ સુનિશ્ચિત કરશે કે દરેક અનન્ય રિસોર્સ માટે માત્ર એક જ ફેચ શરૂ કરવામાં આવે.
3. કમ્પોનન્ટ્સમાં રિસોર્સનો ઉપયોગ કરો: કમ્પોનન્ટ્સ પૂલમાંથી રિસોર્સની વિનંતી કરશે અને ડેટાની રાહ જોતી વખતે રેન્ડરિંગને સસ્પેન્ડ કરવા માટે React.use નો ઉપયોગ કરશે.

1. રિસોર્સ ફેક્ટરી બનાવવી

રિસોર્સ ફેક્ટરી ઇનપુટ તરીકે ડેટા ફેચિંગ ફંક્શન લેશે અને એક ઑબ્જેક્ટ પરત કરશે જેનો ઉપયોગ React.use સાથે થઈ શકે છે. આ ઑબ્જેક્ટમાં સામાન્ય રીતે એક read મેથડ હશે જે કાં તો ડેટા પરત કરે છે અથવા જો ડેટા હજુ ઉપલબ્ધ ન હોય તો પ્રોમિસ થ્રો કરે છે.

function createResource(fetchData) {
  let status = 'pending';
  let result;
  let suspender = fetchData().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      } else if (status === 'success') {
        return result;
      }
    },
  };
}

સમજૂતી:

• createResource ફંક્શન ઇનપુટ તરીકે fetchData ફંક્શન લે છે. આ ફંક્શને એક પ્રોમિસ પરત કરવું જોઈએ જે ડેટા સાથે રિઝોલ્વ થાય.
• status વેરિયેબલ ડેટા ફેચિંગની સ્થિતિને ટ્રેક કરે છે: 'pending', 'success', અથવા 'error'.
• suspender વેરિયેબલ fetchData દ્વારા પરત કરાયેલ પ્રોમિસ ધરાવે છે. જ્યારે પ્રોમિસ રિઝોલ્વ અથવા રિજેક્ટ થાય ત્યારે status અને result વેરિયેબલ્સને અપડેટ કરવા માટે then મેથડનો ઉપયોગ થાય છે.
• read મેથડ સસ્પેન્સ સાથે સંકલન કરવાની ચાવી છે. જો status 'pending' હોય, તો તે suspender પ્રોમિસ થ્રો કરે છે, જેના કારણે સસ્પેન્સ રેન્ડરિંગને સસ્પેન્ડ કરે છે. જો status 'error' હોય, તો તે એરર થ્રો કરે છે, જેનાથી એરર બાઉન્ડ્રીઝ તેને પકડી શકે છે. જો status 'success' હોય, તો તે ડેટા પરત કરે છે.

2. રિસોર્સ પૂલનો અમલ

રિસોર્સ પૂલ બનાવેલા રિસોર્સને સંગ્રહિત કરવા અને સંચાલિત કરવા માટે જવાબદાર રહેશે. તે સુનિશ્ચિત કરશે કે દરેક અનન્ય રિસોર્સ માટે માત્ર એક જ ફેચ શરૂ કરવામાં આવે.

const resourcePool = {
  cache: new Map(),
  get(key, fetchData) {
    if (!this.cache.has(key)) {
      this.cache.set(key, createResource(fetchData));
    }
    return this.cache.get(key);
  },
};

સમજૂતી:

• resourcePool ઑબ્જેક્ટમાં cache પ્રોપર્ટી છે, જે એક Map છે જે બનાવેલા રિસોર્સને સંગ્રહિત કરે છે.
• get મેથડ ઇનપુટ તરીકે key અને fetchData ફંક્શન લે છે. key નો ઉપયોગ રિસોર્સને અનન્ય રીતે ઓળખવા માટે થાય છે.
• જો રિસોર્સ પહેલેથી જ કેશમાં ન હોય, તો તે createResource ફંક્શનનો ઉપયોગ કરીને બનાવવામાં આવે છે અને કેશમાં ઉમેરવામાં આવે છે.
• પછી get મેથડ કેશમાંથી રિસોર્સ પરત કરે છે.

3. કમ્પોનન્ટ્સમાં રિસોર્સનો ઉપયોગ

હવે, તમે ડેટાને ઍક્સેસ કરવા માટે તમારા રિએક્ટ કમ્પોનન્ટ્સમાં રિસોર્સ પૂલનો ઉપયોગ કરી શકો છો. રિસોર્સમાંથી ડેટાને ઍક્સેસ કરવા માટે React.use હૂકનો ઉપયોગ કરો. જો ડેટા હજુ ઉપલબ્ધ ન હોય તો આ આપમેળે કમ્પોનન્ટને સસ્પેન્ડ કરશે.

import React from 'react';

function MyComponent({ userId }) {
  const userResource = resourcePool.get(userId, () => fetchUser(userId));
  const user = React.use(userResource).user;

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

function fetchUser(userId) {
  return fetch(`https://api.example.com/users/${userId}`).then((response) =>
    response.json()
  ).then(data => ({user: data}));
}

export default MyComponent;

સમજૂતી:

• MyComponent કમ્પોનન્ટ ઇનપુટ તરીકે userId પ્રોપ લે છે.
• resourcePool.get મેથડનો ઉપયોગ પૂલમાંથી યુઝર રિસોર્સ મેળવવા માટે થાય છે. key એ userId છે, અને fetchData ફંક્શન fetchUser છે.
• React.use હૂકનો ઉપયોગ userResource માંથી ડેટાને ઍક્સેસ કરવા માટે થાય છે. જો ડેટા હજુ ઉપલબ્ધ ન હોય તો આ કમ્પોનન્ટને સસ્પેન્ડ કરશે.
• પછી કમ્પોનન્ટ વપરાશકર્તાનું નામ અને ઇમેઇલ રેન્ડર કરે છે.

છેલ્લે, લોડિંગ સ્ટેટને હેન્ડલ કરવા માટે તમારા કમ્પોનન્ટને <Suspense> સાથે રેપ કરો:

<Suspense fallback={<p>Loading user profile...</p>}>
  <MyComponent userId={123} />
</Suspense>

ઉન્નત વિચારણાઓ

કેશ ઇનવેલિડેશન

વાસ્તવિક-વિશ્વની એપ્લિકેશન્સમાં, ડેટા બદલાઈ શકે છે. જ્યારે ડેટા અપડેટ થાય ત્યારે તમારે કેશને અમાન્ય કરવા માટે એક મિકેનિઝમની જરૂર પડશે. આમાં પૂલમાંથી રિસોર્સ દૂર કરવાનો અથવા રિસોર્સમાં ડેટા અપડેટ કરવાનો સમાવેશ થઈ શકે છે.

resourcePool.invalidate = (key) => {
  resourcePool.cache.delete(key);
};

એરર હેન્ડલિંગ

જ્યારે સસ્પેન્સ તમને લોડિંગ સ્ટેટ્સને સરળતાથી હેન્ડલ કરવાની મંજૂરી આપે છે, ત્યારે એરર્સને હેન્ડલ કરવું પણ એટલું જ મહત્વપૂર્ણ છે. ડેટા ફેચિંગ અથવા રેન્ડરિંગ દરમિયાન થતી કોઈપણ એરર્સને પકડવા માટે તમારા કમ્પોનન્ટ્સને એરર બાઉન્ડ્રીઝ સાથે રેપ કરો.

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

<ErrorBoundary>
  <Suspense fallback={<p>Loading user profile...</p>}>
    <MyComponent userId={123} />
  </Suspense>
</ErrorBoundary>

SSR સુસંગતતા

જ્યારે સર્વર-સાઇડ રેન્ડરિંગ (SSR) સાથે સસ્પેન્સનો ઉપયોગ કરો, ત્યારે તમારે ખાતરી કરવાની જરૂર છે કે કમ્પોનન્ટ રેન્ડર કરતા પહેલા સર્વર પર ડેટા ફેચ થઈ ગયો છે. આ react-ssr-prepass જેવી લાઇબ્રેરીઓનો ઉપયોગ કરીને અથવા મેન્યુઅલી ડેટા ફેચ કરીને અને તેને કમ્પોનન્ટને પ્રોપ્સ તરીકે પાસ કરીને પ્રાપ્ત કરી શકાય છે.

ગ્લોબલ કન્ટેક્સ્ટ અને આંતરરાષ્ટ્રીયકરણ

ગ્લોબલ એપ્લિકેશન્સમાં, રિસોર્સ પૂલ ગ્લોબલ કન્ટેક્સ્ટ, જેમ કે ભાષા સેટિંગ્સ અથવા વપરાશકર્તા પસંદગીઓ, સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરે છે તે ધ્યાનમાં લો. ખાતરી કરો કે ફેચ કરેલો ડેટા યોગ્ય રીતે સ્થાનિકીકૃત થયેલ છે. ઉદાહરણ તરીકે, જો ઉત્પાદન વિગતો ફેચ કરી રહ્યા હોય, તો ખાતરી કરો કે વર્ણન અને કિંમતો વપરાશકર્તાની પસંદગીની ભાષા અને ચલણમાં પ્રદર્શિત થાય છે.

ઉદાહરણ:

import { useContext } from 'react';
import { LocaleContext } from './LocaleContext';

function ProductComponent({ productId }) {
  const { locale, currency } = useContext(LocaleContext);
  const productResource = resourcePool.get(`${productId}-${locale}-${currency}`, () =>
    fetchProduct(productId, locale, currency)
  );
  const product = React.use(productResource);

  return (
    <div>
      <h2>{product.name}</h2>
      <p>{product.description}</p>
      <p>Price: {product.price} {currency}</p>
    </div>
  );
}

async function fetchProduct(productId, locale, currency) {
  // Simulate fetching localized product data
  await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network delay
  const products = {
    '123-en-USD': { name: 'Awesome Product', description: 'A fantastic product!', price: 99.99 },
    '123-fr-EUR': { name: 'Produit Génial', description: 'Un produit fantastique !', price: 89.99 },
  };

  const key = `${productId}-${locale}-${currency}`;
  if (products[key]) {
    return products[key];
  } else {
    // Fallback to English USD
    return products['123-en-USD'];
  }
}

આ ઉદાહરણમાં, LocaleContext વપરાશકર્તાની પસંદગીની ભાષા અને ચલણ પ્રદાન કરે છે. રિસોર્સ કી productId, locale, અને currency નો ઉપયોગ કરીને બનાવવામાં આવી છે, જે ખાતરી કરે છે કે સાચો સ્થાનિકીકૃત ડેટા ફેચ થાય છે. fetchProduct ફંક્શન પ્રદાન કરેલ લોકેલ અને ચલણના આધારે સ્થાનિકીકૃત ઉત્પાદન ડેટા ફેચ કરવાનું સિમ્યુલેટ કરે છે. જો સ્થાનિકીકૃત સંસ્કરણ ઉપલબ્ધ ન હોય, તો તે ડિફોલ્ટ (આ કિસ્સામાં અંગ્રેજી/USD) પર ફોલબેક કરે છે.

ફાયદા અને ગેરફાયદા

ફાયદા

• સુધારેલ પર્ફોર્મન્સ: રિડન્ડન્ટ ડેટા ફેચિંગ ઘટાડે છે અને એકંદર એપ્લિકેશન પર્ફોર્મન્સમાં સુધારો કરે છે.
• કેન્દ્રિય ડેટા મેનેજમેન્ટ: ડેટા માટે સત્યનો એક જ સ્ત્રોત પૂરો પાડે છે, ડેટા મેનેજમેન્ટ અને સુસંગતતાને સરળ બનાવે છે.
• ડિક્લરેટિવ લોડિંગ સ્ટેટ્સ: સસ્પેન્સ તમને લોડિંગ સ્ટેટ્સને ડિક્લરેટિવ અને કમ્પોઝેબલ રીતે હેન્ડલ કરવાની મંજૂરી આપે છે.
• વધારેલો વપરાશકર્તા અનુભવ: આંચકાજનક લોડિંગ સ્ટેટ્સને અટકાવીને એક સરળ અને વધુ પ્રતિભાવશીલ વપરાશકર્તા અનુભવ પ્રદાન કરે છે.

ગેરફાયદા

• જટિલતા: રિસોર્સ પૂલનો અમલ તમારી એપ્લિકેશનમાં જટિલતા ઉમેરી શકે છે.
• કેશ મેનેજમેન્ટ: ડેટા સુસંગતતા સુનિશ્ચિત કરવા માટે કાળજીપૂર્વક કેશ મેનેજમેન્ટની જરૂર છે.
• ઓવર-કેશિંગની સંભાવના: જો યોગ્ય રીતે સંચાલિત ન થાય, તો કેશ જૂનો થઈ શકે છે અને જૂનો ડેટા પ્રદર્શિત થઈ શકે છે.

રિસોર્સ પૂલના વિકલ્પો

જ્યારે રિસોર્સ પૂલ પેટર્ન એક સારો ઉકેલ આપે છે, ત્યાં તમારી વિશિષ્ટ જરૂરિયાતોને આધારે વિચારવા માટે અન્ય વિકલ્પો પણ છે:

• કન્ટેક્સ્ટ API: કમ્પોનન્ટ્સ વચ્ચે ડેટા શેર કરવા માટે રિએક્ટના કન્ટેક્સ્ટ API નો ઉપયોગ કરો. આ રિસોર્સ પૂલ કરતાં એક સરળ અભિગમ છે, પરંતુ તે ડેટા ફેચિંગ પર સમાન સ્તરનું નિયંત્રણ પ્રદાન કરતું નથી.
• Redux અથવા અન્ય સ્ટેટ મેનેજમેન્ટ લાઇબ્રેરીઓ: કેન્દ્રિય સ્ટોરમાં ડેટા મેનેજ કરવા માટે Redux જેવી સ્ટેટ મેનેજમેન્ટ લાઇબ્રેરીનો ઉપયોગ કરો. આ ઘણા બધા ડેટાવાળી જટિલ એપ્લિકેશન્સ માટે એક સારો વિકલ્પ છે.
• GraphQL Client (e.g., Apollo Client, Relay): GraphQL ક્લાયન્ટ્સ બિલ્ટ-ઇન કેશિંગ અને ડેટા ફેચિંગ મિકેનિઝમ્સ ઓફર કરે છે જે રિડન્ડન્ટ ફેચિંગને ટાળવામાં મદદ કરી શકે છે.

નિષ્કર્ષ

રિએક્ટ સસ્પેન્સ રિસોર્સ પૂલ પેટર્ન રિએક્ટ એપ્લિકેશન્સમાં ડેટા લોડિંગને ઓપ્ટિમાઇઝ કરવા માટે એક શક્તિશાળી તકનીક છે. કમ્પોનન્ટ્સમાં ડેટા રિસોર્સ શેર કરીને અને ડિક્લરેટિવ લોડિંગ સ્ટેટ્સ માટે સસ્પેન્સનો લાભ લઈને, તમે પર્ફોર્મન્સમાં નોંધપાત્ર સુધારો કરી શકો છો અને વપરાશકર્તા અનુભવને વધારી શકો છો. જ્યારે તે થોડી જટિલતા ઉમેરે છે, ત્યારે ફાયદાઓ ઘણીવાર ખર્ચ કરતાં વધી જાય છે, ખાસ કરીને ઘણા બધા શેર્ડ ડેટાવાળી જટિલ એપ્લિકેશન્સમાં.

રિસોર્સ પૂલનો અમલ કરતી વખતે કેશ ઇનવેલિડેશન, એરર હેન્ડલિંગ અને SSR સુસંગતતાને કાળજીપૂર્વક ધ્યાનમાં લેવાનું યાદ રાખો. ઉપરાંત, તમારી વિશિષ્ટ જરૂરિયાતો માટે શ્રેષ્ઠ ઉકેલ નક્કી કરવા માટે કન્ટેક્સ્ટ API અથવા સ્ટેટ મેનેજમેન્ટ લાઇબ્રેરીઓ જેવા વૈકલ્પિક અભિગમોનું અન્વેષણ કરો.

રિએક્ટ સસ્પેન્સ અને રિસોર્સ પૂલ પેટર્નના સિદ્ધાંતોને સમજીને અને લાગુ કરીને, તમે વૈશ્વિક પ્રેક્ષકો માટે વધુ કાર્યક્ષમ, પ્રતિભાવશીલ અને વપરાશકર્તા-મૈત્રીપૂર્ણ વેબ એપ્લિકેશન્સ બનાવી શકો છો.