یک برنامه 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 را در ریشه پروژه ایجاد کرده و پیکربندی کنید.
//.babelrc
{
“plugins”: [
[“transform-react-jsx”, { “pragma”: “h” }]
],
“presets”: [
[“env”, {
“targets”: {
“node”: “current”,
“browsers”: [“last 2 versions”]
}
}]
]
}

ساخت برنامه Preact
در مرحله بعد ، شروع به ایجاد فایل هایی برای سمت Preact موارد خواهید کرد. یک پوشه src ایجاد کنید و فایل های زیر را در آن ایجاد کنید:
⦁ store/store.js
⦁ About.js
⦁ App.js
⦁ index.js
⦁ router.js
اکنون می توانید فایل ها را با کد لازم ویرایش کنید. با فایل store.js شروع کنید. شامل داده ها و فعالیت های فروشگاه می باشد.
import createStore from ‘unistore’

export let actions = store => ({
increment(state) {
return { count: state.count + 1 }
},
decrement(state) {
return { count: state.count – 1 }
}
})

export default initialState => createStore(initialState)

در بلوک کد فوق مجموعه ای از اقدامات را صادر می کنید که مقدار count را با 1 افزایش و کاهش می دهد. فعالیت ها همیشه state را به عنوان اولین پارامتر حالت دریافت می کنند و پارامترهای دیگر ممکن است بعد از آن بیایند. تابع createStore که برای مقدار دهی اولیه فروشگاه در Unistore استفاده می شود نیز صادر می شود.
سپس ، فایل router.js را ویرایش کنید. شامل تنظیم مسیرهایی است که شما در برنامه استفاده خواهید کرد.
import { h } from ‘preact’
import Router from ‘preact-router’

import { App } from “./App”;
import { About } from “./About”;

export default () => (
<Router>
<App path=”/” />
<About path=”/about” />
</Router>
)

این کد از preact-router برای تعریف مسیرها استفاده می کند. برای این کار ، مسیرها را وارد کرده و آنها را فرزندان مؤلفه روتر قرار دهید. سپس می توانید ویژگی مسیر را برای هر مؤلفه تنظیم کنید تا preact-router بداند کدام مؤلفه را برای یک مسیر سرویس می دهد.
دو برنامه اصلی در برنامه وجود دارد: مولفه App.js ، که به عنوان مسیر هوم سرویس می دهد ، و مؤلفه About.js ، که به عنوان صفحه مورد استفاده قرار می گیرد.
سپس About.js را با موارد زیر ویرایش کنید:
import { h } from “preact”;
import { Link } from “preact-router/match”;

export const About = () => (
<div>
<p>This is a Preact app being rendered on the server. It uses Unistore for state management and preact-router for routing.</p>
<Link href=”/”>Home</Link>
</div>
);

این مولفه ای است که دارای توضیحات مختصر و یک مؤلفه Link است که به مسیر هوم منتهی می شود.
App.js به عنوان مسیر هوم سرویس می دهد. آن فایل را باز کرده و با کد لازم ویرایش کنید:
import { h } from ‘preact’
import { Link } from ‘preact-router’
import { connect } from ‘unistore/preact’

import { actions } from ‘./store/store’

export const App = connect(‘count’, actions)(
({ count, increment, decrement }) => (
<div class=”count”>
<p>{count}</p>
<button class=”increment-btn” onClick={increment}>Increment</button>
<button class=”decrement-btn” onClick={decrement}>Decrement</button>
<Link href=”/about”>About</Link>
</div>
)
)

در این کد ، تابع connect وارد می شود ، و همچنین تابع actions است. در مؤلفه app ، مقدار حالت count و همچنین اقدامات increment و decrement در معرض آن قرار میگیرد. اقدامات increment و decrement هر دو با رویداد onClick به دکمه های مختلف وصل شده اند.
فایل index.js نقطه ورود Webpack است. این برنامه به عنوان مؤلفه اصلی سایر مؤلفه های برنامه Preact خدمت می کند. فایل را باز کنید و با کد زیر ویرایش کنید.
// index.js
import { h, render } from ‘preact’
import { Provider } from ‘unistore/preact’
import Router from ‘./router’

import createStore from ‘./store/store’

const store = createStore(window.__STATE__)

const app = document.getElementById(‘app’)

render(
<Provider store={store}>
<Router />
</Provider>,
app,
app.lastChild
)

در بلوک کد بالا ، مؤلفه Provider وارد می شود. تعیین شرایط کاری که آیا Preact است یا React ، مهم است. ما همچنین مولفه روتر را از فایل router.js وارد می کنیم و عملکرد createStore نیز از فایل store.js وارد می شود.
از خط const store = createStore(window.__STATE__) برای انتقال حالت اولیه از سرور مجازی به کلاینت استفاده می شود زیرا در حال ساختن برنامه SSR هستید.
سرانجام ، در تابع render ، کامپوننت Router را درون قسمت Provider می پیچید تا فروشگاه در دسترس همه مولفه های کودک باشد.
این باعث می شود سمت کلاینت آیتم ها تکمیل شود. اکنون به سمت سرور مجازی برنامه خواهیم رفت.
ساخت سرور مجازی Node
با ایجاد یک فایل server.js شروع کنید. این برنامه Node را که برای رندر سمت سرور مجازی استفاده می شود ، در خود جای می دهد.
// server.js
const express = require(“express”);
const { h } = require(“preact”);
const render = require(“preact-render-to-string”);
import { Provider } from ‘unistore/preact’
const { App } = require(“./src/App”);
const path = require(“path”);

import Router from ‘./src/router’
import createStore from ‘./src/store/store’

const app = express();

const HTMLShell = (html, state) => `
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com

/ajax/libs/bulma/0.6.2/css/bulma.min.css”>
<title> SSR Preact App </title>
</head>
<body>
<div id=”app”>${html}</div>
<script>window.__STATE__=$

{JSON.stringify(state).replace(/<|>/g, ”)}</script>
<script src=”./app.js”></script>
</body>
</html>`

app.use(express.static(path.join(__dirname, “dist”)));

app.get(‘**’, (req, res) => {
const store = createStore({ count: 0, todo: [] })

let state = store.getState()

let html = render(
<Provider store={store}>
<Router />
</Provider>
)

res.send(HTMLShell(html, state))
})

app.listen(4000);

بیایید آن را تجزیه کنیم:
const express = require(“express”);
const { h } = require(“preact”);
const render = require(“preact-render-to-string”);
import { Provider } from ‘unistore/preact’
const { App } = require(“./src/App”);
const path = require(“path”);

import Router from ‘./src/router’
import createStore from ‘./src/store/store’

const app = express();

در بلوک کد بالا بسته های مورد نیاز سرور مجازی Node مانند express و path را وارد می کنید. همچنین preact ، مؤلفه Provider را از unistore وارد می کنید ، و از همه مهمتر ، بسته preact-rend-to-string است که شما را قادر به انجام رندر سمت سرور مجازی می کند. مسیرها و فروشگاه نیز از فایل های مربوطه آنها وارد می شود.
const HTMLShell = (html, state) => `
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com

/ajax/libs/bulma/0.6.2/css/bulma.min.css”>
<title> SSR Preact App </title>
</head>
<body>
<div id=”app”>${html}</div>
<script>window.__STATE__=$

{JSON.stringify(state).replace(/<|>/g, ”)}</script>
<script src=”./app.js”></script>
</body>
</html>`

در بلوک کد بالا HTML پایه ای را ایجاد می کنید که برای برنامه استفاده خواهد شد. در کد HTML ، حالت در بخش اسکریپت آغاز می شود. تابع HTMLShell دو پارامتر را می پذیرد. پارامتر html خروجی دریافتی از preact-rendering-to-string خواهد بود و سپس html درون کد HTML تزریق می شود. پارامتر دوم حالت است.
app.use(express.static(path.join(__dirname, “dist”)));

app.get(‘**’, (req, res) => {
const store = createStore({ count: 0})

let state = store.getState()

let html = render(
<Provider store={store}>
<Router />
</Provider>
)

res.send(HTMLShell(html, state))
})

app.listen(4000);

در اولین خط کد ، شما به اکسپرس می گویید که هنگام استفاده از فایل های استاتیک از dist استفاده کند. همانطور که قبلاً ذکر شد ، app.js در داخل پوشه dist قرار دارد.
در مرحله بعد ، مسیری را برای هر درخواستی که با app.get وارد برنامه شود ، تنظیم می کنید (**).اولین کاری که باید انجام دهید این است که فروشگاه و حالت آن را مقداردهی اولیه کنید و سپس یک متغیر ایجاد کنید که دارای مقدار ناحیه باشد.
پس از آن ، preact-rend-to-string (که به عنوان رندر وارد شده است) برای رندر کردن برنامه کلاینت Preact در کنار روتر ، که مسیر را نگه داشته است استفاده میشود، و Provider که فروشگاه را برای هر یک از مولفه های کودک فراهم می کند ، استفاده می گردد.
با انجام این کار ، سرانجام می توانید برنامه را اجرا کنید و ببینید که چگونه به نظر می رسد. قبل از انجام این کار ، بلوک کد زیر را به فایل pack.json اضافه کنید.
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start:client”: “webpack -w”,
“start:server”: “babel-node server.js”,
“dev”: “npm run start:client & npm run start:server”
},

این اسکریپت هایی هستند که به شما امکان می دهد برنامه را فعال و اجرا کنید. دستور npm run dev را در ترمینال خود اجرا کنید و به http: // localhost: 4000 بروید. برنامه باید به روز و اجرا شود و تصویری مشابه آنچه در زیر می بینید دریافت کنید.

اضافه کردن یک ظاهر طراحی شده CSS
اکنون که بازدیدها انجام شده و کلاینت به سرور مجازی وصل شده است می توانید یک ظاهر طراحی را به برنامه اضافه کنید. باید به Webpack اطلاع دهید که به پیوند دادن فایل های CSS نیاز دارد.
برای انجام این کار ، style-loader و css-loader باید به برنامه اضافه شود. هر دو با اجرای این دستور قابل نصب هستند:
⦁ $ npm i css-loader style-loader –save-dev
⦁
پس از اتمام نصب ، به فایل webpack.config.js بروید و کد زیر را در داخل آرایه rules اضافه کنید.
{
test: /\.css$/,
use: [ ‘style-loader’, ‘css-loader’ ]
}

اکنون می توانید یک فایل index.css را در داخل پوشه src ایجاد کرده و با کد زیر ویرایش کنید:
body {
background-image: linear-gradient(to right top, #2b0537, #820643, #c4442b, #d69600, #a8eb12);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
a {
display: block;
color: white;
text-decoration: underline;
}
p {
color: white
}
.count p {
color: white;
font-size: 60px;
}
button:focus {
outline: none;
}
.increment-btn {
background-color: #1A2C5D;
border: none;
color: white;
border-radius: 3px;
padding: 10px 20px;
font-size: 14px;
margin: 0 10px;
}
.decrement-btn {
background-color: #BC1B1B;
border: none;
color: white;
border-radius: 3px;
padding: 10px 20px;
font-size: 14px;
margin: 0 10px;
}

در فایل index.js ، این کد را در بالای فایل اضافه کنید:
import ‘./index.css’;`
…

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

نتیجه
در این آموزش ، شما یک برنامه 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