My notes about SSR React

gistfile1.md

Server Side Rendering

Why implement it?

1. SEO
2. Performance
3. Javascript and Accesibility

SEO

• Not every search engine crawler execute JS only Google and with Google must not be blocking calls.

• You need it if you want a good SEO in Bing, Yahoo, Baidu, Yandex, AOL, etc...

• Maybe your app doesn't need more than metatags

  => In my opinion this will be good for:

  1. Webs like e-commerce, online sellers, real states, etc
  2. Webs with more visits from search engines that are not Google

Performance

1. Indeed if SSR is WELL implemented the loading will be improved
2. Server Data also will come faster if we included in the HTML but this could slow down the markup download

Javascript and Accesibility

• Disabled Javascript it is doesn't related with Accesibility, most Screen Reader runs JS
• Less than 2.4% of your visits will have disabled Javascript
  • A big part is because performance issues, so you can improve it without add SSR

Complexity

React, Angular, Ember and other Client framework/libraries let you render in the server side.

Prepare your app for SSR means:

1. A complexity layer
2. A new architecture
3. New challenges

Complexity layer

Now your app should be shared between the server and client. And handle all kind of abstraction and edge cases. Also in the goal of increase the performance you will find many blocks.

Note: Create simple apps is really easy at least with React

New Architecture

1. Because you need client code in the server side then you will need a good wrapper for your server language at least you use NodeJS
2. Also you need to create a kind of architecture to share the code between client and server and don't repeat it.

• Routes
• Components
• Data

New challenges

1. Server calls

We can do it after JS is downloaded and the framework is running We can do it synchronously in the first request(this it is better depending of the amount of data) => The better is a mix of both solutions

2. Gap of Interaction

When the server send te first response the client can start interacting but there is a time window where the framework/lib didn't run yet so won't be any interaction => There are solutions for this issue but depends of your app and needs more code to handle the different contexts.

3. Dependencies

If you work with dependencies like window, localStorage, SessionStorage, Geolocalization and other Browser API you will need a kind of wrapper

4. Routes

All the client routes needs to be also in the server side

5. Cache (Scalability)

• Data should be cached using Redis, memcached, etc.
• The HTML needs to be cached also and now it is not so straightfoward because you are rendering the client app in every request

6. Client Libraries

You should ensure that all your libraries runs fine in the server side and doesn't have strong dependencies(mock all)

7. Session State

You will need another security layer that check and return the HTML depending of the session the user is - like the common web server approach -.

8. Grown

Every feature should be checked twice, and the abstraction should be clear in order to grow your application.

9. Server - Client Tight coupling

The updates in the client or server will affect both places, so the risk is higher than a common application. You need to take care of this problem when the architecture is being defined

React and Angular 2 propose

Angular 2

Web: https://universal.angular.io/

This is a project in progress, seems cool but is not finished yet. The documentation example is not right and is dificult to find updated and working examples. I got a running example where you can see how its working and how the implementation it is going so far.

React

• Build simple apps is very straightfoward. You need to work with React and ReactDOM in the server and renderToString does the things really easy.
• React-Router also work in the server side.
• Redux can be applied too.

Note: While your app grown in complexity start becoming difficult to acchieve with server rendering, without including the new challenges.

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

Middle tutorial: https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/

React Router + Redux: https://www.codementor.io/reactjs/tutorial/redux-server-rendering-react-router-universal-web-app