Rendering SSR vs. CSR, Izomorfizm

0

Cześć,

Czy ktoś mógłby mniej więcej wyjaśnić o co chodzi z tym całym izomorfizmem i renderowaniem SSR? Z tego co mi wiadomo kiedyś strony renderowane były na serwerze, potem ze zwiększeniem poziomu interaktywności zaczęto robić rendering po stronie klienta. Czy tak? Teraz pojawiły się nowoczesne frameworki, które w sumie nie wiem jak działają. Wiem tylko że jak zrobię apkę w reakcie to potem jak uruchamiam przychodzi mi wszystko zbundlowane w webpacku i nie mogę zobaczyć kodu w przeglądarce. No i coś się mówi o izomorfizmie, co też nie wiem za bardzo czy jest nowością, ale chyba tak, bo gdzieś zobaczyłem tytuł że tego typu aplikacje to "przyszłość"... Jak to jest w praktyce? Co i kiedy jest lepsze? Czy to zależy od wielkości aplikacji? Tłoku na stronie? Czy aplikacje izomorficzne to "przyszłość", jak można gdzieniegdzie przeczytać? Czy SSR też trzeba się "nauczyć", czy jest to tylko kwestia prostej konfiguracji? Co jest łatwiejsze, szybsze w budowaniu, lepsze do "garażowych" aplikacji?

Pytanie dość ogólne, ale takiej też odpowiedzi się spodziewam - SSR vs CSR - ogólnie.
Ewentualnie będę wdzięczny za jakieś linki do artykułów.

Z góry dzięki za odpowiedzi

1

To może zacznę temat...

Czy ktoś mógłby mniej więcej wyjaśnić o co chodzi z tym całym izomorfizmem i renderowaniem SSR? Z tego co mi wiadomo kiedyś strony renderowane były na serwerze, potem ze zwiększeniem poziomu interaktywności zaczęto robić rendering po stronie klienta. Czy tak?

Tak, w skrócie można to tak ująć.

Teraz pojawiły się nowoczesne frameworki, które w sumie nie wiem jak działają. Wiem tylko że jak zrobię apkę w reakcie to potem jak uruchamiam przychodzi mi wszystko zbundlowane w webpacku i nie mogę zobaczyć kodu w przeglądarce.

Możesz - z pomocą przychodzi code splitting, sourcemapy, dev toolsy w przeglądarce, itd.

No i coś się mówi o izomorfizmie, co też nie wiem za bardzo czy jest nowością, ale chyba tak, bo gdzieś zobaczyłem tytuł że tego typu aplikacje to "przyszłość"...

Kolejny buzzword w IT. Czy nowość? Pierwsze teksty na ten temat pojawiły się po premierze Node.js, więc już dobre kilka lat. Natomiast niełatwo te rozwiązanie są adoptowane w praktyce, stąd co jakiś czas pojawia się nowy artykuł nierzadko z podtytułem "the future of web development". Ot, takie clickbaity w IT. ;)

Jak to jest w praktyce? Co i kiedy jest lepsze? Czy to zależy od wielkości aplikacji? Tłoku na stronie? Czy aplikacje izomorficzne to "przyszłość", jak można gdzieniegdzie przeczytać? Czy SSR też trzeba się "nauczyć", czy jest to tylko kwestia prostej konfiguracji? Co jest łatwiejsze, szybsze w budowaniu, lepsze do "garażowych" aplikacji?

SSR nie jest opcją, to must-have. CSR wpływa negatywnie na SEO (nadal, pomimo tego, że jest lepiej niż kilka lat temu), performance (głównie initial load, wielkość bundli, marnowanie transferu na mobile, itd. - pamiętajmy, że nadal internet 3G używa ~30% userów mobilnych, w niektórych rejonach np. Indie statystyki są jeszcze bardziej niekorzystne). W przypadku aplikacji izomorficznej teoretycznie jesteś w stanie zredukować duplikowany kod w JSie. Nie da się ukryć też, że przy mniejszych zasobach jesteś w stanie dużo szybciej wypuścić MVP. SSR to temat rzeka - podstawy nie są trudne i na pewno łatwiej myśleć o tym na początku niż gdy aplikacja już się rozrośnie. W przypadku Reacta możesz zainteresować się Next.js. Samo SSR to nie wszystko oczywiście, należy pomyśleć o service workerach oraz preloadzie/prefetchu assetów i odpowiedniej kompresji. Niestety często jest to pomijane i wypuszcza się aplikację, która działa dobrze na desktopie, ale initial load w postaci 5 MB powoduje irytację, szczególnie gdy większość stron w internecie przestaje być użyteczna mając tylko internet 3G.

Ewentualnie będę wdzięczny za jakieś linki do artykułów.

Dwa nieco odmienne punkty widzenia na początek:
https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc
https://voice.kadira.io/say-no-to-isomorphic-apps-b7b7c419c634

1 użytkowników online, w tym zalogowanych: 0, gości: 1