32-წუთიანი სამუშაო სესია იმაზე, თუ როგორ აქცევს ვები კომპონენტებსა და მონაცემებს HTML-ად — CSR, SSR, SSG, ISR და სტრიმინგი — და როგორ ავირჩიოთ სწორი თითო როუტისთვის, ნაცვლად იმისა, რომ მთელი აპლიკაცია ერთ ნაგულისხმევზე დავდოთ.
„რენდერინგი“ უბრალოდ ნიშნავს კომპონენტებისა და მონაცემების გადაქცევას HTML-ად, რომელსაც ბრაუზერი დახატავს. სტრატეგიებს შორის რეალურად მხოლოდ ის განსხვავდება, სად სრულდება ეს სამუშაო — ბილდის მანქანაზე, მოთხოვნის დროს სერვერზე თუ მომხმარებლის ბრაუზერში — და როდის ხდება ეს. გაასწორეთ ეს ორი ღერძი და დანარჩენი დეკი უბრალოდ რუკაზე დასახელებული წერტილებია.
ერთი ღერძი: ადრე აგებული HTML (SSG/ISR) სწრაფია, მაგრამ შეიძლება მოძველდეს; გვიან აგებული (SSR/CSR) აქტუალურია, მაგრამ დროს ან გამოთვლას ხარჯავს. დანარჩენი ყველაფერი დეტალია.
დაარენდერეთ ერთხელ, დეპლოის დროს. შედეგი სტატიკური ფაილია, რომელსაც CDN მილიონობით ადამიანს თითქმის უფასოდ მიაწვდის — მაგრამ ეს სნეპშოტია.
დაარენდერეთ ახლიდან სერვერზე თითო ვიზიტორისთვის. ყოველთვის აქტუალური და პერსონალიზებადი — თითო მოხვედრაზე იხდით გამოთვლასა და დროს.
გაგზავნეთ JavaScript და გვერდი ბრაუზერს ააგებინეთ. იაფი სერვერები, მდიდარი ინტერაქტიულობა — მაგრამ ნელი, ცარიელი პირველი ხატვა.
ჰიბრიდი. სარეკლამო გვერდი — სტატიკური, დაშბორდი — კლიენტში, პროდუქტის გვერდი — რევალიდირებული. აირჩიეთ თითო როუტზე და არა თითო აპლიკაციაზე.
კლასიკურ single-page აპლიკაციაში სერვერი თითქმის არანაირ HTML-ს არ აგზავნის — მხოლოდ ცარიელ <div>-სა და სკრიპტის ტეგს. ბრაუზერი ჩამოტვირთავს ბანდლს, გაუშვებს მას, წამოიღებს მონაცემებს და მხოლოდ ამის მერე ხატავს ეკრანს. ბრწყინვალეა აპლიკაციური ინტერაქტიულობისთვის; მძიმეა სწორედ იმ პირველ შთაბეჭდილებაზე.
მომხმარებელი ცარიელ ეკრანს უყურებს, სანამ ბანდლი ჩამოიტვირთება, გაეშვება და მონაცემებს წამოიღებს — შემდეგ კი ყველაფერი ერთბაშად ჩნდება, სრულად ინტერაქტიული.
როგორც ვიღაცისთვის ავეჯის ნაწილებად და ინსტრუქციით გაგზავნა: მსუბუქად მოგზაურობს, მაგრამ ვერ გამოიყენებენ, სანამ თავად არ ააწყობენ.
SSR CSR-ს პირუკუ აბრუნებს: სერვერი თქვენს კომპონენტებს თითო მოთხოვნაზე უშვებს, წამოიღებს მონაცემებს და მზა HTML-ს აგზავნის. მომხმარებელი კონტენტს თითქმის მაშინვე ხედავს. ხრიკი მეორე მოქმედებაშია — ჰიდრაცია — სადაც ბრაუზერს მაინც უწევს იმავე JS-ის ჩამოტვირთვა და მთელი ინტერაქტიულობის უკან მიბმა.
კონტენტი ადრე იხატება (კარგია), მაგრამ არსებობს ფანჯარა, როცა ის მზად გამოიყურება და კლიკებს მაინც უგულებელყოფს — სანამ ჰიდრაცია არ დასრულდება.
თუ გვერდი ყველასთვის ერთნაირად გამოიყურება, რატომ უნდა აიგოს ის თითო მოთხოვნაზე? SSG მას დეპლოის დროს რენდერავს ჩვეულებრივ ფაილად, რომელსაც CDN მყისიერად და თითქმის უფასოდ გასცემს. ერთადერთი სისუსტე მოძველებაა — და ISR სწორედ ამის წამალია: სტატიკის სისწრაფე რჩება, ოღონდ გვერდები ჩუმად თავად ახლდება.
ISR დაქეშირებულ გვერდს მყისიერად გასცემს, შემდეგ კი ფონურად არეგენერირებს — მკითხველები ბილდს არასდროს ელოდებიან.
დოკუმენტაცია, სარეკლამო გვერდები, ბლოგები, changelog-ები — კონტენტი, რომელიც იშვიათად იცვლება და ყველასთვის ერთნაირად გამოიყურება. ყველაზე იაფი და სწრაფი, რაც არსებობს.
კატალოგები, ჩამონათვალები, სიახლეები — ძირითადად სტატიკური გვერდები, რომლებიც ან ძალიან ბევრია, ან ძალიან სწრაფად იცვლება სრული ბილდისთვის, და სადაც რამდენიმეწუთიანი მოძველება მისაღებია.
თითო მომხმარებლის ან რეალურ დროში მიღებული მონაცემები (კალათა, ბალანსი, დაშბორდები) — სტატიკური ქეშირება ერთი ადამიანის ხედს მეორეს ჟონავს. ისინი დინამიური დატოვეთ. მოთხოვნით რევალიდაცია კარგად ეწყობა ქეშის ტეგებს.
როგორც დაბეჭდილი გაზეთი (SSG) იმის საპირისპიროდ, რომელსაც პატარა ჩანართი ყოველ დილით ხელახლა ებეჭდება (ISR) — გაცილებით იაფია, ვიდრე თითო მკითხველისთვის ახალი გამოცემა.
ჩვეულებრივ SSR-ს ერთი ნაკლი აქვს: მონაცემების ყველაზე ნელი ნაჭერი მთელ გვერდს მძევლად იჭერს — არაფერი იგზავნება, სანამ ყველაფერი მზად არ იქნება. სტრიმინგი ამ ჩიხს არღვევს. სერვერი მყისიერ ნაწილებს მაშინვე აგზავნის, ნელებს კი ჩანკებად ატანს, ხოლო Suspense ხვრელებში ადგილმჭერებს ხატავს.
სტატიკური გარსი მყისვე იხატება და რეაგირებს; ნელი არე ჯერ სკელეტონს აჩვენებს, შემდეგ კი ნამდვილი კონტენტი ჩამოსტრიმავს, როცა მისი მონაცემები მოვა.
use cache დირექტივაზეა აგებული: თქვენ ნიშნავთ, რა იქეშება, დანარჩენი კი ისტრიმება.სტრატეგია ესთეტიკური გემოვნება არაა — ის ჩნდება ძებნის რანჟირებაში, იმ მეტრიკებში, რომლითაც Google გაფასებთ, და თქვენს ჰოსტინგის ინვოისში. აი, როგორ ჯდება სპექტრი თითოეულზე, და რომელი ფრეიმვორკები გაძლევთ არჩევანს თითო როუტზე.
SSG/ISR TTFB-სა და LCP-ს შორს მარცხნივ სწევს; CSR პირველ კონტენტს მარჯვნივ ხრის (ჯერ ცარიელი, მერე აფეთქება); SSR კი ადრეული ხატვაა ჰიდრაციის ხარვეზით ინტერაქტიულობამდე.
კროულერები და სოციალური სკრეიპერები HTML-ს კითხულობენ საუკეთესოდ. SSG/SSR/ISR მათ სრულ მარკაპს აწვდის; სუფთა CSR ცარიელი გარსის რისკს ქმნის — Googlebot JS-ს უშვებს, მაგრამ ბიუჯეტითა და დაგვიანებით. სტატიკური <title> და OG ტეგები ყველაზე უსაფრთხოა.
SSG/ISR LCP-ს იგებს (წინასწარ აგებული, edge-იდან გაცემული). SSR/სტრიმინგი ადრე ხატავს, მაგრამ ყურადღება ჰიდრაციის ფასზე INP-ისთვის. CSR ყველაზე ცუდი LCP-სკენ იხრება — არაფერი, სანამ ბანდლი არ გაეშვება.
სტატიკა ნებისმიერ მასშტაბზე თითქმის უფასოდ გაიცემა. SSR/სტრიმინგი თითო მოთხოვნაზე გამოთვლას გახდით — ხოლო edge რანტაიმები შეზღუდულ სენდბოქსს გასცვლიან რეგიონულ node-თან შედარებით დაბალ შეყოვნებაში.
აირჩიეთ იმის მიხედვით, რამდენად აპლიკაციურია პროდუქტი და რომელ ენაში ცხოვრობს თქვენი გუნდი — თითოეული ფრეიმვორკი მთელ სპექტრს უჭერს მხარს, ოღონდ სხვადასხვა სიმძიმის ცენტრზეა ოპტიმიზებული.
აირჩიეთ React აპლიკაციებისთვის, რომლებსაც წვრილმარცვლოვანი, თითო როუტზე კონტროლი სჭირდება.
აირჩიეთ სარეკლამო, დოკუმენტაციისა და კონტენტზე ორიენტირებული საიტებისთვის.
აირჩიეთ მჭლე, სწრაფი აპლიკაციებისთვის, სადაც ბანდლის ზომა მეფობს.
აირჩიეთ, როცა თქვენი გუნდი უკვე Vue-ზე აშენებს.
ერთი და იგივე აპლიკაცია სხვადასხვაგვარად რენდერდება იმის მიხედვით, რომელ რანტაიმზე მოხვდება — edge გლობალურად ახლოსაა, მაგრამ შეზღუდული; node სრულფასოვანია, მაგრამ რეგიონული.
აირჩიეთ, როცა Next.js თქვენი ფრეიმვორკია და DX-ს მნიშვნელობა აქვს.
აირჩიეთ გლობალურად დაბალი შეყოვნების SSR-სა და edge ლოგიკისთვის.
აირჩიეთ სტატიკაზე დაფუძნებული საიტებისთვის, სადაც ცოტაოდენი დინამიური წებოა.
„საუკეთესო“ რენდერინგის სტრატეგია არ არსებობს — არსებობს მხოლოდ ყველაზე იაფი, რომელიც როუტის რეალურ აქტუალურობასა და ინტერაქტიულობის საჭიროებას აკმაყოფილებს. მოგება იმის გაცნობიერებაა, რომ ეს თითო როუტის გადაწყვეტილებაა: ერთსა და იმავე აპლიკაციას შეუძლია გვერდიგვერდ გასცეს სტატიკური ლენდინგი, რევალიდირებული კატალოგი და კლიენტში დარენდერებული დაშბორდი.
მარცხნიდან მარჯვნივ მხოლოდ იმდენად წაიწიეთ, რამდენადაც როუტის აქტუალურობა და თითო მომხმარებლის საჭიროებები მოითხოვს — როუტების უმეტესობა უფრო ადრე ჩერდება, ვიდრე გგონიათ.
ხუთი სწრაფი კითხვა CSR-ზე, SSR-ზე, SSG/ISR-ზე, სტრიმინგსა და Core Web Vitals-ზე — მყისიერი უკუკავშირი, ავტორიზაციის გარეშე.
ნავიგაცია ← → ღილაკებით ან სქროლით · უკან ბიბლიოთეკაში