2015-10-27 17 views
8

Chciałbym wiedzieć, jak zbudował swoją aplikację internetową? Naprawdę mylę jako metodę, której powinienem użyć w moim projekcie.Która metoda jest szybsza, ekspresowe: renderowanie po stronie serwera a renderowanie po stronie klienta

Już zdecydował, które technologie wybrać.

1) node.js i wyrażać jako ram

2) MongoDB

3) poddaje się reakcji + Flux

Problem jednak teraz, należy użyć metody (A) lub metoda (B)

metoda (A) - Serverside renderowania HTML

app.get('/users/', function(request, respond) { 
    var user = "Jack"; 
    respond.render("user", { user: user }); 
}); 

Metoda (B) - stronie klienta renderowania HTML

app.get('/users/', function(request, respond){ 
     var user = "Jack"; 
     respond.json({ user: user }); 
    }); 

Metoda A będzie renderowania HTML z serwera i jak również dane.

Metoda B po prostu zareaguje danymi potrzebnymi dla klienta, którym jest React.js, aby mógł manipulować danymi.

Mój problem, z jakiej metody powinienem skorzystać? większość startupów korzysta z tej metody?

Dziękuję.

+0

Jeśli zamierzasz zbudować aplikację przy użyciu React, powinieneś przestrzegać schematu Flux. –

+0

Woops, nie czytałem Expressu w tytule.Niezbyt dobrze znany z Express, więc może być inaczej. –

+0

ogólnie rzecz biorąc, preferuje się renderowanie bardziej po stronie klienta i mniej na własnych serwerach. Ale tylko tyle można wyrenderować po stronie klienta i trudno byłoby odpowiedzieć na pytanie, co robi większość startupów bez określenia typu uruchamiania. – user2263572

Odpowiedz

5

To nie jest ani jedna, ani żadna propozycja.

React to framework po stronie klienta. Musisz renderować po stronie klienta. Pytanie brzmi, czy renderowanie po stronie serwera dodatkowo do renderowania po stronie klienta.

Odpowiedź? Jeśli możesz, TAK!

Otrzymasz korzyści SEO i początkowe zwiększenie wydajności przez renderowanie po stronie serwera. Ale nadal będziesz musiał wykonać to samo renderowanie po stronie klienta.

Proponuję wywoływanie hasła "reakcja izomorficzna" i lekturę. Oto jeden artykuł na ten temat. http://www.smashingmagazine.com/2015/04/react-to-the-future-with-isomorphic-apps/

+0

To jest poprawna odpowiedź. –

+0

Uwaga: "Reakcja izomorficzna" w odniesieniu do renderowania po stronie severatu Reakt jest teraz określany jako "Uniwersalny Reakt" – Sgnl

4

Cóż, to naprawdę zależy od tego, jaką wizję masz na współczesnej sieci i co chcesz zrobić.

Czy wolisz, aby użytkownicy czekali, wyświetlając program ładujący, gdy dane są wczytywane asynchronicznie, czy też wolisz, aby użytkownicy byli zajęci jak najdłużej?

Oto różne artykuły, które pomogą Ci oczyścić umysł i poznać różne korzyści, jakie możesz mieć, wykonując renderowanie po stronie serwera, a renderowanie po stronie klienta ma wiele problemów.

Można zobaczyć tę wiadomość z Twittera blogu mówiąc poprawić swoją początkową strona załadowała się o 1/5th, co przedtem, przesuwając rendering do serwera:

https://blog.twitter.com/2012/improving-performance-on-twittercom

Innym artykuł tym razem z Airbnb, opisując problemy można mieć z po stronie klienta rendering się:

http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

Istnieje także inny ciekawy artykuł mówiący o stronie klienta/Server-side rendering, przynosząc debatę na kiedy powinniśmy używać/nie użyć po stronie serwera lub po stronie klienta renderowania i dlaczego:

https://ponyfoo.com/articles/stop-breaking-the-web

A na zakończenie, mogę dać ci dwa więcej odnośnik bardziej skoncentrowane na reakcję, i opisując w jaki sposób renderowania po stronie serwera powinny być pomocne w Twoim przypadku:

https://www.terlici.com/2015/03/18/fast-react-loading-server-rendering.html

http://reactjsnews.com/isomorphic-javascript-with-react-node/

teraz, o co należy tak, to jest kwestia tego, co dokładnie musisz zrobić, według mnie, ale w zasadzie, możesz robić obie jednocześnie (po stronie klienta i po stronie serwera), aby mieć jak najlepszą obsługę.

Ta koncepcja nazywa się "izomorficznym javascript" i obecnie staje się coraz bardziej popularna.

+0

Możliwy kontrargument dla przypadku, który Państwo złożyli: [Opuszczanie stron JSP w kurz: przenoszenie szablonów po stronie klienta LinkedIn na dust.js] (https://engineering.linkedin.com/frontend/leaving-jsps-dust-moving-linkedin-dustjs-client-side-templates). Twoja wydajność może również zależeć od tego, w jaki sposób implementujesz szablony po stronie klienta. – jfriend00

+0

Tak, tak sądzę, sądząc po wielu różnych sposobach, w jaki można faktycznie implementować renderowanie po stronie klienta lub aplikacje "izomorficzne". – schankam

+0

Czytam większość linków, które udostępniasz, naprawdę otwiera mi to zdanie na temat obu, ale ponieważ renderowanie po stronie serwera jest szybkie, czy muszę kopiować moje kody dla interfejsu API, jeśli chcę korzystać z urządzeń mobilnych? –

2

Najprostszą architekturą jest po prostu dynamiczne renderowanie html na serwerze, bez żadnego Ajaxa, oraz z nową stroną HTML wymaganą praktycznie dla każdego kliknięcia klienta. Jest to podejście "tradycyjne" i ma zalety i wady.

Kolejnym najprostszym sposobem jest dostarczenie klientowi kompletnie statycznego html + js + css (aplikacji React) i wykonanie wywołań XMLHttpRequest do usług sieciowych w celu pobrania wymaganych danych (tj. Twojej metody B).

Najbardziej złożonym, ale idealnym podejściem (z perspektywy wydajności i SEO) jest zbudowanie "izomorficznej" aplikacji, która obsługuje oba podejścia. Pomysł polega na tym, że serwer wykonuje wszystkie niezbędne wywołania WS, które wykonałby klient, i renderuje stronę początkową odwiedzaną przez użytkownika (która może być głęboko połączoną częścią aplikacji), podobnie jak opcja A, ale za pomocą opcji React to wykonaj renderowanie, a następnie przekazuje kontrolę klientowi w celu przyszłej aktualizacji DOM. Pozwala to na szybkie, przyrostowe aktualizacje strony za pośrednictwem wywołań usług sieciowych, gdy użytkownik wchodzi w interakcje (np. Podobnie jak B). Nawigacja między różnymi "stronami" w tym momencie wymaga użycia interfejsu History API, aby wyglądał tak, jakbyś zmieniał stronę, podczas gdy faktycznie manipulujesz bieżącą stroną za pomocą usług internetowych. Ale wtedy odświeżyłeś przeglądarkę, serwer odeśle pełny kod HTML bieżącej strony, zanim przejdzie kontrolę do Reakcji po stronie klienta. Istnieje wiele przykładów takich metod dostępnych w trybie React + Flux + Node dostępnych online, wykorzystujących różne smaki Flux, które obsługują renderowanie po stronie serwera.

To podejście jest opłacalne w zależności od sytuacji. Prawdopodobnie warto zacząć korzystać z podejścia B (możesz udostępniać interfejs API HTTP między aplikacjami mobilnymi i witrynami), ale użyj architektury Flux, która obsługuje renderowanie po stronie serwera i pamiętaj o tym. W ten sposób, jeśli chcesz poprawić wydajność ładowania stron początkowych, masz na to środki.

Powiązane problemy