رندر سمت سرور را برای React App فعال کنید

تاریخ انتشار : جمعه 17 تیر 1401

وبلاگ

رندر سمت سرور را برای React App فعال کنید

فعال کردن رندر سمت سرور برای React App یکی از تکنیک های محبوب برای رندر کردن برنامه های وب تک صفحه ای (به عنوان مثال SPA) است. در فرآیند ذکر شده صفحه مورد نظر پس از رندر کامل برای کاربر ارسال می شود. به این ترتیب می توانیم اجزای پویا را در قالب کدهای HTML ایستا ارائه کنیم. در این مقاله نحوه رندر سمت سرور برای React App را به صورت مرحله به مرحله یاد می گیریم.

آموزش نحوه فعال کردن رندر سمت سرور یا SSR

مکانیزم کلی برای فعال کردن رندر سمت سرور برای React App این است که ابتدا برنامه React را با استفاده از دستور create-react-app مقداردهی اولیه می کنیم. در مرحله بعد، چند تغییر ساده در پروژه ایجاد می کنیم تا رندر سمت سرور را برای آن فعال کنیم. در پایان، ما یک پروژه فعال خواهیم داشت که برنامه React سمت کلاینت و اپلیکیشن Express سمت سرور را اجرا می کند.

نکته: قبل از شروع این مراحل، باید Node.js را به صورت محلی نصب کرده باشید. همچنین لازم به ذکر است که این مراحل برای نسخه های زیر تست و تایید شده است:

Node v16.13.1
npm نسخه 8.1.2
react نسخه 17.0.2
babel/core نسخه 7.16.0@
وب پک نسخه 4.44.2
express v4.17.1
nodemon نسخه 2.0.15
npm-run-all v4.1.5

رندر سمت سرور چیست؟

چگونه رندر سمت سرور را در React فعال کنم؟

مرحله 1. برنامه React را بسازید

به عنوان اولین گام برای رندر سمت سرور برای برنامه React، از npx برای راه‌اندازی یک برنامه جدید React (با استفاده از آخرین نسخه Create React App) استفاده می‌کنیم. در اینجا ما برنامه را با نام react-ssr-example فراخوانی می کنیم:

npx create-react-app react-ssr-example

سپس به دایرکتوری جدید بروید:

cd react-ssr-example

در نهایت، ما این برنامه جدید را در سمت کاربر اجرا می کنیم تا روند نصب آن را تأیید کنیم:

npm start

با این کار، یک نمونه برنامه React را خواهید دید که در مرورگر خود باز می شود.

برای آموزش کامل نحوه پیاده سازی Hook در React مقاله زیر را مطالعه کنید.

هوک در React چیست؟

مرحله 2. اصلاح اجزای برنامه

حالا یک کامپوننت جدید ایجاد می کنیم در پوشه src:

nano src/Home.js

سپس کد زیر را به فایل Home.js اضافه کنید:

function Home(props) {
  return <h1>Hello {props.name}!</h1>;
};

export default Home;

این یک عنوان ایجاد می کند

که پیام Hello را همراه با نامی خاص نمایش می دهد. حالا باید رندر کنیم در جزء ; بنابراین، فایل App.js را در پوشه src باز کنید:

nano src/App.js

سپس کدهای موجود را با کدهای جدید زیر جایگزین می کنیم:

import Home from './Home';

function App() {
  return <Home name="Sammy"/>;
}

export default App;

این کدها یک نام (در اینجا Sammy) به کامپوننت می دهند ; بنابراین پیامی مانند این نمایش داده می شود:

Output
"Hello Sammy!"

در مرحله بعد، در فایل index.js برنامه، به جای رندر، از روش هیدرات ReactDOM استفاده می کنیم تا به رندر DOM نشان دهیم که می خواهیم پس از رندر سمت سرور، برنامه را آبرسانی کنیم. بنابراین، فایل index.js را در پوشه src باز کنید:

nano src/index.js

سپس محتویات این فایل را با کدهای زیر جایگزین کنید:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.hydrate(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

با این کار پیکربندی سمت کلاینت شروع می شود و می توانیم به تنظیمات سمت سرور برویم.

Ssr در React

ساخت اپلیکیشن و پیکربندی اجزای آن

مرحله 3. یک سرور Express ایجاد کنید

اکنون، برای ادامه فعال کردن رندر سمت سرور برای React، باید سروری را برای ارسال نسخه رندر شده تنظیم کنیم. برای این کار از Express برای سرور استفاده می کنیم.

توجه: بسته react-scripts که متعلق به برنامه create-react-app است، نسخه ای از Express را به عنوان پیش نیاز webpack-dev-server نصب می کند. در این آموزش این مرحله را طی می کنیم.

ما یک پوشه سرور جدید در پوشه ریشه پروژه ایجاد می کنیم:

mkdir server

سپس، در پوشه سرور، یک فایل index.js جدید ایجاد می کنیم که حاوی کدهای سرور Express است:

nano server/index.js

اکنون چند ثابت تعریف می کنیم و واردات لازم را اضافه می کنیم:

import path from 'path';
import fs from 'fs';

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import express from 'express';

import App from '../src/App';

const PORT = process.env.PORT || 3006;
const app = express();

مرحله 4. اجزای برنامه را رندر کنید

در مرحله بعد کد زیر را به کد سرور مربوط به مدیریت خطا اضافه می کنیم:

// ...

app.get('/', (req, res) => {
  const app = ReactDOMServer.renderToString(<App />);
  const indexFile = path.resolve('./build/index.html');

  fs.readFile(indexFile, 'utf8', (err, data) => {
    if (err) {
      console.error('Something went wrong:', err);
      return res.status(500).send('Oops, better luck next time!');
    }

    return res.send(
      data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
    );
  });
});

app.use(express.static('./build'));

app.listen(PORT, () => {
  console.log(`Server is listening on port ${PORT}`);
});

شایان ذکر است امکان واردات کامپوننت وجود دارد از پوشه برنامه سرویس گیرنده سرور.

سه چیز در کد بالا اتفاق می افتد:

Express برای ارائه محتویات پوشه ساخت به عنوان فایل های ثابت استفاده می شود.
renderToString، که به ReactDOMServer متصل است، برای ارائه برنامه به عنوان یک رشته HTML ایستا استفاده می شود.
فایل static index.html توسط برنامه build client خوانده می شود. سپس محتوای ثابت برنامه به داخل برنامه تزریق می شود
با یک شناسه به نام root (این به عنوان پاسخ درخواست ارسال می شود).

React ssr چیست؟

چگونه می توانم پیش نمایش اجزای برنامه را مشاهده کنم؟

مرحله 5. Webpack و Babel را پیکربندی کنید

در این مرحله رندر سمت سرور برای React App، باید کدهای سمت سرور را با استفاده از Webpack و Babel دسته بندی و ترانسپایل کنیم تا این کدهای سمت سرور کار کنند.

توجه: برای ادامه باید برنامه babel-core، babel-preset-env و babel-preset-react-app را نصب کرده باشید. این بسته ها از لحظه نصب به جای نسخه آرشیو و مونورپو استفاده می شوند.

علاوه بر این، اسکریپت‌های Create-react-app نصب این بسته‌ها را انجام می‌دهند: بسته وب، بسته وب، بسته-نود-اکسترنال، @babel/core، @babel-loader، @babel/preset-env، و @babel/preset – واکنش نشان می دهم. بنابراین از آموزش این مرحله می گذریم و به مراحل بعدی می رویم.

اکنون فایل پیکربندی جدید Babel را در پوشه اصلی پروژه ایجاد می کنیم:

nano .babelrc.json

سپس تنظیمات env و react-app را اضافه می کنیم:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

نکته: اکنون از فایل babelrc. (بدون پسوند json.)؛ اما این روش فقط در بابل 6 پاسخگو است و دیگر در بابل 7 استفاده نمی شود.

در مرحله بعد، یک پیکربندی بسته وب برای سرور ایجاد می کنیم که از Babel Loader برای ترانس کامپایل کد استفاده می کند. برای شروع، فایل webpack.server.js را در پوشه اصلی پروژه ایجاد می کنیم:

nano webpack.server.js

سپس تنظیمات زیر را به فایل webpack.server.js اضافه می کنیم:

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './server/index.js',
  target: 'node',
  externals: [nodeExternals()],
  output: {
    path: path.resolve('server-build'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader'
      }
    ]
  }
};

با این پیکربندی، بسته سرور منتقل شده به پوشه ساخت سرور و فایلی به نام index.js خروجی می شود. با استفاده از گره “target:” و عناصر خارجی: [nodeExternals()] همچنین از webpack-node-externals که فایل‌های node_modules را حذف می‌کند، بخش مهمی از این فرآیند است (سرور به این فایل دسترسی مستقیم دارد).

آموزش sr در راکت

آموزش نحوه اجرای React سمت سرور

مرحله 6. اسکریپت های npm را پیکربندی کنید

فایل package.json را دوباره ویرایش کنید و اسکریپت های کمکی npm زیر را به آن اضافه کنید:

nano package.json

سپس، اسکریپت‌های dev:build-server و dev:start و dev را به فایل package.json اضافه می‌کنیم تا برنامه SSR را بسازیم:

"scripts": {
  "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
  "dev:start": "nodemon ./server-build/index.js",
  "dev": "npm-run-all --parallel build dev:*",
  // ...
},

اسکریپت dev:build-server یک محیط توسعه را فراهم می کند و بسته وب را با فایل پیکربندی که قبلا ایجاد کرده ایم فراخوانی می کند. اسکریپت dev همچنین npm-run-all را فراخوانی می کند تا کد ساخت و تمام کدهایی که با *dev: شروع می شوند (شامل dev:build-server و dev:start) به صورت موازی اجرا شوند. از nodemon نیز برای راه اندازی مجدد سرور پس از ایجاد تغییرات استفاده می شود.

توجه: نیازی به تغییر راه اندازی، ساخت، آزمایش و استخراج اسکریپت هایی که از قبل در فایل package.json هستند وجود ندارد.

اکنون دستورات زیر را در پنجره ترمینال تایپ کنید تا این بسته ها نصب شوند:

npm install no[email protected] --save-dev
npm install [email protected] --save-dev

وقتی این کار را انجام دادیم، می‌توانیم کد زیر را برای ساختن بسته برنامه سمت کاربر اجرا کنیم و کد سرور را ترجمه کنیم و سرور را در 3006 راه‌اندازی کنیم:

npm run dev

اکنون تنظیمات سرور وب پک تغییرات را شناسایی کرده و سرور مجددا راه اندازی می شود. با این حال، برنامه مشتری باید هر بار پس از تغییرات به صورت دستی بازسازی شود.

به عنوان آخرین مراحل برای فعال کردن رندر سمت سرور برای React App، /http://localhost:3006 را در مرورگر خود تایپ کنید تا برنامه رندر سمت سرور را ببینید.

قبلاً کدهای منبع به شرح زیر نشان داده شده بودند:

Output<div id="root"></div>

اکنون با تغییراتی که انجام دادیم، کدهای منبع به شرح زیر است:

Output<div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

همانطور که می بینید، فعال کردن رندر سمت سرور برای React App کامپوننت را با موفقیت رندر می کند در HTML.

رندر سمت سرور در React

رندر سمت سرور در برنامه های React چگونه انجام می شود؟

نتیجه

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

سوالات متداول

1. منظور از فعال کردن رندر سمت سرور برای React App چیست؟

رندر سمت سرور، همچنین به عنوان SSR شناخته می شود، یک روش رندر از برنامه های وب تک صفحه ای (SPAs) است. با اعمال این تکنیک ابتدا صفحه مورد نظر به طور کامل بارگذاری شده و سپس برای کاربر ارسال می شود.

2. مزایای SSR چیست؟

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

3. معایب SSR چیست؟

بزرگترین ضعف SSR این است که نمی تواند محتوایی را که بخشی از HTML ایستا وب سایت نیست (مانند جاوا اسکریپتی که سرویس های شخص ثالث تزریق می کنند) تزریق کند. بنابراین، برخی از محتوای صفحه (مانند محتوای UGC) به ربات های موتور جستجو نمایش داده نمی شود.

4. آیا فرآیند اجرای SSR برای همه پروژه ها یکسان است؟

خیر، برای پروژه های پیشرفته تر مراحل کار کمی متفاوت خواهد بود. زیرا در این پروژه های پیچیده، SSR بار سنگینی بر روی سرور ایجاد می کند. بنابراین نیاز به تنظیمات بیشتری دارد.

5. آیا فعال کردن رندر سمت سرور برای React App برای سئو وب سایت مفید است؟

بله، استفاده از SSR از دو جهت می تواند گام مثبتی برای سئوی سایت باشد: 1. زمانی که ایندکس کدهای جاوا اسکریپت در صفحات وب با مشکلاتی همراه است. 2. وقتی یک شبکه کند داریم که دانلود یک بسته جاوا اسکریپت بزرگ را خراب کرده است.

{ “@context”: “https://schema.org”، “@type”: “FAQPage”، “mainEntity”: [{
“@type”: “Question”,
“name”: “منظور از فعال‌سازی رندرینگ سمت سرور برای React App چیست؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “رندرینگ سمت سرور که با نام اختصاری SSR نیز شناخته می‌شود، روشی برای رندر‌گرفتن از وب‌‌اپلیکیشن‌های تک‌صفحه‌ای (SPA) است. با اجرای این تکنیک، صفحه مدنظر ابتدا کاملاً لود و سپس برای کاربر ارسال می‌شود.”
}
},{
“@type”: “Question”,
“name”: “مزایای SSR چیست؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “مهم‌ترین مزیت فعال‌سازی رندرینگ server-side، ارتقای عملکرد و افزایش سرعت سیستم است؛ چراکه با پیاده‌سازی این روش، صفحه ما ابتدا کاملاً لود و بعدازآن با اولین درخواست از سرور ارسال می‌شود. به‌علاوه با اجرای این تکنیک، مطمئن خواهید بود که همه اِلِمان‌های وب‌سایت شما رندر خواهند شد؛ زیرا در این روش، رندر اطلاعات به مرورگر متکی نیست.”
}
},{
“@type”: “Question”,
“name”: “معایب SSR چیست؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “بزرگ‌ترین ضعف SSR این است که نمی‌تواند محتواهایی که بخشی از HTML استاتیک وب‌سایت نیستند، تزریق کند (مثل جاوا‌اسکریپت‌هایی که سرویس‌های شخص ثالث وارد سیستم می‌کنند). بنابراین، بعضی از محتواهای صفحه (مانند محتواهای UGC) به ربات‌های موتورهای جست‌وجو نشان داده نخواهند شد.”
}
},{
“@type”: “Question”,
“name”: “آیا روند پیاده‌سازی SSR برای همه پروژه‌ها یکسان است؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “خیر، در پروژه‌های پیشرفته‌تر مراحل انجام کار کمی متفاوت خواهد بود؛ چراکه در این پروژه‌های پیچیده، SSR بار زیادی را روی سرور ایجاد می‌کند؛ بنابراین، به تنظیمات بیشتری نیاز دارد.”
}
},{
“@type”: “Question”,
“name”: “آیا فعال‌سازی رندرینگ سمت سرور برای React App برای سئو وب‌سایت هم مفید است؟”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “بله، استفاده از SSR در دو صورت می‌تواند قدمی مثبت برای سئو سایت هم محسوب شود: ۱. زمانی که ایندکس‌کردن کدهای جاوااسکریپت صفحات وب‌سایت با مشکلاتی همراه است؛ ۲. وقتی‌ شبکه‌ای کُند داریم که دانلود باندل بزرگ جاوااسکریپت را دچار اختلال کرده است.”
}
}]
}

منبع:

اقیانوس دیجیتال

نوشتن یک فعال کننده رندر سمت سرور برای React App برای اولین بار در Parsepack. به نظر می رسد.