Галоўная > Разбор пытанняў з рэальных сумоўяў - JS Агульнае. SSR (Server-Side Rendering) vs. CSR (Client-Side Rendering). Ізаморфны рэндэрынг.

Разбор пытанняў з рэальных сумоўяў - JS Агульнае. SSR (Server-Side Rendering) vs. CSR (Client-Side Rendering). Ізаморфны рэндэрынг.

SSR CSR js сумоўе

Пытанне

Чым SSR (Server-Side Rendering) адрозніваецца ад CSR (Client-Side Rendering)? Плюсы і мінусы кожнага падыходу? Што такое ізаморфны рэндэрынг?

Адказ

SSR і CSR - 2 розныя падыходы ў распрацоўцы web-прыкладанняў.

Пры выкарыстоўванні CSR-падыходу на серверы захоўваюцца асобна html, css, js-файлы, і кліент атрымлівае іх таксама асобна, а не ў выглядзе гатовай старонкі. Уся логіка адлюстравання старонкі выконваецца на баку кліента.

Калі кліент клікае на пункт меню, пры умове, што на кліенце ўжо ёсць усе неабходныя даныя, запрос на сервер наогул можа не адпраўляцца і JavaScript хутка перамалюе старонку.

Калі ж даныя ўсё ж будуць патрэбныя, кліент звычайна атрымлівае толькі самі даныя (часцей за ўсё у фармаце JSON). Далей JavaScript змяняе старонку ў адпаведнасці з атрыманымі данымі.

Пры выкарыстоўванні SSR наадварот, ўся логіка выконваецца на баку сервера (сучасны варыянт), фармуецца гатовая старонка, кліент атрымлівае html-старонку, гатовую для адлюстроўвання.

Такім чынам, галоўным адрозненнем паміж SSR і CSR з'яўляецца месца, дзе адбываецца выкананне логікі адлюстравання старонкі.

Плюсы CSR (Client-Side Rendering):

  • анімацыя і багацейшы інтэрактыўны змест.

  • хутчэйшая навігацыя паміж старонкамі.

  • для загрузкі наступнай старонкі могуць патрабавацца толькі даныя, што дазваляе эканоміць трафік і паскараць хуткасць загрузкі старонкі.

  • меньшая нагрузка на сервер.

Мінусы CSR (Client-Side Rendering):

  • першапачатковая павольная загрузка прыкладання ў параўнанні з SSR.

  • праблемы з SEO, бо пашуковыя робаты дагэтуль не навучыліся добра чытаць JavaScript (могуць чытаць код толькі пашуковыя робаты Google і толькі абмежаваны час).

  • першапачатковыя запросы і наступная адмалеўка старонкі моцна нагружаюць тэхніку кліента.

Плюсы SSR (Server-Side Rendering):

  • хуткая першапачатковая адмалёўка старонкі ў браўзеры.

  • SEO-friendly, то бок пашуковыя робаты выдатна разумеюць, што знаходзіцца на старонках.

  • меньшая нагрузка на машыну кліента.

Мінусы SSR (Server-Side Rendering):

  • больш павольная загрузка наступных старонак (TTFB - time to first byte будзе значна павольней).

  • значна вышэйшая нагрузка на сервер, таму што кожны раз яму трэба сабраць у сябе старонку і толькі потым вярнуць яе кліенту.

  • меньш інтэрактыўнасці

Ізаморфны рэндэрынг ўключае ў сабе сумесь абодвух падыходаў, калі першая старонка фармуецца на серверы, як пры SSR, далей фонам падцягваюцца скрыпты і прыкладанне пачынае працаваць, як пры CSR.

Складаней, таму што патрабуе асобных ведаў і выкарыстоўвання спецыяльных інструментаў распрацоўкі.

loveJS, 2023-02-25
Каментары

    (Каб даслаць каментар залагуйцеся ў свой уліковы запіс)

    ;