Adding Georgian Translations for Documentation

[shavidze]

Goals

The primary goals of this proposal are:

• To make the documentation accessible to Georgian-speaking developers.
• To promote the adoption of within the Georgian tech community.

Non-Goals

No response

Background

Georgian-speaking developers often encounter language barriers when accessing technical documentation. Translating key sections of the documentation into Georgian would empower local developers to learn and adopt more effectively.

Proposal

I propose translating key sections of the documentation into Georgian.

[shavidze]

For example, Let me show translating the data fetching fundamentals topic.

Data Fetching Fundamentals

ახალი,გამარტივებული მიდგომა წარმოადგინა Next.js-მა, თუ როგორ უნდა დავფეჩოთ დატა, რომელიც დააშენა React და Web platform-ზე. ამ სტატიაში ვისაუბრებთ ფუნდამენტურ კონცეფციებსა და პატერნებზე, რომელიც გაგვიმარტივებს დატის მენეჯმენტს.

Overview

რაზე ვისაუბრებთ?

• fetch data - სერვერის მხარეს, სერვერ-კომპონენტების გამოყენებით
• fetch data in parallel - რათა შევამციროთ მინიმალურამდე ე.წ. waterfall = "callback hell" და ლოდინის დრო.
• ლეიაუთებისთვის და ფეიჯებისთვის დავფეჩოთ დატა მხოლოდ იქ, სადაც საჭიროა და არა გლობალურად.
• Loading UI, Streaming and Suspense, გამოვიყენოთ ე.წ progressive render , რაც ნიშნავს რომ მომხმარებელმა უნდა დაინახოს ნაწილობრივი კონტენტი მაინც, სანამ მთლიანად ჩაიტვირთეაბ.

Fetching Data on the Server

ნექსტის რჩევაა, რომ სადაც შეგვიძლია დატის დაფეჩვა მაქსიმალურად სერვერის კომპონენტებში გვქონდეს. რადგან ეს ყველაფერი სერვერის მხარეს ხდება:

• გვაქვს პირდაპირი წვდომა ბექის დატაზე(მაგალითად ბაზებზე).
• აპლიკაცია უფრო დაცულია, რადგან სენსიტიურ ინფორმაციაზე, როგორებიცაა ტოკენები და API keys არ გვაქვს წვდომა კლიენტის მხრიდან.
• დატის წამოღება და რენდერი ერთსა და იმავე გარემოში ამცირებს როგორც კომუნიკაციას წინ და უკან, სერვერსა და კლიენტს შორის, აგრეთვე მცირდება დატვირთვა კლიენტის მხარეს მეინ სრედზე, რაც ვიცით რომ ძაან გააუმჯობესებს სიჩქარეს კკლიენტის მხარეს.
• შესაძლებლობა გვაქვს რომ გავაკეთო ე.წ. batched query, ანუ რამდენიმე
  რექვესტი შეგვიძლია გავუშვათ ერთი HTTP request-ში.
• შემცირებულია client-server waterfall = როცა კლიენტი უნდა დაელოდოს სანამ სერვერიდან რესპონსი არ მოვა, ისე არ შეუძლია რექვესტის გაგზავნა.
• მომხმარებლისს რეგიონიდან გამომდინარე ხდება დატის წამოღება უახლოესი სერვერიდან, ეს კი ამცირებს ლოდინის და დაყოვნების დროს.

Parallel and Sequential Data Fetching

არსებობს ორი ტიპის fetching : Parallel და Sequential.

• Parallel data fetching-ის დროს როგორც ვუყურებთ, რექვესტები მოცემულ როუტზე მიდის პარალელურად და იტვირთება data პარალელურად.
• Sequential data fetching-ის დროს, რექვესტები თითოეული როუტისთვის არის დამოუკიდებელი ერთმანეთისგან და იქმნება ე.წ waterfall. არის შემთხვევები როდესაც ეს მიდგომაც გვჭირდება, მაგრამ თუ არ გვჭირდება ზედმეტი დროის დანაკარგი გვაქვს.

---

Automatic fetch() Request Deduping

თუ ერთიდა იგივე დატა მოგვაქვს ბევრ კომპონენტში, რომლების ერთ ქვეხეში არიან, Next.js ავტომატურად იქეშავს fetch requests (GET), რომელთაც აქვთ ერთნაირი ინფუთი.

• სერვერის მხარეს, ქეში ინახება იმის მიხედვით თუ ვინ გააგზავნა ეს რექვესტი და როდის გააგზავნა. თუ მაგალითად, იმავე როუტზე გაიგზავნა სხვა მომხმარებლის მიერ რექვესტი, ან გაიგზავნა განსხვავებულ დროს, ახალი სერვერ რექვესტი დაგენერირდება და ახლიდან დაიქეშება სერვერის რესპონსი სერვერის მხარეს, მაგრამ თუ იგივე მომხმარებელმა გააგზავნა რექვესტი იგივე ფეიჯზე ახლიდან და იგივე სესიაშია ისევ, დაქეშილი რესპონის გაეგზავნება უკან და აღარ დაგენერირდება ახლიდან.
  • ეს ოპტიმიზაცია ვრცელდაბა ლეიაუთებში, ფეიჯებში და სერვერის კომპონენტებში, ასევე generateMetadata და generateStaticParams -ზე.
  • ეს ოპტიმიზაცია გამოიყენება სტატიკური გენერირების დროს.
• კლიენტის მხარეს ქეში იქამდე ინახება სანამ არ გავა სესია ან full page reload არ მოხდება.

Static and Dynamic Data Fetches

ორი სახის Data არსებობს: Static და Dynamic.

• Static Data არის დატა, რომელიც არ იცვლება ხშირად. მაგალითად, blog post.
• Dynamic Data არის დატა, რომელიც იცვლება ხშირად, ან დამოკიდებულია კონკრეტულ უზერზე. მაგალითად, shopping cart list.

By default, ნექსტი ავტომატურად აკეთებს სტატიკურ წამოღებას დატის. ბილდის დროს წამოიღებს ამ დატა, დაიქეშავს და გამოიყენებს ყველა რექვესტზე.
2 ძირითადი სარგებელი აქვს სტატიკურ დატის გამოყენებას:

1. ამცირებს დატვირთვას ბაზაზე, რექვესტების შემცირების ხარჯზე.
2. დატა ავტომატურად იქეშება და აუმჯობესებს პერფორმანს.

---

Caching Data

ქეშირება არიც პროცესი, როდესაც დატას ვინახავთ რამე ლოკაციაზე, მაგალითად Content Delivery Network-ში, და აღარაა საჭირო რომ ხელახლა წამოვიღოთ ეს ინფორმაცია original source-დან.

Next.js Cache არის ე.წ persistent HTTP cache , რომელიც არის გლობალურად დისტრიბუციული (განაწეილებული), ეს კი იმის საშუალებას იძლევა რომ ეს ქეში დასკალირდეს და გადანაწილდეს (მაგიტომაც ქვია დისტრიბუციული) უამრავ რეგიონზე და დაიდოს მანდ შენივე პლატფორმაზე (მაგალითაე Vercel-ზე).

Next.js -ის fethc() -ში გვაქვს ე.წ. options object, რომ დავაკონფიგუროთ:

import { useState, useEffect } from 'react';

function MyComponent() {
 const [data, setData] = useState(null);

 useEffect(() => {
   async function fetchData() {
     const response = await fetch('/api/data', {
       cacheKey: 'my-component-data',
       cacheTime: 60000, // 1 minute
     });
     const json = await response.json();
     setData(json);
   }
   fetchData();
 }, []);

 if (!data) {
   return <div>Loading...</div>;
 }

 return (
   <div>
     <h1>{data.title}</h1>
     <p>{data.description}</p>
   </div>
 );
}

export default MyComponent;

Revalidating Data

რევალიდაცია არის პროცესი, როცა უნდა გავასუფთავოთ ქეში და ხელახლა წამოოვიღოთ ბოლო დატა. ეს გამოიყენება, როცა ხშირად იცვლება დატა და გვინდა დავრწმუნდეთ რომ მომხმარებელი ბოლო ვერსიას უყურებს.
ორი სახის რევალიდაცია არსებობს:

• Background: რევალიდაციაა ხდება რაღაც დროის ინტერვალში ერთხელ:

fetch('https://...', { next: { revalidate: 60 } });

• On-demand: რევალიდაცია ხდება, როცა იცვლება დატა:

import useSWR from 'swr';

function MyComponent() {
  const { data, revalidate } = useSWR('/api/data', { refreshInterval: 0 });

  function handleClick() {
    revalidate();
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
      <button onClick={handleClick}>Refresh</button>
    </div>
  );
}

export default MyComponent;

---

Streaming and Suspense

Streaming and Suspense არიან ახალი ფიჩერები რეაქტის, რომლებიც საშუალებას გვაძლევენ გვქონდეს ე.წ. progressive and incremental stream rendering მიდგომები. ეხლა ავხსნათ, რა რა არის.

• progressive rendering - ამ დროს კონტენტი იტვირთება ეტაპობრივად, უფრო მნიშვნელოვანი კონტენტი იიტვირთება და ჩნდება ეკრანზე პირველად და შემდეგ ნაკლებად მნიშნველოვანები.ეს ტექნიკა იძლევა საშუალებას, რომ უზერს მიეცეს რაც შეიძლება მალე ინტერაქციის საშუალება, მაშინაც კი როცა ფეიჯი ჯერ სრულად არ ჩატვირთულა.
• incremental rendering - ამ დროს, კონტენტი იტვირთება პატარ-პატარა ჩანკებად და უზერისთვის უკვე ინტერაქციულია ეს პატარა ნაწილები, სანამ მთლიაანად ჩაიტვირთება.

ორივე ტექნიკა ერთად გამოიყენება უზერის ექსპერიენსის ოპტიმიზაციისთვის. მაგალითად, ფეიჯმა შეიძლება ჯერ გამოიყენოს progressive rendering , რათა ჩატვირთოს საწყისი კონტენტი მალე და შემდეგ უკვე გამოიყენოს Incremental rendering რომ ნელნელა წამოიღოს დარჩენილი კონტენტი და გახადოს ხელმისაწვდომი.

import { useState, useEffect, Suspense } from 'react'
import { stream } from 'next/stream'

function StreamedComponent({ data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  )
}

function FallbackComponent() {
  return <div>Loading...</div>
}

function MyComponent() {
  const [data, setData] = useState(null)

  useEffect(() => {
    const controller = new AbortController()

    stream('/api/data', {
      signal: controller.signal,
      onData: (data) => setData(data),
    })

    return () => {
      controller.abort()
    }
  }, [])

  if (!data) {
    return <FallbackComponent />
  }

  return (
    <Suspense fallback={<FallbackComponent />}>
      <StreamedComponent data={data} />
    </Suspense>
  )
}

export default MyComponent

The AbortController API provides two methods: abort() and signal(). The abort() method sends an abort signal to any pending operation that is associated with the AbortController, causing it to terminate. The signal() method returns an AbortSignal object that can be passed to an operation to enable the ability to abort it.

მეტისთვის იხ. სტატია [[Streaming and Suspense]]