مقایسه SSR با SSG

سایت های ایجاد شده به صورت استاتیک (static-generated site) و اپلیکیشن های رِندر شده در سمت سرور (SSR یا server-side rendered)، دو روش مدرن برای ساخت برنامه های فرانت اِند با استفاده از چارچوب های جاوا اسکریپت هستند. این دو روش با وجود متفاوت بودن، گاهی اشتباهاً به صورت یکسان و مشابه فرض می شوند. در این آموزش، ما در مورد تفاوت های بین آنها اطلاعاتی به دست خواهیم آورد.

در حال حاضر توسط جاوا اسکریپت و چارچوب های توسعه داده شده در آن، شما قادر خواهید بود سه نوع برنامه را ایجاد کنید:

1. برنامه های تک صفحه ای (SPA)
2. سایت های از پیش ارائه شده یا ایستا (static-generated site)
3. برنامه های رندر شده در سمت سرور(SSR)

SPA با چالش های زیادی روبرو است که یکی از آنها بهینه سازی موتور جستجو (SEO) است. راه حل های ممکن استفاده از یک تولید کننده سایت ایستا (static site generator) یا رندر کننده سمت سرور (SSR) است.

در این مقاله ، ما به بررسی این موارد خواهیم پرداخت ، و جوانب مثبت و منفی آنها را بررسی خواهیم کرد. ما در مورد چگونگی تولید وب سایت ایستا  به کمکSSG  هایی مانند Gatsby  صحبت خواهیم کرد. هم چنین یاد خواهیم گرفت که یک برنامه رندر شده در سمت سرور یاSSR  چیست و همچنین در مورد چارچوب های SST مانند Next.js نکاتی را بیان خواهیم کرد. در آخر ، ما تفاوت های این دو روش را بررسی خواهیم کرد و خواهیم دید که برای ساخت برنامه و اپلیکیشن بعدی خود از کدام یک استفاده کنیم.

تولید کننده ی وب سایت ایستا یا static-generated site چیست؟

یک تولیدکننده سایت ایستا (SSG) یک برنامه نرم افزاری است که صفحات HTML را از تمپلیت ها یا کامپوننت ها و یک منبع محتوای مشخص ایجاد می کند. چند فایل متنی و محتوایی به آن بدهید و موتور SSG یک وب سایت کامل به شما باز می گرداند. از این وب سایت تکمیل شده، به یک سایت ایستا یاد می شود. این بدان معناست که صفحات وب سایت در زمان ساخت (build) ایجاد می شوند و محتوای آنها تغییر نمی کند مگر اینکه محتوای جدید یا کامپوننتی را به آن اضافه کنید و سپس آن را بازسازی (rebuild) کنید. ( اگر می خواهید وب سایت با محتوای جدید به روز شود ، باید وب سایت را مجدداbuild  کنید)

این روش برای ساخت برنامه هایی که محتوای آنها اغلب تغییر نمی کند خوب است. بنابراین ، لزوماً از آن برای وب سایتی که محتوای زیادی توسط کاربر ایجاد و اصلاح شود استفاده نخواهد شد. با این حال ، یک وبلاگ یا یک وب سایت شخصی گزینه هایی ایده آل برای استفاده از آن خواهد بود. اجازه دهید برخی از مزایای سایت های تولید شده توسط SSG ها را بررسی کنیم.

طرفداران SSG

1. سرعت

از آنجا که تمام صفحات و محتوای وب سایت شما در زمان ساخت تولید می شود، دیگر لازم نیست نگران فراخوانی API از سرور برای گرفتن محتوا باشید، بنابراین سرعت وب سایت بالاتر می رود.

2. گسترش

پس از ایجاد سایت استاتیک، مجموعه ای از فایل های ایستا در اختیار شماست. از این رو، می توان آن را به راحتی در بسترهای ابری بدون دغدغه منتشر کرد چون نیازمندی های هاستینگ آن حداقلی است.

3. امنیت

یک سایت استاتیک تولید شده فقط شامل فایل های ایستا است و هیچ پایگاه داده ای برای حمله هکرها با تزریق کد مخرب وجود ندارد. بنابراین، آسیب پذیری در برابر حمله سایبری به کمترین مقدار خود می رسد.

4. مدیریت نسخه ها (version control)

برای مدیریت و پیگیری تغییرات در محتوای خود می توانید از نرم افزار کنترل نسخه (مانند Git) استفاده کنید و وقتی می خواهید تغییرات ایجاد شده در محتوا را دوباره برگردانید، این کار به راحتی قابل انجام است.

مخالفان SSG

1. اگر محتوای وب سایت نیاز به بروزرسانی های دائم باشد، استفاده از روش SSG یک مقدار کلافه کننده است.
2. برای به روزرسانی محتوا، باید وب سایت را دوبارهbuild کرد.
3. زمان build با توجه به اندازه برنامه افزایش می یابد.

یکی از معروف ترین SSG ها، چارچوب Gatsby  است. اجازه دهید نگاه سریعی به این چارچوب متن باز بیندازیم.

معرفی GATSBY

طبق تعریف وب سایت رسمی آن،  «گَتسبی یک چارچوب رایگان و منبع باز مبتنی بر React است که به توسعه دهندگان در ساخت وب سایت ها و برنامه های سریع کمک می کند»

این بدان معناست کار با GATSBY برای توسعه دهندگانی که با React آشنایی دارند، آسان تر خواهد بود.

برای استفاده از این چارچوب، ابتدا باید آن را با استفاده از npm نصب کنید:

npm install -g gatsby-cli

با این کار گتسبی (Gatsby) به صورت سرتاسری بر روی دستگاه شما نصب می شود. این دستور را باید فقط یک بار روی دستگاه خود اجرا کنید. پس از اتمام نصب، می توانید اولین سایت ایستای خود را با استفاده از دستور زیر ایجاد کنید:

gatsby new hello-gatsby

دستور بالا پروژه جدید گتسبی ایجاد می کند، که ما آن را hello-gatsby نامگذاری کرده ایم. سپس، با اجرای دستور زیر می توانید سرور برنامه خود را راه اندازی کنید:

cd hello-gatsby
gatsby develop

اپلیکیشن گتسبی شما در پورت 8000 روی لوکال هاست (localhost:8000) اجرا شده است.

ساختار فولدر پروژه به شکل زیر است:

در این مقاله با فولدر src/pages سر و کار داریم. این فولدر شامل فایل هایی است که متناظر با مسیرها (routes)ی وب سایت ایجاد شده و نمایش داده می شوند.

حال یک فایل با نام about.js در این فولدر ایجاد کنید و محتوایی مانند زیر در آن قرار دهید:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

const AboutPage = () => (
  <Layout>
    <SEO title="About" />
    <h1>Hi from the about page</h1>
    <p>Welcome to about</p>
    <Link to="/">Go back to the homepage</Link>
  </Layout>
)

export default AboutPage

در کد بالا، ما ری اکت را import می کنیم، بنابراین وقتی کد شما به جاوا اسکریپت تبدیل می شود ، ارجاع به ری اکت در آن مشاهده می شود. علاوه بر این کامپوننت Link را از گتسبی وارد می کنیم. این یکی از تگ های روتینگ ری اکت است که به جای تگ  <a> استفاده می شود. این  کامپوننت یک prop می پذیرد که که مشخص کننده مسیر یا همان href  است.

هم چنین Layout را import کرده ایم که به طور پیش فرض در اپلیکیشن وجود دارد. این کامپوننت چینش صفحات داخل آن را کنترل می کند. ما همچنین کامپوننت SEO را به این فایل جدید اضافه کرده ایم. این کامپوننت یک عنوان را می پذیرد و این مقدار را به عنوان بخشی از داده های متای صفحه شما پیکربندی می کند. در نهایت ، تابع AboutPage را export کرده ایم که JSX حاوی محتوای صفحه جدید را برمی گرداند.

در فایل index.js خود ، یک لینک به این صفحه جدیدی که ما ایجاد کردیم اضافه کنید:

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/about/">Go to about</Link> <br />

    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
)

export default IndexPage

حال مرورگر خود را باز کنید و در آدرس localhost:8000 در صفحه ایندکس بر روی لینک about کلیک کنید تا به صفحه جدید منتقل شوید:

به این ترتیب با افزون صفحات و استفاده از همه ی آنچیزی که چارچوب ری اکت و گتسبی به ما اجازه داده شده می توان محتوای جدید به وب سایت افزود. با دستور زیر می توان پروژه را build و آماده انتشار کرد:

gatsby  build

خوبی این روش همانطور که در ابتدا گفته شد SEO Friendly بودن صفحات html ایجاد شده پس از build است. اگر نرخ تغییرات محتوای وب سایت شما بالا نیست این روش مناسب بوده و عملکرد و سرعت وب سایت شما بسیار خوب خواهد بود.

رندر سمت سرور چیست؟

به کمک رندر سمت سرور (SSR) فرآیند رندر شدن صفحات وب به جای مرورگر بر روی سرور انجام شده و انتقال آنها به مرورگر (سمت کلاینت) انجام می شود. SSR یک صفحه کاملاً رندر شده (یعنی تبدیل شده به html) برای کلاینت ارسال می کند. عملکرد SPA در این حالت کاملا به وسیله ی کد جاوا اسکریپت خالص انجام می شود که همان bundle شده ی کدهای کامپوننت ها و ... است.

این بدان معنی است که اگر برنامه شما SSR باشد، محتوا از سرور واکشی و به مرورگر منتقل می شود تا به کاربر نمایش داده شود. این درست در مقابل رندر شدن در سمت کلاینت است که در آن کاربر باید قبل از اینکه مرورگر اطلاعات را از سرور دریافت کند، به صفحه جدید برود، چند ثانیه منتظر بماند تا مرورگر با محتوای آن صفحه نمایش داده شود. اپلیکیشن هایی که SSR در آن ها فعال شده است، برنامه های رندر شده در سمت سرور نامیده می شوند.

اگر در حال ساخت یک برنامه پیچیده هستید که نیاز به تعامل کاربر داشته باشد، به یک پایگاه داده متکی باشد یا محتوای آن دائما تغییر کند ، این روش مناسب است. این روش برای اپلیکیشن هایی که محتوا را براساس تنظیمات کاربران متفاوت نشان میدهند و در ضمن SEO هم برای آنها مهم است توصیه می شود. سایت های بزرگ فروشگاهی و بلاگ های بزرگ نیز می توانند کاندیدای استفاده از این روش باشند.

حال به بررسی برخی از مزایای و معایب SSR می پردازیم:

طرفداران SSR

• محتوا به روز است زیرا واکشی اطلاعات در لحظه انجام می شود.
• وب سایت به سرعت بارگیری می شود زیرا مرورگر قبل از رندر کردن محتوا به کاربر آن را از سرور دریافت می کند.
• از آنجا که جاوا اسکریپت در سمت سرور رندر می شود،  دستگاه کاربر ارتباط چندانی با زمان بارگذاری صفحه ندارد و این موجب عملکرد بهتر می شود.

مخالفان SSR

• فراخوانی های API بیشتری از سرور انجام می شود ، زیرا این فراخوانی ها برای هر درخواست کاربر انجام می شوند.
• وب سایت نمی تواند در CDN مستقر شود.
•  Next.js و Nuxt.js مشهورترین چارچوب های SSR هستند. در ادامه به بررسی next.js می پردازیم.

آشنایی  و شروع کار با NEXT.JS

Next.js یک چارچوب ری اکت است که به شما امکان می دهد وب سایت های ایستا، برنامه های ارائه شده از سمت سرور و موارد مشابه ایجاد کنید. از آنجا که این چارچوب بر اساس ری اکت ساخته شده است، برای استفاده از آن لازم است دانش دوره React داشته باشیم.

برای ایجاد یک برنامه Next.js، دستور زیر را اجرا کنید:

npm init hello-next

از شما خواسته می شود تا یک نام برای برنامه خود را انتخاب کنید. گزینه بعدی انتخاب الگو است. در اینجا تمپلیت پیش فرض را انتخاب می کنیم تا اپلیکیشن شروع به راه اندازی کند. با پایان اجرای دستور، اپلیکیشن ایجاد شده و آماده ی استفاده است. با اجرای دستور زیر میتوانید در مرورگر خود در آدرس localhost:3000 اپلیکیشن پیش فرض را ببینید: 

cd hello-next
yarn dev

صفحه ای که مشاهده می کنید را می توان در pages/index.js یافت. بنابراین، اگر این فایل را باز کنید و JSX را در تابع Home تغییر دهید، تغییرات در مرورگر منعکس می شود.

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h3>Documentation &rarr;</h3>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h3>Learn &rarr;</h3>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h3>Examples &rarr;</h3>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h3>Deploy &rarr;</h3>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  )
}

اگر با ری اکت کار کرده باشید کد بالا آشنا و گویاست. شما به راحتی می توانید صفحاتی مانند index.js  ایجاد کرده و در فولدر pages قرار دهید. به این ترتیب سیستم روتینگ و مسیردهی به صورت خودکار براساس فایل های این فولدر ایجاد می شود و به راحتی با لینک دادن به این صفحات می توانید navigation را برای کاربر ایجاد کنید.

نگاهی دقیق تر به تفاوت های دو روش SSR و SSG

اکنون که به بررسی مختصری در مورد این دو روش پرداختیم اجازه دهید یکبار دیگر به صورت جدول مقایسه ای تفاوت های این دو رویکرد را مشاهده کنیم:

مشاهده دوره آموزش React