نحن في عام 2020، والحديث يتزايد عن توليد المواقع الثابتة (static site generation) باستخدام أطر الواجهات مثل React. ولدينا مكتبات جيدة كثيرة، بل أطر عمل كاملة، مثل Gatsby وNextJS وreact-static وغيرها.

لماذا إذن نتحدث عن طريقة أخرى لتوليد المواقع الثابتة بدل استخدام هذه الأدوات الرائعة الموجودة؟

في الأساس، تنشئ كل هذه الأدوات ملفات HTML وCSS وJavascript ثابتة، لكنها تترك فيها بصمات React. وهذا ليس أمرًا سيئًا على الإطلاق، بل هو أفضل ما حدث على الإطلاق. فأنتم تحصلون على بيئة تشغيل React ومعها فوائد virtual DOM. لكن تخيّلوا أننا مطالبون بإنشاء ملفات HTML تقليدية بسيطة، مع بعض منطق الواجهة في script يعمل على جهة العميل. يمكننا استخدام كثير من محركات القوالب (template engines) المتاحة، لكن لماذا لا نستخدم React؟

نظرة عامة

منذ أن قدّمت React الدالة renderStaticMarkup، يستخدمها كثيرون للعرض من جهة الخادم (server-side rendering) وإخراج HTML بسيط، وهذه فكرة أنيقة. سنستخدمها لتوليد المحتوى المُعرَض مسبقًا (pre-rendered). ثم نستخرج ملفات CSS وJavascript المرتبطة به. وأخيرًا نضع المحتوى المُعرَض مسبقًا داخل قالب HTML مع وسوم script وstylesheet الصحيحة، ونُخرج الملفات.

الإعداد

لنبدأ بملف package.json

{
  "name": "react-no-react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.10.4",
    "@babel/node": "^7.10.4",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "glob": "^7.1.6"
  }
}

كما ترون، نحتاج إلى React وReactDOM وBabel. نستخدم Babel لتحويل (transpile) كود Javascript الذي قد نكتبه بصيغة ES6 للعمل على جهة العميل. وسنستخدم babel-node أيضًا كأداة CLI. لننشئ هيكل المشروع.

.
├── pages
│   ├── AboutUs.jsx
│   └── Home.jsx
├── scripts
│   └── build.js
├── babel.config.js
└── package.json

في ملف babel.config.js ننشئ الإعداد على هذا النحو

module.exports = {
  presets: ["@babel/env", "@babel/react"],
};

ثم في ملف scripts/build.js.

import React from "react";
import path from "path";
import fs from "fs";
import glob from "glob";
import { renderToStaticMarkup } from "react-dom/server";
import { spawnSync } from "child_process";

const cwd = path.resolve(__dirname, "..");

// We glob all the files under "pages" directory
const reactFiles = glob.sync("pages/**/*.jsx", { cwd });

reactFiles.forEach((reactFile) => {
  const fileName = path.basename(reactFile).replace(".jsx", "");

  // Page components are from "default" export
  const Component = require(path.resolve(__dirname, "../", reactFile)).default;
  const staticMarkup = renderToStaticMarkup(<Component />);

  // Generate HTML file name from ".jsx" files by replacing the extension with ".html"
  const htmlFile = path.resolve(
    __dirname,
    "../dist/",
    reactFile.replace(".jsx", ".html")
  );

  const dirName = path.dirname(htmlFile);

  // In case we have nested page structure, we need to create directory recursively.
  fs.mkdirSync(dirName, { recursive: true });

  fs.writeFileSync(
    htmlFile,
    `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>${fileName}</title>
</head>
<body>
  ${staticMarkup}
</body>
</html>`,
    "utf8"
  );
});

لننشئ الصفحات

// pages/Home.jsx
import React from "react";

export default () => <h1>Home Page</h1>;

// pages/AboutUs.jsx
import React from "react";

export default () => <h1>About Us</h1>;

وأخيرًا، أنشئوا script للبناء داخل package.json

...
"scripts": {
  "build": "babel-node scripts/build.js"
},
...

شغّلوا الـ script

npm run build

أو

yarn build

بعد ذلك يُفترض أن تروا ملفين جديدين.

.
├── dist
│   ├── AboutUs.html
│   └── Home.html
...

لكن هذه مجرد ملفات HTML بسيطة. فماذا عن CSS وJS والملفات الثابتة (static assets)؟ هذا ما سنناقشه في الجزء التالي، فإن كان الموضوع يهمكم، تابعونا.اقرأوا التالي: بناء مواقع ثابتة دون React، باستخدام React (الجزء 2/3)