const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
  Loading...

2. استراتژی‌های کش کردن (Caching)

کش کردن سمت سرور: HTML رندر شده را روی سرور کش کنید تا بار روی سرور کاهش یابد و زمان پاسخ‌دهی بهبود یابد. کش کردن را در سطوح مختلف پیاده‌سازی کنید، مانند:

• کش کردن در سطح صفحه: کل خروجی HTML برای یک URL خاص را کش کنید.
• کش کردن قطعه (Fragment caching): کامپوننت‌ها یا بخش‌های جداگانه یک صفحه را کش کنید.
• کش کردن داده: داده‌های مورد استفاده برای رندر صفحه را کش کنید.

کش کردن سمت کلاینت: از کش مرورگر برای ذخیره دارایی‌های استاتیک مانند جاوا اسکریپت، CSS و تصاویر استفاده کنید. هدرهای کش مناسب را برای کنترل مدت زمان کش شدن این دارایی‌ها پیکربندی کنید.

CDN (شبکه تحویل محتوا): دارایی‌های استاتیک خود را در سراسر یک شبکه جهانی از سرورها توزیع کنید تا زمان بارگذاری برای کاربران در سراسر جهان بهبود یابد. CDNها همچنین می‌توانند محتوای پویا را کش کنند و بار روی سرور اصلی شما را بیشتر کاهش دهند.

مثال (استفاده از Redis برای کش کردن سمت سرور):

            
const redis = require('redis');
const client = redis.createClient();

async function renderPage(req, res) {
 const cacheKey = `page:${req.url}`;

 client.get(cacheKey, async (err, cachedHtml) => {
 if (err) {
 console.error(err);
 }

 if (cachedHtml) {
 res.send(cachedHtml);
 return;
 }

 const html = await generateHtml(req);

 client.setex(cacheKey, 3600, html); // Cache for 1 hour
 res.send(html);
 });
}

            

              
                Copy
              
            
          

3. بهینه‌سازی واکشی داده (Data Fetching)

واکشی موازی داده‌ها: داده‌ها را به صورت همزمان واکشی کنید تا زمان کلی بارگذاری داده‌ها کاهش یابد. از `Promise.all` یا تکنیک‌های مشابه برای واکشی چندین منبع داده به صورت موازی استفاده کنید.

دسته‌بندی داده‌ها (Data Batching): چندین درخواست داده را در یک درخواست واحد ترکیب کنید تا تعداد رفت و برگشت‌های شبکه کاهش یابد. این امر به ویژه هنگام واکشی داده‌های مرتبط از یک پایگاه داده یا API مفید است.

GraphQL: از GraphQL برای واکشی تنها داده‌هایی که برای یک کامپوننت خاص مورد نیاز است استفاده کنید. این کار از واکشی بیش از حد (over-fetching) جلوگیری کرده و حجم داده‌های منتقل شده از طریق شبکه را کاهش می‌دهد.

مثال (استفاده از `Promise.all`):

            
async function fetchData() {
 const [user, posts, comments] = await Promise.all([
 fetch('/api/user').then(res => res.json()),
 fetch('/api/posts').then(res => res.json()),
 fetch('/api/comments').then(res => res.json()),
 ]);

 return { user, posts, comments };
}

            

              
                Copy
              
            
          

4. اجرای کارآمد جاوا اسکریپت

به حداقل رساندن جاوا اسکریپت: مقدار کد جاوا اسکریپتی که باید دانلود و اجرا شود را کاهش دهید. کدهای استفاده نشده را حذف کنید، فایل‌های جاوا اسکریپت را فشرده (minify) کنید و از تقسیم کد برای بارگذاری تنها کدهای ضروری استفاده کنید.

بهینه‌سازی عملکرد جاوا اسکریپت: از الگوریتم‌ها و ساختارهای داده کارآمد برای به حداقل رساندن زمان اجرای کد جاوا اسکریپت استفاده کنید. کد خود را پروفایل کنید تا گلوگاه‌های عملکردی را شناسایی کرده و بر اساس آن بهینه‌سازی کنید.

Web Workers: وظایف محاسباتی سنگین را به وب ورکرها منتقل کنید تا از مسدود شدن رشته اصلی جلوگیری شود. این کار می‌تواند پاسخگویی رابط کاربری را بهبود بخشد.

Tree Shaking: کدهای استفاده نشده را از بسته‌های جاوا اسکریپت خود حذف کنید. Webpack و سایر باندلرها از tree shaking پشتیبانی می‌کنند که می‌تواند به طور قابل توجهی اندازه بسته‌های شما را کاهش دهد.

5. بهینه‌سازی هیدریشن (Hydration)

هیدریشن جزئی (Partial Hydration): فقط کامپوننت‌های تعاملی صفحه را هیدراته کنید و محتوای استاتیک را بدون هیدریشن رها کنید. این کار مقدار جاوا اسکریپتی که باید اجرا شود را کاهش داده و زمان بارگذاری اولیه را بهبود می‌بخشد.

هیدریشن تدریجی (Progressive Hydration): کامپوننت‌ها را با یک ترتیب مشخص، با شروع از مهم‌ترین کامپوننت‌ها، هیدراته کنید. این به کاربر اجازه می‌دهد تا زودتر با بخش‌های حیاتی صفحه تعامل داشته باشد.

حذف عدم تطابق در هیدریشن: اطمینان حاصل کنید که HTML رندر شده توسط سرور و جاوا اسکریپت سمت کلاینت برای جلوگیری از عدم تطابق هیدریشن، سازگار هستند. این عدم تطابق‌ها می‌توانند منجر به پرش تصویر یا خطا شوند و بر عملکرد تأثیر منفی بگذارند.

مثال (استفاده از `useDeferredValue` ری‌اکت برای هیدریشن تدریجی):

            
import { useState, useDeferredValue } from 'react';

function SearchInput() {
 const [query, setQuery] = useState('');
 const deferredQuery = useDeferredValue(query);

 return (
  

    setQuery(e.target.value)} />
   
  
 );
}

            

              
                Copy
              
            
          

6. بهینه‌سازی‌های مخصوص فریم‌ورک

هر فریم‌ورک جاوا اسکریپت بهینه‌سازی‌های خاص خود را برای SSR دارد. در اینجا چند مثال آورده شده است:

• ری‌اکت: از `ReactDOMServer.renderToString` برای رندر به HTML استاتیک استفاده کنید. از `React.memo` و `useMemo` برای مموایز کردن کامپوننت‌ها بهره ببرید.
• انگولار: از Angular Universal برای SSR استفاده کنید. تشخیص تغییرات (change detection) را بهینه کرده و از کامپایل Ahead-of-Time (AOT) استفاده کنید.
• ویو.جی‌اس: از Vue Server Renderer برای SSR استفاده کنید. رندر کامپوننت‌ها را بهینه کرده و از بارگذاری تنبل برای کامپوننت‌ها و مسیرها استفاده کنید.
• نکست.جی‌اس: نکست.جی‌اس یک فریم‌ورک ری‌اکت است که به طور خاص برای SSR طراحی شده است. این فریم‌ورک پشتیبانی داخلی برای SSR، تقسیم کد و مسیریابی را فراهم می‌کند.
• ناکست.جی‌اس: ناکست.جی‌اس یک فریم‌ورک ویو.جی‌اس است که به طور خاص برای SSR طراحی شده است. این فریم‌ورک پشتیبانی داخلی برای SSR، تقسیم کد و مسیریابی را فراهم می‌کند.

ابزارهای بهینه‌سازی SSR

ابزارهای متعددی می‌توانند به شما در بهینه‌سازی عملکرد SSR کمک کنند:

• Google PageSpeed Insights: عملکرد وب‌سایت خود را تجزیه و تحلیل کرده و زمینه‌های بهبود را شناسایی کنید.
• WebPageTest: عملکرد وب‌سایت خود را از مکان‌ها و شرایط شبکه مختلف آزمایش کنید.
• Lighthouse: یک ابزار متن‌باز و خودکار برای بهبود کیفیت صفحات وب. این ابزار دارای ممیزی برای عملکرد، دسترسی‌پذیری، برنامه‌های وب پیش‌رونده، سئو و موارد دیگر است.
• Webpack Bundle Analyzer: اندازه بسته‌های جاوا اسکریپت خود را به صورت بصری مشاهده کرده و فرصت‌های تقسیم کد را شناسایی کنید.
• New Relic, Datadog, Sentry: ابزارهای نظارت بر عملکرد برنامه برای شناسایی و تشخیص مشکلات عملکردی در برنامه شما، از جمله گلوگاه‌های رندر سمت سرور.

مثال‌های پیاده‌سازی SSR

در اینجا چند مثال از نحوه پیاده‌سازی SSR در فریم‌ورک‌های مختلف جاوا اسکریپت آورده شده است:

ری‌اکت با نکست.جی‌اس

نکست.جی‌اس با فراهم کردن پشتیبانی داخلی برای رندر سمت سرور، SSR را ساده می‌کند. صفحات در دایرکتوری `pages` به طور خودکار در سمت سرور رندر می‌شوند.

            
// pages/index.js

function HomePage(props) {
 return (
  

   
Welcome to my website!
   
Data from server: {props.data}
  
 );
}

export async function getServerSideProps(context) {
 const data = await fetchData();
 return {
  props: { data }, // will be passed to the page component as props
 };
}

export default HomePage;

            

              
                Copy
              
            
          

ویو.جی‌اس با ناکست.جی‌اس

ناکست.جی‌اس تجربه‌ای مشابه نکست.جی‌اس برای برنامه‌های ویو.جی‌اس فراهم می‌کند. این فریم‌ورک SSR را ساده کرده و پشتیبانی داخلی برای مسیریابی، تقسیم کد و موارد دیگر را ارائه می‌دهد.

            
// pages/index.vue





            

              
                Copy
              
            
          

انگولار با انگولار یونیورسال

انگولار یونیورسال رندر سمت سرور را برای برنامه‌های انگولار فعال می‌کند. این نیاز به پیکربندی بیشتری نسبت به نکست.جی‌اس یا ناکست.جی‌اس دارد، اما راه‌حل قدرتمندی برای SSR ارائه می‌دهد.

1. نصب انگولار یونیورسال: `ng add @nguniversal/express-engine`
2. پیکربندی سرور: فایل `server.ts` را برای مدیریت رندر سمت سرور تغییر دهید.
3. اجرای برنامه: `npm run dev:ssr`

نتیجه‌گیری

رندر سمت سرور یک تکنیک قدرتمند برای بهبود عملکرد و سئوی برنامه‌های وب مبتنی بر فریم‌ورک‌های جاوا اسکریپت است. با پیش‌رندر کردن HTML روی سرور، SSR می‌تواند به طور قابل توجهی زمان بارگذاری اولیه را کاهش دهد، دیده‌شدن در موتورهای جستجو را افزایش دهد و تجربه کاربری کلی را بهبود بخشد. در حالی که SSR پیچیدگی بیشتری به فرآیند توسعه اضافه می‌کند، مزایای آن اغلب بر چالش‌ها غلبه می‌کند. با پیاده‌سازی تکنیک‌های بهینه‌سازی که در این راهنما ذکر شد، توسعه‌دهندگان می‌توانند از قدرت SSR برای ایجاد برنامه‌های وب با عملکرد بالا و دوستدار سئو که تجربه کاربری برتری را در مقیاس جهانی ارائه می‌دهند، بهره‌مند شوند. این نکات را نه به عنوان یک راه‌حل یک‌باره، بلکه به عنوان بخشی از یک فرآیند مداوم در نظر بگیرید. وب دائماً در حال تحول است و استراتژی‌های بهینه‌سازی شما نیز باید تطبیق پیدا کنند.

به یاد داشته باشید که برنامه خود را به طور منظم پروفایل کنید و تکنیک‌های بهینه‌سازی خود را در صورت نیاز تنظیم کنید. همچنین به خاطر داشته باشید که بهترین رویکرد برای SSR بسته به نیازهای خاص برنامه شما متفاوت خواهد بود. با تکنیک‌های مختلف آزمایش کنید و آنهایی را که برای وضعیت شما بهترین کارایی را دارند، پیدا کنید. از A/B تست کردن بهینه‌سازی‌های مختلف برای اندازه‌گیری تأثیر آنها بر عملکرد و تجربه کاربری نترسید. و در نهایت، با آخرین بهترین شیوه‌ها در SSR و بهینه‌سازی عملکرد فرانت‌اند به‌روز بمانید. چشم‌انداز توسعه وب دائماً در حال تغییر است و مهم است که به یادگیری و سازگاری با فناوری‌ها و تکنیک‌های جدید ادامه دهید.