خواندن ۳ دقیقه·۱ سال پیش

خلاصه‌‎ای بر مفهوم Server-Side Rendering (SSR) در React

مفهوم SSR انقلابی به پا کرده است و باعث شده تا سرعت (User performance) و تجربه کاربری (User experience) در React بسیار بالا برود.

مفهوم آن بطور کلی اینگونه است که، در مفهوم قبلی آن یعنی Client-Side Rendering (بصورت خلاصه CSR) فایل HTML کوچک را مرورگر می‌گرفت و بقیه صفحه توسط JavaScript ساخته می‌شد و آن را پردازش می‌کرد. اما در SSR فایل اولیه HTML توسط server پردازش می‌شود و سپس به کلاینت مرورگر فرستاده می‌شود.

مزیت های SSR در React

بهینه شدن سرعت نمایش سایت

با پردازش اولیه فایل HTML سمت سرور باعث می‌شود اینکار باعث می‌شود کلاینت مرورگر به راحتی صفحه را نمایش دهد.

بهینه شدن برای موتورهای جستجو (SEO)

با اینکار موتورهای جستجو به راحتی می‌توانند این سایت ها را در مقابله با CSR دسته بندی کنند و به نمایش قرار دهند.

بهتر شدن تجربه کاربری

با افزایش سرعت نمایش سایت، مخصوصا برای دستگاه هایی با توان پردازشی پایین و شبکه هایی با سرعت کم، به تجربه‌ای عمیق و بهتر در رابطه با سایت کمک می‌کند.

تجربه بهتر در اشتراک گذاری در شبکه های اجتماعی

هنگامی که کاربران لینکی از اینگونه سایت ها را به اشتراک می‌گذارند، با پردازش سمت سرور محتوای سایت را به خوبی پیش نمایش می‌دهند.

قابل دسترس قرار دادن در دستگاه های کم توان

این قابلیت بطور کلی باعث می‌شود محتوا به خوبی در دستگاه های کم توان و یا ظرفیت پردازشی کم، به خوبی قابل دسترس باشند.

اعمال کردن این مفهوم در React

دیگه وقت عمل رسیده و تو این بخش می‌خواهیم SSR رو در اپلیکیشن های React اعمال کنیم.

1- مقدمات سرور Node.js را راه اندازی کردن: برای اینکار میتوان از framework محبوب Express استفاده کرد. البته گزینه های دیگری هم موجود است که می‌توان Hapi یا Koa را نام برد.

2- نصب پیش نیازها: در این بخش به نصب پیش نیازهای ذیل می‌پردازیم:react، react-dom، express و react-dom/server

npm install express react react-dom react-dom/server

3- ایجاد یک پایانه پردازش سمت سرور: از متد renderToString از کتابخانه react-dom/server برای پردازش component های React به HTML استفاده کنید:

// server.js
const express = require('express');
const React = require('react');
const { renderToString } = require('react-dom/server');
const App = require('./App'); // Your React component

const app = express();

app.get('/', (req, res) => {
  const html = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html lang=&quoten&quot>
    <head>
      <meta charset=&quotutf-8&quot>
      <title>SSR React App</title>
    </head>
    <body>
      <div id=&quotroot&quot>${html}</div>
      <script src=&quot/client.bundle.js&quot>
    </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is listening on port 3000');
});

4- پکیج بندی کردن کد سمت کلاینت: برای اینکار از ابزاری به نام Webpack استفاده می‌کنیم. با اینکار مرورگر این پکیج را بارگیری می‌کند و تعامل سمت کلاینت را برقرار می‌کند.

5- به نمایش قرار دادن برنامه: حالا به آخر رسیدیم با اجرا کردن برنامه و وارد آدرس http://localhost:3000 شدن می‌توانیم از دست رنج خود نهایت لذت را ببریم. :دی

در آخر هم توصیه می‌کنم حتما Next.js را که یک framework مبتنی بر React است و توسط شرکت Vercel توسعه یافته شده را حتما زیر نظر بگیرید زیرا که بصورت پایه SSR در آن تعبیه شده است.

امیدوارم از این مطلب خوشتون آمده باشد و این مقاله ترجمه‌ای از مقاله Abbas Ashraf Mughal از سایت medium است.

reactssrweb development

Arvin

شاید از این پست‌ها خوشتان بیاید