ரியாக்ட் முற்போக்கு மேம்பாடு: ஜாவாஸ்கிரிப்ட்-விருப்பக் கூறுகளை உருவாக்குதல்

இன்றைய வலை மேம்பாட்டுச் சூழலில், ரியாக்ட் போன்ற ஜாவாஸ்கிரிப்ட் கட்டமைப்புகள் சர்வ வியாபகமாக உள்ளன. அவை ஆற்றல்மிக்க மற்றும் ஊடாடும் பயனர் இடைமுகங்களை உருவாக்குவதற்கான சக்திவாய்ந்த கருவிகளை வழங்கினாலும், ஜாவாஸ்கிரிப்டை மட்டுமே நம்பியிருப்பது அணுகல்தன்மை, செயல்திறன் மற்றும் எஸ்சிஓ ஆகியவற்றில் சிக்கல்களுக்கு வழிவகுக்கும். இங்குதான் முற்போக்கு மேம்பாடு (Progressive Enhancement - PE) வருகிறது. முற்போக்கு மேம்பாடு என்பது வலை மேம்பாட்டிற்கான ஒரு உத்தியாகும், இது பயனர்களின் உலாவி திறன்கள் அல்லது ஜாவாஸ்கிரிப்ட் கிடைப்பதைப் பொருட்படுத்தாமல், அனைத்து பயனர்களுக்கும் முக்கிய வலைத்தள செயல்பாடு மற்றும் உள்ளடக்கம் கிடைப்பதற்கு முன்னுரிமை அளிக்கிறது. ரியாக்ட் முற்போக்கு மேம்பாடு, ஜாவாஸ்கிரிப்ட் இல்லாமலும் செயல்படும் கூறுகளை உருவாக்குவதில் கவனம் செலுத்துகிறது, இது ஒரு அடிப்படை அனுபவத்தை வழங்குகிறது, பின்னர் அது ஜாவாஸ்கிரிப்ட் மூலம் செழுமையான ஊடாடுதலுக்காக மேம்படுத்தப்படுகிறது.

முற்போக்கு மேம்பாடு என்றால் என்ன?

முற்போக்கு மேம்பாடு என்பது ஒரு புதிய கருத்து அல்ல. இது HTML மற்றும் CSS இன் திடமான அடித்தளத்துடன் தொடங்கி, அடுக்குகளில் வலைத்தளங்களை உருவாக்குவதை ஆதரிக்கும் ஒரு தத்துவமாகும். இந்த அடித்தளம், ஊனமுற்ற பயனர்கள், குறைந்த அலைவரிசை இணைப்புகளில் உள்ளவர்கள் அல்லது ஜாவாஸ்கிரிப்டை முடக்கியவர்கள் உட்பட அனைவருக்கும் உள்ளடக்கம் அணுகக்கூடியதாக இருப்பதை உறுதி செய்கிறது. பின்னர் ஜாவாஸ்கிரிப்ட் ஒரு மேம்பாடாக சேர்க்கப்பட்டு, ஒரு செழுமையான மற்றும் ஊடாடும் அனுபவத்தை வழங்குகிறது. இதை ஒரு வீடு கட்டுவது போல நினைத்துப் பாருங்கள்: நீங்கள் அடிப்படை அமைப்புடன் தொடங்கி, பின்னர் ஆடம்பரமான அம்சங்களைச் சேர்க்கிறீர்கள்.

முற்போக்கு மேம்பாட்டின் முக்கியக் கோட்பாடுகள்:

• அணுகல்தன்மை முதலில்: முக்கிய உள்ளடக்கம் மற்றும் செயல்பாடுகள் அனைத்து பயனர்களுக்கும், உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்கள் உட்பட, அணுகக்கூடியதாக இருப்பதை உறுதி செய்யவும்.
• சொற்பொருள் HTML (Semantic HTML): உள்ளடக்கத்தின் கட்டமைப்பையும் பொருளையும் தெரிவிக்க HTML கூறுகளைப் பொருத்தமாகப் பயன்படுத்தவும். இது அணுகல்தன்மை மற்றும் எஸ்சிஓ-க்கு முக்கியமானது.
• இணக்கமான சீரழிவு (Graceful Degradation): ஜாவாஸ்கிரிப்ட் தோல்வியுற்றால் அல்லது கிடைக்கவில்லை என்றால், வலைத்தளம் குறைந்த அளவிலான ஊடாடுதலுடன் கூட பயன்படுத்தக்கூடியதாக இருக்க வேண்டும்.
• செயல்திறன் மேம்படுத்தல்: ஆரம்ப பக்க ஏற்றத்திற்குத் தேவையான ஜாவாஸ்கிரிப்டின் அளவைக் குறைக்கவும்.

ரியாக்ட்டில் முற்போக்கு மேம்பாடு ஏன் முக்கியம்

ரியாக்ட், இயல்பாகவே, ஜாவாஸ்கிரிப்ட்-அதிகம் கொண்ட ஒரு கட்டமைப்பாகும். ஒரு ரியாக்ட் பயன்பாடு உலாவியில் காண்பிக்கப்படும்போது, அது பொதுவாக கணிசமான அளவு ஜாவாஸ்கிரிப்ட் பதிவிறக்கம் செய்யப்பட்டு, பாகுபடுத்தப்பட்டு, செயல்படுத்தப்பட வேண்டும். இது பல சிக்கல்களுக்கு வழிவகுக்கும்:

• மெதுவான ஆரம்ப ஏற்றுதல் நேரங்கள்: மெதுவான இணைப்புகளில் உள்ள பயனர்கள் அல்லது குறைந்த சக்திவாய்ந்த சாதனங்களைக் கொண்டவர்கள் வலைத்தளம் ஊடாடும் முன் கணிசமான தாமதத்தை அனுபவிக்கலாம்.
• அணுகல்தன்மை சிக்கல்கள்: உதவித் தொழில்நுட்பங்களை நம்பியுள்ள ஊனமுற்ற பயனர்கள், காண்பிப்பதற்கு ஜாவாஸ்கிரிப்ட் தேவைப்பட்டால் உள்ளடக்கத்தை அணுகுவதில் சிரமப்படலாம்.
• எஸ்சிஓ சவால்கள்: தேடுபொறி கிராலர்கள் ஜாவாஸ்கிரிப்டை பெரிதும் சார்ந்திருக்கும் உள்ளடக்கத்தை சரியாக அட்டவணைப்படுத்த முடியாமல் போகலாம்.

ரியாக்ட்டில் முற்போக்கு மேம்பாட்டைச் செயல்படுத்துவது, ஜாவாஸ்கிரிப்ட் இல்லாமலும் செயல்படும் ஒரு அடிப்படை அனுபவத்தை வழங்குவதன் மூலம் இந்த சவால்களை எதிர்கொள்கிறது. இது அணுகல்தன்மை மற்றும் செயல்திறனை மேம்படுத்துவதோடு மட்டுமல்லாமல், தேடுபொறிகள் உள்ளடக்கத்தை எளிதாக கிரால் செய்து அட்டவணைப்படுத்த முடியும் என்பதை உறுதி செய்வதன் மூலம் எஸ்சிஓ-வையும் மேம்படுத்துகிறது.

ரியாக்ட் முற்போக்கு மேம்பாட்டிற்கான நுட்பங்கள்

ரியாக்ட்டில் முற்போக்கு மேம்பாட்டைச் செயல்படுத்த பல நுட்பங்களைப் பயன்படுத்தலாம்:

1. சர்வர்-சைட் ரெண்டரிங் (SSR)

சர்வர்-சைட் ரெண்டரிங் (SSR) என்பது ரியாக்ட் கூறுகள் சர்வரில் காண்பிக்கப்பட்டு, அதன் விளைவாக வரும் HTML கிளையண்டிற்கு அனுப்பப்படும் ஒரு நுட்பமாகும். இது ஜாவாஸ்கிரிப்ட் பதிவிறக்கம் செய்யப்பட்டு செயல்படுத்தப்படுவதற்கு முன்பே, உலாவி உள்ளடக்கத்தை உடனடியாகக் காட்ட அனுமதிக்கிறது. SSR பல நன்மைகளை வழங்குகிறது:

• மேம்படுத்தப்பட்ட ஆரம்ப ஏற்றுதல் நேரம்: உலாவி முன்பே காண்பிக்கப்பட்ட HTML-ஐப் பெறுகிறது, இதன் விளைவாக வேகமான ஆரம்ப பக்க ஏற்றுதல் ஏற்படுகிறது.
• மேம்பட்ட எஸ்சிஓ: தேடுபொறி கிராலர்கள் முன்பே காண்பிக்கப்பட்ட HTML-ஐ எளிதாக அட்டவணைப்படுத்த முடியும்.
• சிறந்த அணுகல்தன்மை: ஊனமுற்ற பயனர்கள் ஜாவாஸ்கிரிப்ட் ஏற்றப்படுவதற்கு முன்பே உள்ளடக்கத்தை அணுக முடியும்.

Next.js மற்றும் Remix போன்ற கட்டமைப்புகள் ரியாக்ட்டில் SSR-ஐ செயல்படுத்துவதை ஒப்பீட்டளவில் எளிதாக்குகின்றன. அவை சர்வர்-சைட் ரெண்டரிங், ரூட்டிங் மற்றும் தரவு பெறுதலுக்கான உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகின்றன.

Next.js-ஐப் பயன்படுத்தி உதாரணம்:

Next.js ஆனது `pages` கோப்பகத்தில் உள்ள பக்கங்களுக்கு SSR-ஐ தானாகவே கையாளுகிறது. இதோ ஒரு எளிய உதாரணம்:

// பக்கங்கள்/index.js
function HomePage() {
  return 
என் வலைத்தளத்திற்கு வரவேற்கிறோம்!
;
}

export default HomePage;

ஒரு பயனர் முகப்புப் பக்கத்தைப் பார்வையிடும்போது, Next.js சர்வரில் `HomePage` கூறினை காண்பித்து, அதன் விளைவாக வரும் HTML-ஐ உலாவிக்கு அனுப்பும்.

2. ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG)

ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG) என்பது ரியாக்ட் கூறுகள் பில்ட் நேரத்தில் காண்பிக்கப்பட்டு, அதன் விளைவாக வரும் HTML கோப்புகள் நேரடியாக கிளையண்டிற்கு வழங்கப்படும் ஒரு நுட்பமாகும். இது SSR-ஐ விட வேகமானது, ஏனெனில் HTML முன்பே உருவாக்கப்பட்டு, ஒவ்வொரு கோரிக்கைக்கும் எந்த சர்வர்-சைட் செயலாக்கமும் தேவையில்லை.

• மிக வேகமான ஏற்றுதல் நேரங்கள்: HTML கோப்புகள் ஒரு CDN-இலிருந்து நேரடியாக வழங்கப்படுகின்றன, இதன் விளைவாக மிக வேகமான ஏற்றுதல் நேரங்கள் ஏற்படுகின்றன.
• மேம்படுத்தப்பட்ட பாதுகாப்பு: சர்வர்-சைட் குறியீடு செயல்படுத்தல் இல்லை, இது தாக்குதல் பரப்பைக் குறைக்கிறது.
• அளவிடுதல் தன்மை: வலைத்தளம் நிலையான கோப்புகளைக் கொண்டிருப்பதால் அளவிடுவது எளிது.

Gatsby மற்றும் Next.js போன்ற கட்டமைப்புகள் SSG-ஐ ஆதரிக்கின்றன. அவை உங்கள் ரியாக்ட் கூறுகளிலிருந்து பில்ட் நேரத்தில் நிலையான HTML கோப்புகளை உருவாக்க உங்களை அனுமதிக்கின்றன.

Next.js-ஐப் பயன்படுத்தி உதாரணம்:

Next.js-இல் SSG-ஐப் பயன்படுத்த, நீங்கள் `getStaticProps` செயல்பாட்டைப் பயன்படுத்தி தரவைப் பெற்று, அதை உங்கள் கூறுக்கு ப்ராப்ஸாக அனுப்பலாம்.

// பக்கங்கள்/வலைப்பதிவு/[id].js

export async function getStaticProps({ params }) {
  const postId = params.id;
  // ஒரு ஏபிஐ அல்லது தரவுத்தளத்திலிருந்து பதிவிற்கான தரவைப் பெறவும்
  const post = { id: postId, title: `பதிவு ${postId}`, content: `பதிவு ${postId}-இன் உள்ளடக்கம்` };

  return {
    props: {
      post,
    },
  };
}

export async function getStaticPaths() {
  // `id` அளவுருவிற்கு சாத்தியமான மதிப்புகளை வரையறுக்கவும்
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
    { params: { id: '3' } },
  ];

  return {
    paths,
    fallback: false, // தேவைக்கேற்ப பக்கங்களை உருவாக்க விரும்பினால் true என அமைக்கவும்
  };
}

function BlogPost({ post }) {
  return (
    

      
{post.title}
      
{post.content}
    
  );
}

export default BlogPost;

Next.js பில்ட் நேரத்தில் ஒவ்வொரு பதிவிற்கும் நிலையான HTML கோப்புகளை உருவாக்கும்.

3. `

`

ஜாவாஸ்கிரிப்ட் இயக்கப்பட்டிருந்தால் இந்த உள்ளடக்கம் காட்டப்படும்.

நீங்கள் `

4. நிபந்தனைக்குட்பட்ட காண்பித்தல் (Conditional Rendering)

நிபந்தனைக்குட்பட்ட காண்பித்தல், ஜாவாஸ்கிரிப்ட் இயக்கப்பட்டிருக்கிறதா என்பதைப் பொறுத்து வெவ்வேறு கூறுகளை அல்லது உள்ளடக்கத்தைக் காண்பிக்க உங்களை அனுமதிக்கிறது. ஜாவாஸ்கிரிப்ட் இல்லாமல் ஒரு அடிப்படை அனுபவத்தை வழங்கும் அதே வேளையில், ஜாவாஸ்கிரிப்ட் அம்சங்களுடன் பயனர் இடைமுகத்தை படிப்படியாக மேம்படுத்த இதைப் பயன்படுத்தலாம்.

import { useState, useEffect } from 'react';

function MyComponent() {
  const [isJavaScriptEnabled, setIsJavaScriptEnabled] = useState(true);

  useEffect(() => {
    // ஜாவாஸ்கிரிப்ட் இயக்கப்பட்டிருக்கிறதா என்று சரிபார்க்கவும். இது ஒரு எளிமைப்படுத்தப்பட்ட உதாரணம்.
    // ஒரு நிஜ உலகச் சூழலில், நீங்கள் ஒரு வலுவான முறையைப் பயன்படுத்த விரும்பலாம்.
    setIsJavaScriptEnabled(typeof window !== 'undefined');
  }, []);

  return (
    

      {isJavaScriptEnabled ? (
        
இந்த உள்ளடக்கம் ஜாவாஸ்கிரிப்ட் மூலம் காண்பிக்கப்படுகிறது.
      ) : (
        
இந்த உள்ளடக்கம் ஜாவாஸ்கிரிப்ட் இல்லாமல் காண்பிக்கப்படுகிறது.
      )}
    
  );
}

export default MyComponent;

இந்த உதாரணம் `useState` மற்றும் `useEffect` ஹூக்குகளைப் பயன்படுத்தி உலாவியில் ஜாவாஸ்கிரிப்ட் இயக்கப்பட்டிருக்கிறதா என்பதைச் சரிபார்க்கிறது. இதன் அடிப்படையில், அது வெவ்வேறு உள்ளடக்கத்தைக் காண்பிக்கிறது.

5. சொற்பொருள் HTML-ஐப் பயன்படுத்துதல்

சொற்பொருள் HTML கூறுகளைப் பயன்படுத்துவது அணுகல்தன்மை மற்றும் முற்போக்கு மேம்பாடு ஆகிய இரண்டிற்கும் முக்கியமானது. சொற்பொருள் HTML கூறுகள் உள்ளடக்கத்திற்கு அர்த்தத்தையும் கட்டமைப்பையும் வழங்குகின்றன, இது உதவித் தொழில்நுட்பங்கள் மற்றும் தேடுபொறி கிராலர்கள் புரிந்துகொள்வதை எளிதாக்குகிறது. எடுத்துக்காட்டாக, உங்கள் பக்க உள்ளடக்கத்தை கட்டமைக்க `