Kamil Płaczek: Server-side rendering niesie ze sobą liczne korzyści, o których nietrudno zapomnieć w świecie zdominowanym przez aplikacje typu single-page. Uruchomienie naszego SPA na serwerze może nie być jednak tak proste, jak pozornie się wydaje. Porozmawiamy o problemach, z którymi przyjdzie zmierzyć się programiście podczas implementacji SSR, a o których nie zawsze przeczytamy w sekcji "Getting started" dokumentacji naszej ulubionej biblioteki. Uwierzytelnianie, routing czy komunikacja z backendem – to niektóre z tematów, które poruszone zostaną podczas prezentacji na przykładzie Reacta i Express.js.
A presentation made for the NG-CONF Israel that took place in jun 2014 at Google TLV Campus (http://ng-conf.gdg.co.il/)
its an overview of how to use ngRoute and UI-Router in your app this slideshow contain a link for a working demo
Workshop Isomorphic Web Apps with ReactJS:
- Universal web apps - Isomorphic
- Server Side Rendering (SSR) with ReactJS
- Server Side Rendering with Redux
- Server Side Rendering with React Router
- Server Side Rendering: server.js - Main Entry Point
- Server Side Rendering: server.js - HTML Template
- Client main entry point: client.js
- Webpack bundles
- Avoiding FOUC - Webpack ExtractTextPlugin
- Webpack code splitting
- React Router - Configuration with Plain Routes
- React Router - Dynamic Routing & WebPack
- Dynamic Routing with new Reducers
- Combining new Reducers - ReducerRegistry
- Data fetching before rendering
- React Router + Redux + Redial: Server Side
- React Router + Redux + Redial: provideHooks
- React Router + Redux + Redial: Client Side
- SEO friendly universal web apps - React-Helmet
- React-Helmet - Server Side Rendering
Presentado por ingeniero: Marc Torrent
Slides from my talk at the Angular Community Days 2017 in Barcelona. In this keynote I talked about the JS single threaded nature, the problem WebWorkers solve, their basics, and the fancy Angular approach in order to bootstrap your whole app inside a WebWorker so the UI does not freeze when running CPU consuming tasks in your code.
A presentation made for the NG-CONF Israel that took place in jun 2014 at Google TLV Campus (http://ng-conf.gdg.co.il/)
its an overview of how to use ngRoute and UI-Router in your app this slideshow contain a link for a working demo
Workshop Isomorphic Web Apps with ReactJS:
- Universal web apps - Isomorphic
- Server Side Rendering (SSR) with ReactJS
- Server Side Rendering with Redux
- Server Side Rendering with React Router
- Server Side Rendering: server.js - Main Entry Point
- Server Side Rendering: server.js - HTML Template
- Client main entry point: client.js
- Webpack bundles
- Avoiding FOUC - Webpack ExtractTextPlugin
- Webpack code splitting
- React Router - Configuration with Plain Routes
- React Router - Dynamic Routing & WebPack
- Dynamic Routing with new Reducers
- Combining new Reducers - ReducerRegistry
- Data fetching before rendering
- React Router + Redux + Redial: Server Side
- React Router + Redux + Redial: provideHooks
- React Router + Redux + Redial: Client Side
- SEO friendly universal web apps - React-Helmet
- React-Helmet - Server Side Rendering
Presentado por ingeniero: Marc Torrent
Slides from my talk at the Angular Community Days 2017 in Barcelona. In this keynote I talked about the JS single threaded nature, the problem WebWorkers solve, their basics, and the fancy Angular approach in order to bootstrap your whole app inside a WebWorker so the UI does not freeze when running CPU consuming tasks in your code.
Upgrading from Angular 1.x to Angular 2.xEyal Vardi
Having an existing Angular 1 application doesn't mean that we can't begin enjoying everything Angular 2 has to offer. That's because Angular 2 comes with built-in tools for migrating Angular 1 projects over to the Angular 2 platform.
Specification-Driven Development of REST APIs by Alexander Zinchuk OdessaJS Conf
A good API specification isn’t just about writing API documentation well. I want to share examples of how one can:
- Make unit tests simpler and more reliable;
- Set up user input preprocessing and validation;
- Automate serialization and ensure response consistency, and event
- Enjoy the benefits of static typing;
This approach is a compilation of different discrete ideas, all based on the smart use of an API specification.
Promises are so passé - Tim Perry - Codemotion Milan 2016Codemotion
Promises saved JavaScript from callback hell, but we’re not out of the woods yet. Anybody who’s written heavily asynchronous code knows there’s still pain in the promise’d land, from the flood of extra ceremony required to the frustratingly fractured function scope. Fortunately, this isn’t the end of the line, and with generators and JavaScript's upcoming async/await syntax we can do even better. In this talk we’ll look at where asynchronous development is going next, how it’s going solve your problems, and what you need to do to put it into practice today.
The presentation slide for Vue.js meetup
http://abeja-innovation-meetup.connpass.com/event/38214/
That contains mainly about SSR (Server side rendering) + SPA with isomorphic fetch and client hydration
"The road to Ember.js 2.0" by Lucio Grenzi
Why should I use Ember.js? JavaScript MVC frameworks are plentiful. In this presentation I will give you some compelling reasons to consider Ember,and the the new parts coming from the upcoming version 2.0. Different from other framework the new vesion does not brings a far new world because the dev team has planned continuos releases in order to improve backward compatibility. But there are new parts, like in React, the "virtual DOM" to improve performance. In this talk I will go through the new parts of EmberJS 2.0
Upgrading from Angular 1.x to Angular 2.xEyal Vardi
Having an existing Angular 1 application doesn't mean that we can't begin enjoying everything Angular 2 has to offer. That's because Angular 2 comes with built-in tools for migrating Angular 1 projects over to the Angular 2 platform.
Specification-Driven Development of REST APIs by Alexander Zinchuk OdessaJS Conf
A good API specification isn’t just about writing API documentation well. I want to share examples of how one can:
- Make unit tests simpler and more reliable;
- Set up user input preprocessing and validation;
- Automate serialization and ensure response consistency, and event
- Enjoy the benefits of static typing;
This approach is a compilation of different discrete ideas, all based on the smart use of an API specification.
Promises are so passé - Tim Perry - Codemotion Milan 2016Codemotion
Promises saved JavaScript from callback hell, but we’re not out of the woods yet. Anybody who’s written heavily asynchronous code knows there’s still pain in the promise’d land, from the flood of extra ceremony required to the frustratingly fractured function scope. Fortunately, this isn’t the end of the line, and with generators and JavaScript's upcoming async/await syntax we can do even better. In this talk we’ll look at where asynchronous development is going next, how it’s going solve your problems, and what you need to do to put it into practice today.
The presentation slide for Vue.js meetup
http://abeja-innovation-meetup.connpass.com/event/38214/
That contains mainly about SSR (Server side rendering) + SPA with isomorphic fetch and client hydration
"The road to Ember.js 2.0" by Lucio Grenzi
Why should I use Ember.js? JavaScript MVC frameworks are plentiful. In this presentation I will give you some compelling reasons to consider Ember,and the the new parts coming from the upcoming version 2.0. Different from other framework the new vesion does not brings a far new world because the dev team has planned continuos releases in order to improve backward compatibility. But there are new parts, like in React, the "virtual DOM" to improve performance. In this talk I will go through the new parts of EmberJS 2.0
Maciej Treder ''Angular Universal - a medicine for the Angular + SEO/CDN issu...OdessaJS Conf
Are you ready for production? Are you sure? Is your application prefetchable? Is it readable for search engine robots? Will it fit into Content Delivery Network? Do you want to make it even faster? Meet the Server-Side Rendering concept. Learn how to bring first meaningful paint immediately, work with server-side Angular code, optimize API calls and more!
An introduction to Express, the Sinatra-inspired MVC framework for Node.JS. You'll learn how Express manages and processes routes, how to use the Jade template engine, and how to design data models aimed to play nice with Express.
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
09 - Express Nodes on the right Angle - Vitaliy Basyuk - IT Event 2013 (5)
60 вузлів під правильним кутом - миттєва розробка програмних додатків використовуючи Node.js + Express + MongoDB + AngularJS.
Коли ми беремось за новий продукт, передусім ми думаємо про пристрасть, яка необхідна йому, щоб зробити користувача задоволеним і відданим нашому баченню. А що допомагає нам здобути прихильність користувачів? Очевидно, що окрім самої ідеї, також важлими будуть: зручний користувацький інтерфейс, взаємодія в реальному часі та прозора робота з даними. Ці три властивості ми можемо здобути використовучи ті чи інші засоби, проте, коли все лиш починається, набагато зручніше, якщо інструменти допомагають втілити бажане, а не відволікають від головної мети.
Ми розглянемо процес розробки, використовуючи Node.js, Express, MongoDB та AngularJS як найбільш корисного поєднання для отримання вагомої переваги вже на старті вашого продукту.
Віталій Басюк
http://itevent.if.ua/lecture/express-nodes-right-angle-rapid-application-development-using-nodejs-express-mongodb-angular
Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion
Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming true! In this talk I am going to discuss about Universal (a.k.a. Isomorphic) JS and present some practical example regarding the major patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.
Node.js: scalability tips - Azure Dev Community VijayawadaLuciano Mammino
You finally built that amazing start-up idea you had in mind for years and you did it using Node.js! That's Great! You just launched it on Hacker News and you are very happy and proud... but now more and more people are using it and you start to have a nasty fear that Node.js won't scale because you now... it's single-threaded! Is your project doomed now? Do you have to invest your time on rewriting it in something like C++ or maybe Rust or even Go? You'd rather invest your time on adding valuable features for your users rather than learning a new language and rewriting everything from scratch, but what if nothing works anymore? And... by the way, what the heck "single-threaded" really means?! Fear no more, dear fellow developer! In this talk, we will discuss the architecture of Node.js going through its strengths and its weaknesses. We will then talk about scalability and I will share some valuable tips and tricks to make your Node.js app scale! Spoiler alert: you probably won't need Go or Rust :)
10 Excellent Ways to Secure Spring Boot Applications - Okta Webinar 2020Matt Raible
Spring Boot is an efficient way to build Java applications with the Spring Framework. If you’re developing apps that handle sensitive data, you should make sure they’re secure.
This session will cover HTTPS, dependency checking, CSRF, using a CSP to prevent XSS, OIDC, password hashing, and much more!
You’ll learn how to add these features to a real application, using the Java language you know and love.
* Blog post: https://developer.okta.com/blog/2018/07/30/10-ways-to-secure-spring-boot
* Cheat sheet: https://snyk.io/blog/spring-boot-security-best-practices/
* OIDC demo: http://bit.ly/spring-oidc-demo
Maciej Treder "Server-side rendering with Angular—be faster and more SEO, CDN...Fwdays
Are you ready for production? Are you sure? Is your application prefetchable? Is it readable for search engine robots? Will it fit into Content Delivery Network? Do you want to make it even faster? Meet the Server-Side Rendering concept. Learn how to implement it in your application and gain knowledge about best practices, such as transfer state and route resolving strategies.
Increase the speed of Dart software delivery with unit testing, code analysis, headless browser testing, cross-browser and mobile testing, continuous integration, and automated deployments.
Jak kraść miliony, czyli o błędach bezpieczeństwa, które mogą spotkać również...The Software House
Często zdarza się, że na testy bezpieczeństwa nie ma czasu lub budżetu. Testy te często są wykonywane na sam koniec, gdy nie ma możliwości na dłuższą analizę. Przez takie myślenie, padają firmy lub zwykli obywatele tracą dostęp do swoich danych czy po prostu te dane wyciekają. Przeanalizujemy kilka ostatnich ataków, zastanowimy się jak można było temu zapobiec.
Ostatnia prezentacja w historii Uszanowanka Programowanka. O przemianach, jakie przechodził meetup, rozwoju i zabawnych sytuacjach opowiada CTO The Software House.
W ciągu ostatnich 7 miesięcy przeszedłem drogę z poziomu Cloud Practitioner do Solutions Architect Professional, zdobywając nie tylko 5 certyfikatów, ale przede wszystkim wiedzę i praktykę, dzięki którym dziś pracuje mi się łatwiej i efektywniej. Na tym spotkaniu opowiem o motywacjach, wyzwaniach, strategiach nauki oraz najbardziej wartościowych źródłach wiedzy, dzięki którym zaplanujesz swoją drogę do certyfikatów. I to bez względu na to, czy dopiero zaczynasz swoją przygodę z AWS, czy masz już za sobą masę doświadczeń, które chcesz potwierdzić “na papierze”.
Dostępność, accessibility, a11y, WCAG… Dla niektórych to tylko dodatkowe tematy do przerobienia w projektach, które pochłaniają więcej czasu i budżetu. Według mnie to jednak ważny element, który zmienia internet w przyjazne miejsce dla wszystkich użytkowników. Jak reaguje twoja mobilna apka w słoneczny dzień? Czy buttony są wystarczająco duże, żeby wszyscy (nawet niedowidzący czy seniorzy) je zauważyli? Czy da się skorzystać z systemu, który tworzysz za pomocą klawiatury? I w końcu czy ta cała dostępność to tylko “hot topic”, a może faktyczna potrzeba? Odpowiem na te pytania głównie z perspektywy biznesu, ale nie zabraknie konkretnych wskazówek technicznych. Będzie o dostępności w pigułce.
Case study naszego wdrożenia rozwiązania czatu tekstowego przy użyciu zestawu Amazon Chime SDK. Moja prezentacja będzie składać się z przeglądu projektu, dlaczego w ogóle potrzebowaliśmy czatu tekstowego, podróży wdrożeniowej i wyzwań, przed którymi stanęliśmy (takich jak ograniczanie żądań i problemy ze skalowalnością). Wspomnę też pokrótce o innych funkcjonalnościach Amazon Chime, z których nie korzystaliśmy.
Pamiętacie jeszcze stare programy lub aplikacje pisane przy użyciu C, Assemblera lub innych bardzo przestarzałych technologii? Ja też nie. Za to jeden z naszych klientów pamięta i przyszedł z prośbą o przeniesienie danych z jego starej aplikacji do nowej. Podczas tej prezentacji będziecie mogli zobaczyć, jak poradziliśmy sobie z problemami wynikającymi z istniejących aplikacji oraz jak stworzyliśmy oprogramowanie migrujące dane na podstawie usług dostępnych w AWS.
Architektura serverless zyskuje na popularności każdego dnia. Większość developerów napotka to na swojej drodze kariery. Jak się z tym zmierzyć, jakich narzędzi użyć aby nie zwariować i uciec w Bieszczady? Jak wdrożyć sprawdzoną strukturę? Porozmawiajmy o tym jak dość płynnie wejść w świat architektury typu serverless.
Analiza semantyczna artykułów prasowych w 5 sprintów z użyciem AWSThe Software House
Case study na temat narzędzia, które zestawia analizę artykułów pod kątem płci z danymi o odbiorcach z Google Analytics, co pozwala na optymalizację treści i lepsze przyciąganie rzeszy czytelników. Dzięki wykorzystaniu AWS błyskawicznie przygotowaliśmy działające MVP.
Piątek po południu. Wypuściłeś aktualizację na serwer z nową funkcjonalnością (mimo, że wszyscy ci odradzali). Ale był tam krytyczny fix buga. Nie miałeś innego wyjścia. 5 minut po deployu okazuje się, że system leży – nowa funkcjonalność coś popsuła. Chyba czeka cię długi piątek/weekend. Gdybyś miał Feature Flags w projekcie, to twój piątek wyglądałby zupełnie inaczej. Feature Flags (albo Feature Toggles) pozwalają ukryć funkcjonalność przed użytkownikiem końcowym i wyświetlić ją warunkowo. Dzięki temu można spokojnie merge’ować wszystko do głównej gałęzi. Albo wyłączyć funkcjonalność w ciągu kilku minut, jeśli jest wadliwa. Na prezentacji opowiem, dlaczego w swojej aplikacji JavaScript powinieneś rozważyć Feature Flags. Wady, zalety i praktyczne wskazówki jak sobie z tym radzić. I to wszystko z perspektywy osoby, która korzysta z tego od dłuższego czasu. Po wyjściu z prezentacji będziesz wiedzieć kiedy warto stosować flagi i jak utrzymać je pod kontrolą.
TypeScript na przestrzeni lat udowodnił że da się okiełznać dużą część problemów wynikających z dynamiczności języka JavaScript. Strukturalne typowanie które oferuje potrafi w miarę nieinwazyjnie pomóc w wykrywaniu pułapek, w które wpadlibyśmy, pisząc w czystym JS. Co jednak w przypadku gdy coś kwacze jak kaczka ale nią nie jest? Czy da się zabezpieczyć developera przed pomieszaniem dwóch różnych jednostek, które w historii doprowadziły do nie jednej katastrofy? Na prelekcji przejdziemy przez różne case study i zastanowimy się jak pomóc TypeScriptowi w ostrzeganiu nas przed pułapkami których nie zawsze da się uniknąć w pierwotnym typowaniu strukturalnym.
Automatyzacja tworzenia frontendu z wykorzystaniem GraphQLThe Software House
W ramach tej prezentacji pokażę jak efektywnie wykorzystać GraphQL `codegen` do generowania hooków i typów, które pomogą obsłużyć dowolne query i mutation, czyniąc kod nie tylko czytelniejszym, ale również łatwiejszym w utrzymaniu. W tym celu wspólnie postawimy przykładowy projekt, a także poświęcimy kilka minut na skonfigurowanie IDE. Dzięki temu nasza codzienna praca stanie się przyjemniejsza i efektywniejsza.
Kiedy aplikacja napisana w Serverless Frameworku jest mała, można zamieść niektóre rzeczy pod dywan. Ale co, kiedy po kilku miesiącach zaczyna wychodzić spod niego prawdziwy potwór? Co, kiedy musisz przetestować jedną lambdę na środowisku, a deploy całego stacka trwa 20 minut? No i jak przeorganizować aplikację wiedząc, że ciągle będzie rosła? Dowiedz się, jak rozbiliśmy naszą hurtownię danych wykorzystując Serverless Compose. Jakie przyniosło nam to efekty i o czym dowiedzieliśmy się w trakcie.
Testy API: połączenie z bazą danych czy implementacja w pamięciThe Software House
Testy integracyjne wykonują realne żądania na API. Trzeba zatem zadbać o odpowiednie skonfigurowanie środowiska do testów. Kwestia danych to jedno z podstawowych zagadnień z którym należy sobie poradzić. Do tematu można podejść na kilka sposobów, ale sprowadzają się one do dwóch kategorii: baza danych albo implementacja w pamięci. Dowiedz się, które z nich sprawdzi się w twoim projekcie.
Opowieść o tym, jak w projekcie legacy, który już ledwo dychał, udało się zaimplementować read model oparty na ElasticSearch (choć nie bez przeszkód i czasami pod prąd). Podczas prezentacji aplikacja legacy i walka o przyspieszenie zapytań posłuży jako punkt wyjścia do przeanalizowania konceptu “read modeli”. Po co wdrażamy je do aplikacji? Jakie są metody utrzymania ich w spójności? A w końcu – ich wady i zalety. W przypadku wspomnianej aplikacji zapytania które trwały około 8 minut udało się przyspieszyć do poniżej 1s (choć nie obyło się to bez potknięć). Zobacz jak!
Firestore czyli ognista baza od giganta z Doliny KrzemowejThe Software House
Podczas codziennej pracy każdy z nas korzysta z różnych baz danych,
Każda baza ma zachowania typowe dla siebie. Firestore to nierelacyjna baza od Google, która posiada wiele nietypowych funkcjonalności, wiele ciekawych rozwiązań. W tej prezentacji dowiemy się o paru fajnych zastosowań w Firestore i na co warto uważać przy implementacji tego rozwiązania.
AWS, a w szczególności serverless computing, oferuje nam możliwość skalowania naszych systemów out-of-the-box. W większości przypadków jest to nam bardzo na rękę, ale… Co w sytuacji, gdy potrzebujemy z chirurgiczną precyzją kontrolować, ile aktualnie Lambd jest w użytku? Okazuje się, że nie jest to do końca taka prosta sprawa, gdyż AWS uporczywie robi wszystko, co może, aby wyskalować nasz system, niezależnie czy tego chcemy, czy nie. W tej prelekcji zaprezentuję możliwe sposoby rate limitingu naszych funkcji. Za przykład posłuży nam komunikacja z 3-rd party API, gdzie w większości przypadków jesteśmy ograniczeni ilością requestów, jakie możemy wykonać w jednostce czasu, żeby nie otrzymać 429-tki.
AWS oferuje zbiór niezwykle przydatnych narzędzi i rozwiązań. Potrafi też jednak zaskoczyć. W trakcie swojej prezentacji, Karol przedstawi kilka problemów na które natknął się w projektach, a które wzięły jego zespół z zaskoczenia. Skupi się też na tym, jak skutecznie sobie z nimi poradzić.
W trakcie swojej prezentacji Łukasz opowie o tym, czym jest Storyblok i co ma do zaoferowania w porównaniu do innych CMS-ów. Przed Wami przykład prostego komponentu który jest konfigurowalny, przykłady dodawania bardziej skomplikowanych interaktywnych komponentów oraz kilka słów o tym, na co uważać przy okazji pracy z tym CMS-em.
Amazon Step Functions. Sposób na implementację procesów w chmurzeThe Software House
Zmęczony łańcuchowym (i wieloogniwowym) wywoływaniem AWS Lambd przez inne Lambdy? Śledzenie poszczególnych inwokacji od początkowej do końcowej Lambdy to droga przez mękę? I nawet AWS X-Ray tu nie wystarcza? Rozwiązaniem jest Amazon Step Function, czyli usługa AWS umożliwiająca łączenie poszczególnych kroków logicznych w proces, z jasnym dostępem do historii i szczegółów wywołań.
AWS Amplify Studio jest nowością od AWS’a, która pozwala połączyć komponenty Figma z bazą danych i wygenerować gotowy kod React. Czy to oznacza, że frontend deweloperzy przestaną być potrzebni? A może te narzędzie to tylko chwyt reklamowy? I czemu AWS zainteresował się narzędziami low-code/no-code. Na to wszystko Aleksander odpowie w swojej prezentacji. I pokaże na żywo jak przejść od Figmy do gotowej aplikacji.
ER(Entity Relationship) Diagram for online shopping - TAEHimani415946
https://bit.ly/3KACoyV
The ER diagram for the project is the foundation for the building of the database of the project. The properties, datatypes, and attributes are defined by the ER diagram.
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
Talk presented at Kubernetes Community Day, New York, May 2024.
Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics.
1) Key patterns for Multi-cluster architectures
2) Architectural comparison of several OSS/ CNCF projects to address these patterns
3) Evolution trends for the APIs of these projects
4) Some design recommendations & guidelines for adopting/ deploying these solutions.
34. src/client/index.js
import {createAppStore} from './create-store';
const store = createAppStore(window.APP_STATE || {});
ReactDOM.hydrate(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
stworzenie store + odtworzenie stanu z ssr
35. src/server/index.js
import {createAppStore} from '../client/create-store';
. . .
app.get('*', async (req, res) => {
const store = createAppStore({});
const matchedRoute = routes.find(route => matchPath(req.path, route));
if (matchedRoute) {
if (matchedRoute.component && matchedRoute.component.loadData) {
await matchedRoute.component.loadData(store);
}
. . .
} else {
const state = store.getState();
const html = `<!DOCTYPE html>
. . .
<div id="root">${appString}</div>
<script>
window.APP_STATE = ${JSON.stringify(state)};
</script>
. . .
}
});
stworzenie store + inicjalizacja stanu podczas ssr
36. src/server/index.js
import {createAppStore} from '../client/create-store';
. . .
app.get('*', async (req, res) => {
const store = createAppStore({});
const matchedRoute = routes.find(route => matchPath(req.path, route));
if (matchedRoute) {
if (matchedRoute.component && matchedRoute.component.loadData) {
await matchedRoute.component.loadData(store);
}
. . .
} else {
const state = store.getState();
const html = `<!DOCTYPE html>
. . .
<div id="root">${appString}</div>
<script>
window.APP_STATE = ${JSON.stringify(state)};
</script>
. . .
}
});
stworzenie store + inicjalizacja stanu podczas ssr
37. src/server/index.js
import {createAppStore} from '../client/create-store';
. . .
app.get('*', async (req, res) => {
const store = createAppStore({});
const matchedRoute = routes.find(route => matchPath(req.path, route));
if (matchedRoute) {
if (matchedRoute.component && matchedRoute.component.loadData) {
await matchedRoute.component.loadData(store);
}
. . .
} else {
const state = store.getState();
const html = `<!DOCTYPE html>
. . .
<div id="root">${appString}</div>
<script>
window.APP_STATE = ${JSON.stringify(state)};
</script>
. . .
}
});
stworzenie store + inicjalizacja stanu podczas ssr
44. Problem 4: Uwierzytelnianie
• Jak renderować zawartość wymagającą autoryzacji? 🔐
Fetch token from the
server
Save token in
persistent storage
Pass token to the
server on requests
Authenticate &
authorize server-side