یک برنامه SSR با روتر Preact ، Unistore و Preact ب

مقدمه
برنامه های تک صفحه ای یک روش محبوب برای ساخت برنامه های مدرن وب هستند. وقتی صحبت از SPA می شود ، دو روش وجود دارد که می توانید محتوای برنامه را به کاربران خود ارائه دهید: رندر سمت کلاینت یا ارائه سمت سرور مجازی.
با ارائه سمت کلاینت ، هر زمان که کاربر برنامه را باز کند ، درخواستی برای بارگذاری طرح ، HTML ، CSS و JavaScript ارسال می شود. در مواردی که محتوای برنامه به اتمام بارگذاری موفقیت آمیز اسکریپت های JS وابسته باشد ، این مسئله می تواند یک مشکل باشد. این بدان معنی است که کاربران در حالی که منتظر پایان بارگذاری اسکریپت ها هستند ، مجبور به مشاهده پیش بارگذاری می شوند.
رندرگیری سمت-سرور مجازی متفاوت عمل میکند. با SSR ، درخواست اولیه شما ابتدا صفحه ، طرح ، CSS ، JavaScript و محتوا را بارگذاری می کند. SSR اطمینان می دهد که داده ها به درستی در زمان ارائه تنظیم می شوند. رندر سمت سرور مجازی نیز برای بهینه سازی موتور جستجو مناسب تر است.
در این آموزش نحوه ساخت یک برنامه رندر شده توسط سرور مجازی با Preact را بررسی میکنید- روتر preact برای مسیریابی ، unistore برای مدیریت برای ناحیه ای و Webpack برای بسته بندی JS استفاده خواهد شد.
ممکن است به مقداری دانش درباره Preact ، Unistore و Webpack نیاز باشد.
فن آوری ها
در این آموزش از فناوری زیر برای ساخت برنامه Server-Send Rendered استفاده خواهید کرد:
⦁ Preact – جایگزینی برای React با همان API. یک تجربه توسعه شبیه به React ارائه میدهد ، البته با برخی از ویژگی های از بین رفته مانند ⦁ PropTypes and Children .
⦁ Unistore – یک کانتینر حالت متمرکز با اتصالات مؤلفه برای React and Preact.
⦁ Preact Router – به مدیریت مسیر در برنامه های Preact کمک می کند. مؤلفه <Router /> را فراهم می کند که به طور مشروط CHILDREN را هنگام مطابقت URL با مسیر آن ها ارائه می دهد.
⦁ Webpack – بسته نرم افزاری برای کمک به بسته بندی فایل های JavaScript برای استفاده در یک مرورگر.
ساختن یک برنامه SSR با Preact
ساخت این برنامه به دو بخش تقسیم خواهد شد. ابتدا سرور مجازی کدی را که در Node و Express قرار دارد ، می سازید. پس از آن قسمت Preact را کد می کنید.
ایده این کار این است که یک برنامه Preact را مانند گذشته ایجاد کنید و آن را با استفاده از بسته preact-rend-to-string به سرور مجازی Node وصل کنید. این امکان را به شما می دهد تا اجزای JSX و Preact را به یک رشته HTML ارائه دهید که سپس در یک سرور مجازی قابل استفاده باشد. این بدان معنی است که ما می خواهیم اجزای Preact را در یک پوشه src ایجاد کنیم و سپس آن را به فایل سرور مجازی Node وصل کنیم.
اولین کاری که باید بکنید ایجاد فهرست برای پروژه و پوشه های مختلفی است که نیاز دارید. پوشه ای بنام preact-unistore-ss ایجاد کنید و دستور npm init- -y را در داخل پوشه اجرا کنید. این باعث می شود یک package.json جزیی و یک package-lock.json کمکی ایجاد کنید.
در مرحله بعد برخی از ابزاری را که برای این پروژه استفاده خواهید کرد ، نصب کنید. فایل pack.json را باز کنید و با کد زیر ویرایش کنید ، سپس دستور npm i را اجرا کنید.
{
“name”: “preact-unistore-ssr”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“babel-cli”: “^6.26.0”,
“babel-core”: “^6.26.0”,
“babel-loader”: “^7.1.2”,
“babel-plugin-transform-react-jsx”: “^6.24.1”,
“babel-preset-env”: “^1.6.1”,
“file-loader”: “^1.1.11”,
“url-loader”: “^1.0.1”,
“webpack”: “^3.11.0”,
“webpack-cli”: “^2.0.13”
},
“dependencies”: {
“express”: “^4.16.2”,
“preact”: “^8.2.6”,
“preact-render-to-string”: “^3.7.0”,
“preact-router”: “^2.6.0”,
“unistore”: “^3.0.4”
}
}

این کد تمام بسته های مورد نیاز این برنامه را نصب می کند. در آبجکت devDependency تعدادی بسته Babel وجود دارد که با تعویض کد ES6 به شما کمک می کند. file-loader و url-loader افزونه های Webpack هستند که به وارد کردن فایل ها ، دارایی ها ، ماژول ها و موارد دیگر کمک می کنند.
در آبجکت dependencies بسته هایی مانند Express، Preact، preact-rendering-to-string، preact-router و unistore را نصب می کنید.
سپس ، یک فایل پیکربندی Webpack ایجاد کنید. فایلی به نام webpack.config.js را در ریشه پروژه ایجاد کنید و آن را با کد زیر ویرایش کنید:
const path = require(“path”);

module.exports = {
entry: “./src/index.js”,
output: {
path: path.join(__dirname, “dist”),
filename: “app.js”
},
module: {
rules: [
{
test: /\.js$/,
loader: “babel-loader”,
}
]
}
};

در پیکربندی وب صفحه بالا ، نقطه ورود به src / index.js و خروجی را به صورت dist / app.js تعریف کردید. همچنین قوانین استفاده از Babel را تعیین کرده اید. فایل ورود به سیستم هنوز وجود ندارد ، اما بعداً آن را ایجاد خواهید کرد.
از آنجا که از Babel استفاده می کنید ، باید یک فایل .babelrc را در ریشه پروژه ایجاد کرده و پیکربندی کنید.

…

اکنون صفحه شما دارای استایل خواهد شد:

نتیجه
در این آموزش ، شما یک برنامه Preact رندر شده در سمت سرور مجازی ایجاد کرده اید و مزایای ساخت برنامه های ارائه شده توسط سرور مجازی را بررسی کرده اید. شما همچنین از Unistore برای مدیریت حالت پایه استفاده کردید و با استفاده از window.__STATE__ وضعیت را از سرور مجازی به frontend وصل کرده اید .
اکنون باید اطلاعات کافی در مورد نحوه ارائه یک برنامه Preact در سرور مجازی داشته باشید. به طور خلاصه ، ایده این است که ابتدا برنامه را روی سرور مجازی ارائه داده و سپس اجزای آن را در مرورگر ارائه دهید.
کد این آموزش را می توان در GitHub مشاهده کرد.

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

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade