https://virgool.ir/feed/@mohammadsalehkarimiبرنامه نویس و توسعه دهنده وب | جاوا اسکریپتfa2026-11-11 10:59:45https://files.virgool.ir/upload/users/869576/avatar/P3m7qo.pnghttps://virgool.ir/@mohammadsalehkarimihttps://virgool.ir/@mohammadsalehkarimi/مقایسه-ی-ssr-با-csr-b7nozrsimlcdمقایسه ی SSR با CSRاول اینکه SSR یعنی تمامی المان های سایت در سرور رندر شوند و برای ما در قالب فایل های آماده و قابل نمایش ارسال می شوند.دوم اینکه CSR یعنی تقریبا بیشتر المان ها سمت کلاینت رندر شوند و عمدتا از تکنولوژی V-Dom استفاده می کنند.نکته ی جالب اینجاست که SSR در ری اکت اصلا شبیه چیزی که در گذشته سراغ داشتیم مثل Wordpress , Laravel,Asp.net و …. نیست.و حالا بیشتر درباره ی مفهوم اصلی SSR بررسی می کنیم.وقتی وب اپلیکیشن ما به صورت CSR یا همان SPA نوشته شود چیزی که crawler گوگل یا موتور های جستجوی دیگه خواهند دید تنها یک container از نوع html  است که خالی می باشد.چرا خالی؟؟چون CSR هر آنچه که لازم می باشد در صفحه ما load  شود را در مرورگر کلاینت ایجاد می کند، وقتی کرالر یا همون خزنده برای خواندن مطالب ما می آید چیزی جز یک کانتینر خالی نخواهد دید.پس در بخش CSR عملا SEO رو از دست خواهیم داد.ولی این نکته رو هم باید در نظر گرفت همه بخش های پروژه ما قرار نیست ssr شود چون ماهیت ری اکت CSR بودن آن می باشد.از این قابلیت باید فقط در جاهایی که نیاز داریم استفاده کنیم.مثلا : بلاگ ، محصولات و …رندر سمت سرور در React  توسط Node Js انجام می شود و این فرایند هیچ ارتباطی به بک اند پروژه ندارد (بک اند می تواند هر چیزی باشد که کاملا بک اند و فرانت اند مستقل از هم هستند و فقط در مواقع نیاز باهم ارتباط می گیرند)مزیت هاچون تمام پردازش ها در سرور انجام می شود و مرورگر فقط اطلاعات رو نمایش می دهد به این صورت سرعت لود صفحات بیشتر می شود و این بیشتر شدن سرعت زمانی که کلاینت سیستم ضعیفی داشته باشد خیلی محسوس تر است.چون سرور در Response برای ما فقط html  می فرستد این موضوع باعث می شود که مرورگر های قدیمی هم بتوانند به راحتی صفحه ما را لود کنند.وقتی html خام دارید خزنده گوگل به راحتی به سایت شما می آید و html شما را می خواند و صفحات را ایندکس می کند. گوگل بعضی اوقات عمل رندرینگ را انجام می دهد و برخی از اوقات انجام نمی دهد و اینکه باقی موتورهای جستجوگر جاوااسکریپت را اجرا نمی کنند.معایبپیاده سازی نسبتا سختی دارد.کند شدن زمان Response اتفاق می افتد.شاید سوال بشه که حالا باید با این موارد که گفته شد از آن استفاده کنیم یا خیر؟؟ به نظرم فقط در جایی که نیاز به سئو داریم باید استفاده کنیم ولی جاهای دیگری لزومی به استفاده ندارید.کانال ما : ری‌اکت سورسمحمدصالح کریمیمحمدصالح کریمیTue, 18 May 2021 18:13:08 +0430https://virgool.ir/@mohammadsalehkarimi/استفاده-از-socketio-در-react-js-p7pwmlosefvhتوی این مقاله قراره که باهم از socket توی React استفاده کنیم و کانفیگای مورد نیازش رو انجام بدیم مرحله اول ) ساختن پروژه React JSبرای ساختن پروژه React کافیه که توی هر دایرکتوری که دوس دارید دستور npx create-react-app web-socket رو وارد کنید تا پروژه React برای شما ساخته بشه.مرحله دوم ) نصب پکیج socket.io-client برای اینکه بتونیم از socket توی react استفاده کنیم باید پکیج socket.io-client رو نصب کنیم و تنها نکته ای هم که هستش اینه که توی نسخه های جدیدش یه سری مشکلات هستش که ممکنه اتصال به سرور socket برقرار نشه و نتونین به socket متصل بشین و راه حل این مشکل هم نصب نسخه 2.0.4 هستش که با نصب این نسخه شما میتوانید به راحتی به سرور socket خود متصل بشید.پس با استفاده از ادیتورتون پوشه پروژه رو باز کنین و دستور npm i socket.io-client@2.0.4 را وارد کنید تا پکیج براتون نصب بشه.مرحله سوم ) اتصال به socketبرای اینکه بتونیم کانفینگ های سوکت رو انجام بدیم نیازمندیم که توی پوشه src یه پوشه به اسم socket بسازیم و داخل این پوشه یه فایل به اسم index.js میسازیم.وارد فایل index.js میشیم و یک نمونه برداری از پکیج میکنیم به شکل زیرimport * as io from "socket.io-client"و سپس متغیری به اسم Url میسازیم و آدرس سرور socket رو میریزیم داخلش به شکل زیر let Url= "https://virgol.io"خب حالا وقت اتصال به سروره که خیلی ساده با متد های io که بالا نمونه برداری کردیم میتونیم متصل بشیم به شکل زیرconst socket = io.connect(Url) export default socket;خب به همین سادگی ما تونستیم به سرور socket متصل بشیم بریم ببینیم چجوری میشه باهاش دیتا ارسال کرد .برای ارسال دیتا کافیه به شکل زیر عمل کنیم import socket from "./socket/index.js" socket.emit("EVENT" , data)به همین سادگی ما میتونیم که دیتامون رو با استفاده از socket ارسال کنیم حالا بریم ببینیم که چجوری میشه دیتا رو از socket دریافت کنیمimport socket from "./socket/index.js" socket.on("EVENT" , (result)=>{ console.log(result) })به همین سادگی ما میتونیم که دیتا رو از داخل سرور socket دریافت کنیم .موفق باشید.کانال ما: ری‌اکت سورسمحمدصالح کریمیمحمدصالح کریمیThu, 13 May 2021 20:00:04 +0430