ரியாக்ட் experimental_postpone வள மேலாண்மை: தாமதமான வள கையாளுதல் எளிமையாக்கப்பட்டது | MLOG | MLOG
தமிழ்
சிக்கலான பயன்பாடுகளில் செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்த, React-இன் experimental_postpone API-க்கான ஒரு விரிவான வழிகாட்டி.
ரியாக்ட் experimental_postpone வள மேலாண்மை: தாமதமான வள கையாளுதல் எளிமையாக்கப்பட்டது
ரியாக்ட் தொடர்ந்து வளர்ந்து வருகிறது, மேலும் மிகவும் அற்புதமான (இன்னும் சோதனை நிலையில் உள்ள) சேர்த்தல்களில் ஒன்று experimental_postpone API ஆகும், இது சிக்கலான வள மேலாண்மை சூழ்நிலைகளைக் கையாள்வதற்கும் பயன்பாட்டு செயல்திறனை மேம்படுத்துவதற்கும் வடிவமைக்கப்பட்டுள்ளது. இந்த வலைப்பதிவு experimental_postpone ஐப் பயன்படுத்தி தாமதமான வள கையாளுதலின் நுணுக்கங்களை ஆராய்கிறது, இது தங்கள் ரியாக்ட் பயன்பாடுகளை மேம்படுத்த விரும்பும் டெவலப்பர்களுக்கு ஒரு விரிவான வழிகாட்டியை வழங்குகிறது.
தாமதமான வள கையாளுதலைப் புரிந்துகொள்ளுதல்
நவீன வலைப் பயன்பாடுகளில், கூறுகள் பெரும்பாலும் API களில் இருந்து தரவு, படங்கள் அல்லது சிக்கலான கணக்கீடுகள் போன்ற வெளிப்புற வளங்களைச் சார்ந்துள்ளன. இந்த வளங்களை ஒத்திசைவாக ஏற்றுவது பிரதான த்ரெட்டைத் தடுக்கலாம், இது மெதுவான நெட்வொர்க்குகள் அல்லது சாதனங்களில் குறிப்பாக மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும். தாமதமான வள கையாளுதல், சாராம்சத்தில், குறைந்த முக்கியத்துவம் வாய்ந்த வளங்களை ஏற்றுவதை ஒத்திவைத்து, உங்கள் பயன்பாட்டின் ஆரம்ப ரெண்டரிங்கிற்கு முன்னுரிமை அளிக்க உங்களை அனுமதிக்கிறது. இது வேகமான உணரப்பட்ட செயல்திறனையும் மேலும் பதிலளிக்கக்கூடிய பயனர் இடைமுகத்தையும் செயல்படுத்துகிறது.
ஒரு பெரிய இ-காமர்ஸ் தளத்தை நினைத்துப் பாருங்கள். பயனர்கள் தயாரிப்பு பட்டியலை விரைவாகப் பார்க்க விரும்புகிறார்கள். தயாரிப்புகளின் படங்கள் முக்கியமானவை என்றாலும், தயாரிப்பு பெயர்கள் மற்றும் விலைகளின் ஆரம்ப காட்சியினைத் தடுக்காமல் பின்னர் ஏற்றப்படலாம். இதுவே தாமதமான வள கையாளுதலின் பின்னணியில் உள்ள முக்கிய யோசனையாகும்.
experimental_postpone API என்பது ரியாக்டின் ஒரு அம்சமாகும் (தற்போது சோதனை நிலையில் உள்ளது மற்றும் ஒப்புதல் தேவைப்படுகிறது), இது குறியீட்டின் செயலாக்கத்தையும் வளங்களின் நுகர்வையும் தாமதப்படுத்துவதற்கான ஒரு வழிமுறையை வழங்குகிறது. இது ரியாக்ட் சஸ்பென்ஸுடன் இணைந்து ஏற்றுதல் நிலைகளை அழகாகக் கையாளவும், முக்கிய பயன்பாட்டு உள்ளடக்கத்தின் ரெண்டரிங்கைத் தடுப்பதைத் தவிர்க்கவும் செயல்படுகிறது. இது ஒரு Promise-இன் தீர்வை தாமதப்படுத்த அனுமதிக்கிறது, இது குறைந்த முன்னுரிமை வளங்களுக்கு பயனுள்ளதாக இருக்கும்.
experimental_postpone எவ்வாறு செயல்படுகிறது
experimental_postpone செயல்பாடு அடிப்படையில் ஒரு Promise-ஐ உள்ளடக்கி, அதன் தீர்மானத்தை "தாமதப்படுத்த" உங்களை அனுமதிக்கிறது. ரியாக்ட் ஆரம்பத்தில் Promise தீர்க்கப்படும் வரை காத்திருக்காமல் கூற்றை ரெண்டர் செய்யும். Promise இறுதியில் தீர்க்கப்படும்போது, ரியாக்ட் புதுப்பிக்கப்பட்ட தரவுடன் கூற்றை மீண்டும் ரெண்டர் செய்யும்.
செயல்முறையின் எளிமைப்படுத்தப்பட்ட விளக்கம் இங்கே:
பின்னர் ஏற்றக்கூடிய ஒரு வளத்தை (எ.கா., ஒரு API அழைப்பு) நீங்கள் அடையாளம் காண்கிறீர்கள்.
அந்த வளத்தை பெறும் Promise-ஐ experimental_postpone உடன் இணைக்கிறீர்கள்.
ரியாக்ட் ஆரம்பத்தில் ஒரு மாற்று UI (சஸ்பென்ஸ்) ஐப் பயன்படுத்தி கூற்றை ரெண்டர் செய்கிறது.
தாமதப்படுத்தப்பட்ட Promise தீர்க்கப்படும்போது, ரியாக்ட் பெறப்பட்ட தரவுடன் கூற்றை மீண்டும் ரெண்டர் செய்கிறது.
experimental_postpone பயன்பாட்டின் நடைமுறை எடுத்துக்காட்டுகள்
எடுத்துக்காட்டு 1: படங்களை தாமதமாக ஏற்றுதல்
ஒவ்வொன்றிலும் ஒரு படத்துடன் தயாரிப்புகளின் பட்டியலைக் காட்டும் ஒரு கூற்றைக் கவனியுங்கள். ஆரம்ப ரெண்டரிங் நேரத்தை மேம்படுத்த, தயாரிப்புப் படங்களை ஏற்றுவதை நாம் தாமதப்படுத்தலாம்.
import React, { Suspense, experimental_postpone } from 'react';
function ProductImage({ src, alt }) {
const imagePromise = new Promise((resolve) => {
const img = new Image();
img.src = src;
img.onload = () => resolve(src);
img.onerror = () => resolve('/placeholder.png'); // Use a placeholder on error
});
const delayedImageSrc = experimental_postpone(imagePromise, 'Loading image...');
return ;
}
function ProductList() {
const products = [
{ id: 1, name: 'Product A', imageUrl: 'https://example.com/image1.jpg' },
{ id: 2, name: 'Product B', imageUrl: 'https://example.com/image2.jpg' },
// ... more products
];
return (
{products.map((product) => (
{product.name}
Loading image...
}>
))}
);
}
export default ProductList;
இந்த எடுத்துக்காட்டில், ProductImage கூறு, படத்தின் ஏற்றுதலை தாமதப்படுத்த experimental_postpone ஐப் பயன்படுத்துகிறது. Suspense கூறு படம் பெறப்படும்போது ஒரு மாற்று UI (ஒரு ஏற்றுதல் செய்தி) ஐ வழங்குகிறது. இன்னும் கூடுதலான மேம்படுத்தலுக்காக, loading="lazy" பண்புக்கூறு img குறிச்சொல்லில் சேர்க்கப்பட்டுள்ளது. இது உலாவியிடம், படம் பார்வைப் பகுதிக்கு அருகில் வரும்போது மட்டுமே ஏற்றுமாறு கூறுகிறது.
எடுத்துக்காட்டு 2: முக்கியமற்ற தரவு பெறுதலை தாமதப்படுத்துதல்
முக்கியமான அளவீடுகளையும், வரலாற்றுப் போக்குகள் போன்ற சில முக்கியத்துவம் குறைந்த தரவுகளையும் காண்பிக்கும் ஒரு டாஷ்போர்டு பயன்பாட்டை கற்பனை செய்து பாருங்கள். வரலாற்றுப் போக்குத் தரவுகளைப் பெறுவதை நாம் தாமதப்படுத்தலாம்.
import React, { Suspense, useState, useEffect, experimental_postpone } from 'react';
function HistoricalTrends() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
const response = await fetch('/api/historical-trends');
const jsonData = await response.json();
return jsonData; // Return the data for experimental_postpone
};
// Wrap the data fetching promise with experimental_postpone
const delayedData = experimental_postpone(fetchData(), 'Loading historical trends...');
delayedData.then(resolvedData => setData(resolvedData));
}, []);
if (!data) {
return
Loading historical trends...
;
}
return (
Historical Trends
{/* Render the historical trend data */}
Data from {data.startDate} to {data.endDate}
);
}
function Dashboard() {
return (
Dashboard
{/* Display critical metrics */}
Critical Metric: 1234
Loading historical trends...
}>
);
}
export default Dashboard;
இந்த எடுத்துக்காட்டில், HistoricalTrends கூறு ஒரு API முனையத்திலிருந்து தரவைப் பெறுகிறது மற்றும் பெறுதல் செயல்முறையை தாமதப்படுத்த experimental_postpone ஐப் பயன்படுத்துகிறது. Dashboard கூறு, வரலாற்றுப் போக்குத் தரவு ஏற்றப்படும்போது ஒரு மாற்று UI ஐக் காண்பிக்க Suspense ஐப் பயன்படுத்துகிறது.
எடுத்துக்காட்டு 3: சிக்கலான கணக்கீடுகளை தாமதப்படுத்துதல்
ஒரு குறிப்பிட்ட கூற்றை ரெண்டர் செய்ய சிக்கலான கணக்கீடுகள் தேவைப்படும் ஒரு பயன்பாட்டைக் கவனியுங்கள். இந்த கணக்கீடுகள் ஆரம்ப பயனர் அனுபவத்திற்கு முக்கியமானதாக இல்லாவிட்டால், அவற்றை தாமதப்படுத்தலாம்.
import React, { Suspense, useState, useEffect, experimental_postpone } from 'react';
function ComplexComponent() {
const [result, setResult] = useState(null);
useEffect(() => {
const performComplexCalculation = async () => {
// Simulate a complex calculation
await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate 2 seconds of processing
const calculatedValue = Math.random() * 1000;
return calculatedValue; // Return calculated value for experimental_postpone
};
const delayedResult = experimental_postpone(performComplexCalculation(), 'Performing complex calculations...');
delayedResult.then(value => setResult(value));
}, []);
if (!result) {
return
Performing complex calculations...
;
}
return (
Complex Component
Result: {result.toFixed(2)}
);
}
function App() {
return (
My App
Some initial content.
Loading Complex Component...
}>
);
}
export default App;
இந்த எடுத்துக்காட்டில், ComplexComponent ஒரு நீண்ட நேரம் இயங்கும் கணக்கீட்டை உருவகப்படுத்துகிறது. experimental_postpone இந்த கணக்கீட்டை தாமதப்படுத்துகிறது, இது பயன்பாட்டின் மற்ற பகுதிகளை விரைவாக ரெண்டர் செய்ய அனுமதிக்கிறது. சஸ்பென்ஸ் மாற்று UI-க்குள் ஒரு ஏற்றுதல் செய்தி காட்டப்படுகிறது.
experimental_postpone பயன்படுத்துவதன் நன்மைகள்
மேம்பட்ட உணரப்பட்ட செயல்திறன்: குறைந்த முக்கியத்துவம் வாய்ந்த வளங்களை தாமதப்படுத்துவதன் மூலம், ஆரம்ப ரெண்டரிங் நேரத்தை கணிசமாகக் குறைக்கலாம், இது வேகமான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்குகிறது.
பிரதான த்ரெட்டைத் தடுப்பது குறைக்கப்பட்டது: தாமதமான வள கையாளுதல் நீண்ட நேரம் இயங்கும் பணிகளை பிரதான த்ரெட்டைத் தடுப்பதைத் தடுக்கிறது, இது மென்மையான தொடர்புகளையும் அனிமேஷன்களையும் உறுதி செய்கிறது.
மேம்படுத்தப்பட்ட பயனர் அனுபவம்: சில தரவுகள் இன்னும் ஏற்றப்பட்டுக் கொண்டிருந்தாலும், பயனர்கள் விரைவில் பயன்பாட்டுடன் தொடர்பு கொள்ள ஆரம்பிக்கலாம்.
முன்னுரிமை அளிக்கப்பட்ட ரெண்டரிங்: மிக முக்கியமான கூறுகளை முதலில் ரெண்டர் செய்வதில் கவனம் செலுத்த அனுமதிக்கிறது, இது முக்கிய பயனர் பயணங்களுக்கு அவசியமானது.
கருத்தில் கொள்ள வேண்டியவை மற்றும் வரம்புகள்
சோதனை நிலை:experimental_postpone API தற்போது சோதனை நிலையில் உள்ளது, எனவே அதன் நடத்தை மற்றும் API எதிர்கால ரியாக்ட் பதிப்புகளில் மாறக்கூடும். உற்பத்திச் சூழல்களில் எச்சரிக்கையுடன் பயன்படுத்தவும், சாத்தியமான புதுப்பிப்புகளுக்குத் தயாராக இருக்கவும்.
சிக்கலானது: தாமதமான வள கையாளுதலைச் செயல்படுத்துவது உங்கள் குறியீட்டிற்கு சிக்கலைச் சேர்க்கலாம், குறிப்பாக பல ஒன்றையொன்று சார்ந்த வளங்களைக் கையாளும்போது.
பிழை கையாளுதல்: தாமதமான வளங்களைப் பயன்படுத்தும்போது சரியான பிழை கையாளுதல் முக்கியமானது. பிழைகளை அழகாகக் கையாளவும், பயனருக்குத் தகவலறிந்த கருத்துக்களை வழங்கவும் உங்களிடம் வழிமுறைகள் இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். தாமதமான வள ஏற்றுதலின் ஒத்திசைவற்ற தன்மை காரணமாக இது மிகவும் முக்கியமானது.
ஒப்புதல் தேவை: இந்த API தற்போது ஒரு கொடியின் பின்னால் உள்ளது. உங்கள் ரியாக்ட் உள்ளமைவில் அதை நீங்கள் இயக்க வேண்டும்.
experimental_postpone பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்
முக்கியமற்ற வளங்களை அடையாளம் காணுங்கள்: ஆரம்ப பயனர் அனுபவத்தை எதிர்மறையாக பாதிக்காமல் தாமதப்படுத்தக்கூடிய வளங்களை அடையாளம் காண உங்கள் பயன்பாட்டை கவனமாக பகுப்பாய்வு செய்யுங்கள்.
சஸ்பென்ஸை திறம்படப் பயன்படுத்துங்கள்: தாமதமான வளங்கள் ஏற்றப்படும்போது அர்த்தமுள்ள மாற்று UI-க்களை வழங்க ரியாக்ட் சஸ்பென்ஸைப் பயன்படுத்தவும். பொதுவான ஏற்றுதல் ஸ்பின்னர்களைத் தவிர்க்கவும்; அதற்கு பதிலாக, இடம் நிரப்பிகள் அல்லது மதிப்பிடப்பட்ட உள்ளடக்கத்தைக் காட்டுங்கள்.
வலுவான பிழை கையாளுதலைச் செயல்படுத்தவும்: வள ஏற்றுதலின் போது ஏற்படும் தோல்விகளை அழகாகக் கையாள விரிவான பிழை கையாளுதலைச் செயல்படுத்தவும். பயனர் நட்பு பிழைச் செய்திகளைக் காட்டி, செயல்பாட்டை மீண்டும் முயற்சிக்க விருப்பங்களை வழங்கவும்.
செயல்திறனைக் கண்காணிக்கவும்: தாமதமான வள கையாளுதல் உண்மையில் செயல்திறனை மேம்படுத்துகிறதா மற்றும் புதிய தடைகளை அறிமுகப்படுத்தவில்லையா என்பதை உறுதிப்படுத்த உங்கள் பயன்பாட்டின் செயல்திறனைக் கண்காணிக்கவும். செயல்திறன் சிக்கல்களை அடையாளம் காண ரியாக்ட் ப்ரொஃபைலர் மற்றும் உலாவி டெவலப்பர் கருவிகள் போன்ற கருவிகளைப் பயன்படுத்தவும்.
முக்கிய உள்ளடக்கத்திற்கு முன்னுரிமை அளியுங்கள்: பயனருக்குத் தேவையான முக்கிய உள்ளடக்கம் கூடிய விரைவில் கிடைப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள். மற்ற அனைத்தையும் தாமதப்படுத்துங்கள்.
முற்போக்கான மேம்பாடு: தாமதமான வளங்கள் ஏற்றத் தவறினாலும், பயன்பாடு ஒரு செயல்பாட்டு அனுபவத்தை வழங்குவதை உறுதிப்படுத்திக் கொள்ளுங்கள். கிடைக்காத வளங்களை அழகாகக் கையாள ஒரு மாற்று வழிமுறையைச் செயல்படுத்தவும்.
experimental_postpone-ஐ இயக்குதல்
experimental_postpone சோதனை நிலையில் இருப்பதால், நீங்கள் அதை வெளிப்படையாக இயக்க வேண்டும். சரியான முறை மாறக்கூடும், ஆனால் தற்போது உங்கள் ரியாக்ட் உள்ளமைவில் சோதனை அம்சங்களை இயக்குவதை உள்ளடக்கியது. மிகவும் புதுப்பித்த வழிமுறைகளுக்கு ரியாக்ட் ஆவணத்தைப் பார்க்கவும்.
experimental_postpone மற்றும் ரியாக்ட் சர்வர் கூறுகள் (RSC)
experimental_postpone ரியாக்ட் சர்வர் கூறுகளுடன் இணைந்து செயல்பட சிறந்த ஆற்றலைக் கொண்டுள்ளது. RSC-இல், சில கூறுகள் முற்றிலும் சர்வரில் ரெண்டர் ஆகின்றன. இதை experimental_postpone உடன் இணைப்பது, UI-இன் முக்கியத்துவம் குறைந்த பகுதிகளின் கிளையன்ட் பக்க ரெண்டரிங்கை தாமதப்படுத்த அனுமதிக்கிறது, இது இன்னும் வேகமான ஆரம்ப பக்க ஏற்றங்களுக்கு வழிவகுக்கிறது.
RSC உடன் ரெண்டர் செய்யப்பட்ட ஒரு வலைப்பதிவை கற்பனை செய்து பாருங்கள். முக்கிய உள்ளடக்கம் (தலைப்பு, ஆசிரியர், உள்ளடக்கம்) சர்வரில் ரெண்டர் ஆகிறது. கருத்துகள் பகுதி, பின்னர் பெறப்பட்டு ரெண்டர் செய்யப்படலாம், அதை experimental_postpone உடன் இணைக்கலாம். இது பயனர் முக்கிய உள்ளடக்கத்தை உடனடியாகப் பார்க்க அனுமதிக்கிறது, மேலும் கருத்துகள் ஒத்திசைவற்ற முறையில் ஏற்றப்படுகின்றன.
நிஜ-உலக பயன்பாட்டு வழக்குகள்
இ-காமர்ஸ் தயாரிப்பு பட்டியல்கள்: ஆரம்ப உலாவுதலுக்கு அவசியமில்லாத தயாரிப்புப் படங்கள், விளக்கங்கள் அல்லது மதிப்புரைகளை ஏற்றுவதை தாமதப்படுத்துங்கள்.
சமூக ஊடக ஊட்டங்கள்: பழைய இடுகைகளில் கருத்துகள், விருப்பங்கள் அல்லது பகிர்வுகளை ஏற்றுவதை தாமதப்படுத்துங்கள்.
டாஷ்போர்டு பயன்பாடுகள்: உடனடியாக முக்கியமில்லாத வரலாற்றுத் தரவு, விளக்கப்படங்கள் அல்லது அறிக்கைகளை ஏற்றுவதை தாமதப்படுத்துங்கள்.
உள்ளடக்கம் நிறைந்த வலைத்தளங்கள்: தொடர்புடைய கட்டுரைகள் அல்லது விளம்பரப் பதாகைகள் போன்ற குறைந்த முக்கியத்துவம் வாய்ந்த கூறுகளை ஏற்றுவதை தாமதப்படுத்துங்கள்.
சர்வதேசமயமாக்கல் (i18n): மொழி சார்ந்த வளங்களை பயனருக்கு உண்மையில் தேவைப்படும் வரை ஏற்றுவதை தாமதப்படுத்துங்கள். இது உலகளாவிய பார்வையாளர்களைக் கொண்ட வலைத்தளங்களுக்கு மிகவும் பயனுள்ளதாக இருக்கும், அங்கு அனைத்து மொழி பேக்குகளையும் முன்கூட்டியே ஏற்றுவது திறனற்றதாக இருக்கும்.
முடிவுரை
ரியாக்டின் experimental_postpone API தாமதமான வள கையாளுதலுக்கான ஒரு சக்திவாய்ந்த வழிமுறையை வழங்குகிறது, இது டெவலப்பர்களை பயன்பாட்டு செயல்திறனை மேம்படுத்தவும் பயனர் அனுபவத்தை மேம்படுத்தவும் உதவுகிறது. இன்னும் சோதனை நிலையில் இருந்தாலும், ஒத்திசைவற்ற தரவுப் பெறுதல், பட ஏற்றுதல் மற்றும் சிக்கலான கணக்கீடுகள் சம்பந்தப்பட்ட சிக்கலான சூழ்நிலைகளில், குறிப்பாக அதிக பதிலளிக்கக்கூடிய மற்றும் திறமையான ரியாக்ட் பயன்பாடுகளை உருவாக்குவதில் இது குறிப்பிடத்தக்க வாக்குறுதியைக் கொண்டுள்ளது. முக்கியமற்ற வளங்களை கவனமாக அடையாளம் கண்டு, ரியாக்ட் சஸ்பென்ஸைப் பயன்படுத்தி, மற்றும் வலுவான பிழை கையாளுதலைச் செயல்படுத்துவதன் மூலம், டெவலப்பர்கள் உண்மையிலேயே ஈர்க்கக்கூடிய மற்றும் செயல்திறன் மிக்க வலைப் பயன்பாடுகளை உருவாக்க experimental_postpone-இன் முழு திறனையும் பயன்படுத்தலாம். ரியாக்டின் வளர்ந்து வரும் ஆவணங்களுடன் புதுப்பித்த நிலையில் இருக்கவும், இந்த API-ஐ உங்கள் திட்டங்களில் இணைக்கும்போது அதன் சோதனைத் தன்மையைக் கவனத்தில் கொள்ளவும் நினைவில் கொள்ளுங்கள். உற்பத்தியில் செயல்பாட்டை இயக்க/முடக்க ஃபீச்சர் ஃபிளாக்குகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
ரியாக்ட் தொடர்ந்து வளர்ச்சியடைந்து வருவதால், experimental_postpone போன்ற அம்சங்கள் உலகளாவிய பார்வையாளர்களுக்காக செயல்திறன் மிக்க மற்றும் பயனர் நட்பு வலைப் பயன்பாடுகளை உருவாக்குவதில் பெருகிய முறையில் முக்கிய பங்கு வகிக்கும். பல்வேறு நெட்வொர்க் நிலைமைகள் மற்றும் சாதனங்களில் உள்ள பயனர்களுக்கு சிறந்த அனுபவத்தை வழங்க விரும்பும் டெவலப்பர்களுக்கு வள ஏற்றுதலுக்கு முன்னுரிமை அளிக்கும் மற்றும் தாமதப்படுத்தும் திறன் ஒரு முக்கியமான கருவியாகும். தொடர்ந்து பரிசோதனை செய்யுங்கள், தொடர்ந்து கற்றுக்கொள்ளுங்கள், அற்புதமான விஷயங்களை தொடர்ந்து உருவாக்குங்கள்!
;
}
function ProductList() {
const products = [
{ id: 1, name: 'Product A', imageUrl: 'https://example.com/image1.jpg' },
{ id: 2, name: 'Product B', imageUrl: 'https://example.com/image2.jpg' },
// ... more products
];
return (