SPA

Presenter:

Yulia Galuzo

telegram: yuliaka71

Routing

• BrowserRouter

• HashRouter

• Link

• NavLink

• Static navigation

• Dynamic navigation

• Prompt

• No match

• Authentication

Pros

• tremendously fast.

​

• The static assets/resources (say: HTML, CSS, JS) are only loaded once in its lifespan.

​

• As no HTML/CSS/JS is passed from server to client every time the app is used, the SPAs only fetch data (JSON payload) in the form of API calls, which improves the User interaction.

Cons

• less secure as they enable hackers to inject client-side scripts using Cross Site Scripting (XSS) techniques.

 

• Memory leaks in Javascript may cause the system to slow down.

​

• One of the biggest disadvantage of SPA is difficulty in the implementation of SEO (Search Engine Optimisation).

Server Side Rendering as a way to solve the main problems of SPAs

1. A user types your URL into their web browser and hits enter.
2. Your server sees there is a GET request for the path ”/“.
3. It renders your app’s main component and wraps it inside of a standard HTML doc (DOCTYPE, html, head, body, etc) and sends the whole thing back as a response.
4. ​The browser sees it got an HTML document back from the server and its rendering engine goes to work. It soon finishes rendering the page.
5. At this point, the page is viewable and the browser starts downloading any scripts.
6. Once the scripts are downloaded, React takes over and the page is interactive.

Why Isomorphic Web Apps is not the Silver Bullet You’re Looking For

1. Frequent server requests.
2. An overall slow page rendering.
3. Full page reloads.
4. Non-rich site interactions.

Useful links

https://reacttraining.com/react-router/web/guides/philosophy

https://egghead.io/lessons/react-run-the-react-router-v4-examples-with-create-react-app

https://github.com/yuliaHope/rss-react-router