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

خانه » مقالات » فعال سازی رندرینگ سمت سرور برای React App

SSR چیست و فعال سازی رندرینگ سمت سرور برای React App چگونه است؟ امروزه با توجه به پیشرفت تکنولوژی و افزایش پیچیدگی صفحات وب، اجرای رندرینگ (Rendering) سمت سرور به عنوان یک روش موثر برای بهبود عملکرد وب‌سایت‌ها جلب توجه کرده است.

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

رندرینگ سمت سرور به معنای ایجاد و ارسال نسخه اولیه‌ای از صفحه وب توسط سرور به مرورگر کاربر است. این کار توسط کتابخانه‌ها و ابزارهای متنوعی مانند Next.js ،Gatsby و React DOM Server انجام می‌شود.

برخلاف رندرینگ سمت مرورگر که روش درخواست-پاسخ است و منتظر بارگیری و اجرای اسکریپت‌ها توسط مرورگر می‌باشد، در رندرینگ سمت سرور، سرور تمامی کدهای React را اجرا و نتیجه را به صورت یک صفحه HTML که محتوای ثابت را دارد به مرورگر ارسال می‌کند.

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

در این مقاله، به بررسی روش‌ها و ابزارهای مورد استفاده برای فعال‌سازی رندرینگ سمت سرور در React App خواهیم پرداخت و یک برنامه React را با استفاده از Create React App راه اندازی و سپس پروژه را تغییر خواهیم داد تا رندر سمت سرور فعال شود.

در پایان این آموزش، شما یک پروژه کاری با یک برنامه React سمت کلاینت و یک اپلیکیشن Express سمت سرور خواهید داشت.

پیش نیازهای فعال سازی رندرینگ سمت سرور

قبل از شروع این مراحل، باید Node.js را به‌صورت لوکال نصب کنید. این کار را می‌توانید با دنبال کردن آموزش نصب Node.js در اوبونتو نصب و پیاده سازی نمایید.

این آموزش، برای نسخه‌های زیر آزمایش و تأیید شده‌اند.

• Node v16.13.1
• npm v8.1.2
• react v17.0.2
• babel/core v7.16.0@
• webpack v4.44.2
• express v4.17.1
• nodemon v2.0.15
• npm-run-all v4.1.5

نحوه ایجاد برنامه React

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

npx create-react-app react-ssr-example

سپس، با اجرای دستور زیر cd را وارد دایرکتوری جدید کنید.

cd react-ssr-example

در نهایت، برنامه سمت کاربر جدید را به منظور تایید نصب، راه اندازی کنید.

npm start

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

اکنون، یک کامپوننت جدید <Home> را در پوشه src ایجاد خواهیم کرد.

nano src/Home.js

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

src/Home.js

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

export default Home;

با این کار، یک هدینگ <h1> ایجاد می‌شود که پیام Hello را همراه با نامی خاص نشان می‌دهد. در ادامه قصد داریم <Home> را در کامپوننت <App> قرار دهیم. برای انجام این کار فایل App.js را در دایرکتوری src باز کنید.

nano src/App.js

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

src/App.js

import Home from './Home';

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

export default App;

با این کار یک نام به کامپوننت <Home> ارسال می‌شود و در ادامه چنین پیامی نمایش خواهد داد.

Output
"Hello Sammy!"

در فایل index.js برنامه، از روش ReactDOM’s hydrate method به جای رندر استفاده می‌کنید تا به رندر DOM نشان دهید که قصد دارید پس از رندر سمت سرور، برنامه را rehydrate کنید.

اکنون، فایل index.js موجود در دایرکتوری src را باز کنید.

nano src/index.js

سپس، محتوای فایل index.js را با کد زیر جایگزین کنید.

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')
);

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

ایجاد سرور Express

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

در ادامه، یک دایرکتوری سرور جدید در دایرکتوری root پروژه ایجاد کنید.

mkdir server

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

nano server/index.js

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

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();

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

server/index.js

// ...

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}`);
});

امکان وارد کردن کامپوننت <App> از پوشه client-app به طور مستقیم از سرور وجود دارد.

در کدهای بالا سه اتفاق رخ می‌دهد:

• Express برای ارائه محتویات از دایرکتوری build به عنوان فایل‌های استاتیک استفاده می‌شود.
• از renderToString ReactDOMServer برای رندر کردن برنامه به یک رشته HTML استاتیک استفاده می‌شود.
• فایل استاتیک index.html از کلاینت اپلیکیشن build خوانده می‌شود. محتوای ثابت برنامه با شناسه “root” به <div> تزریق می‌شود. این به عنوان پاسخ به درخواست ارسال می‌شود.

پیکربندی Webpack ،Babel و npm

در ادامه برای فعال سازی رندرینگ سمت سرور برای React App، برای اینکه کد سرور کار کند، باید با استفاده از webpack و Babel آن را باندل و ترانسپایل کنید.

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

react-scripts متعلق به Create-react-app نصب بسته‌های webpack ،‌webpack ،‌webpack-node-externals ،‌babel/core@ ،‌babel-loader babel/preset-env@ و babel/preset-react@ را مدیریت می‌کند. بنابراین، از آموزش این مرحله عبور می‌کنیم و به‌سراغ ادامه مراحل می‌رویم.

در قدم بعدی، با اجرای دستور زیر یک فایل پیکربندی جدید Babel در دایرکتوری root پروژه ایجاد کنید.

nano .babelrc.json

سپس، پیش تنظیمات env و react-app را اضافه کنید.

.babelrc.json

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

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

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

nano webpack.server.js

سپس، تنظیمات زیر را به فایل 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'
      }
    ]
  }
};

با این پیکربندی، بسته سرور منتقل شده در پوشه server-build و در فایلی به نام index.js خروجی گرفته می‌شود.

استفاده از ‘target:‘node و externals: [nodeExternals()] از webpack-node-externals نیز که فایل‌های node_modules را حذف می‌کند، بخش مهم این فرایند است. سرور می‌تواند مستقیماً به این فایل دسترسی داشته باشد.

بیشتر بدانید : SSL چیست

این کار نصب وابستگی و پیکربندی webpack و Babel را تکمیل می‌کند.

اکنون، package.json را مجدداً مشاهده کنید و اسکریپت‌های کمکی npm را اضافه کنید.

nano package.json

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

package.json

"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 محیط را روی “development” تنظیم می‌کند و webpack را با فایل پیکربندی که قبلا ایجاد کرده‌اید، فراخوانی می‌کند.

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

توجه: شما نیازی به تغییر اسکریپت‌های “start”، “build”، “test” و “eject” موجود در فایل package.json ندارید.

از nodemon برای راه اندازی مجدد سرور هنگام ایجاد تغییرات و npm-run-all برای اجرای چندین دستور به صورت همزمان استفاده می‌شود.

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

npm install nodemon@2.0.15 --save-dev
npm install npm-run-all@4.1.5 --save-dev

با انجام این کار، می‌توانید کد زیر را اجرا کنید تا باندل اپلیکیشن سمت کاربر ساخته شود و کدهای سرور ترانسپایل شوند و سرور در ۳۰۰۶: اجرا شود.

npm run dev

در حال حاضر، server webpack شاهد تغییرات خواهد بود و سرور با تغییرات مجدد راه اندازی می‌شود. با این حال، برای اپلیکیشن کلاینت باید هر بار که تغییری ایجاد می‌شود، به صورت دستی بازسازی شود.

اکنون، http://localhost:3006/ را در مرورگر وب خود باز کنید و برنامه ارائه شده در سمت سرور خود را مشاهده کنید.

پیش‌ازاین، source code بد‌ین‌صورت نشان داده می‌شدند.

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

اما اکنون، با تغییراتی که انجام دادید، source code نشان می‌دهد.

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

همان‌طور‌که مشاهده می‌کنید، فعال‌سازی رندرینگ سمت سرور برای  React App، کامپوننت <App> را با موفقیت به HTML تبدیل می‌کند.

جمع بندی

رندرینگ سمت سرور یک روش قدرتمند است که باعث می‌شود اجزا و صفحات React در سمت سرور پردازش شده و نتیجه به کلاینت ارسال شود. این روش علاوه بر بهبود سرعت بارگیری، تجربه کاربری بهتر، بهبود سئو و بهره‌وری سرور را نیز به ارمغان می‌آورد. با این حال، در هر پروژه‌ای باید نیازها و محدودیت‌های خود را در نظر داشته باشیم و انتخاب مناسبی را برای فعال سازی رندرینگ سمت سرور انجام دهیم. با استفاده از این روش، می‌توانید بهبود قابل ملاحظه‌ای در سرعت بارگیری صفحات داشته باشید و تجربه کاربری را بهبود بخشید. به همین دلیل، فعال سازی رندرینگ سمت سرور برای React App به عنوان راهکاری کامل و کارآمد در نظر گرفته می‌شود. امیدواریم این مقاله به شما کمک کند تا با این روش موثر، بهبودی قابل توجه در عملکرد و تجربه کاربری اپلیکیشن خود داشته باشید.

با استفاده از سرور ابری رایگان ابر آسیاتک، می‌توانید سرور خود را تنها با چند کلیک راه اندازی نمایید و اقدام به فعال سازی رندرینگ سمت سرور برای React App کنید.