paint-brush
Is server side rendering a good choice for React applicationby@jimmy_shen
3,927 reads
3,927 reads

Is server side rendering a good choice for React application

by Jimmy ShenOctober 28th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

You may notice <code class="markup--code markup--p-code">X-Run-Time-ms</code> is only <code class="markup--code markup--p-code">40</code> ms for 10 GraphQL queries (this is local development environment). Typically backend server need to go through authentication for every request. Having 10 requests means backend server need to go through authentication 10 times, while it only needs one time when batching them in one request&nbsp;.
featured image - Is server side rendering a good choice for React application
Jimmy Shen HackerNoon profile picture

You may notice X-Run-Time-ms is only 40 ms for 10 GraphQL queries (this is local development environment). Typically backend server need to go through authentication for every request. Having 10 requests means backend server need to go through authentication 10 times, while it only needs one time when batching them in one request .

For page that requires authentication in React application, usually it calls API to get user information first, then displays menu and content based on user information. this leads to sequence API call pattern: first API call is for user information, second is for the other contents.

How can we avoid this sequential API calls to get user information? Think about one type of server-side rendering, rehydrate that SSR returns state of store and client use it as initial state to hydrate the client store (redux in such context). Usually API call to get user information does not depend on anything and should be same . What if we alway run API of getting user information on server, but not via new server-side rendering way. This can be done via traditional server rendering. We can serve the index.html of react application in jsp (in java) and calls API of getting user information and return it as window.__INITIAL_STATE__ .

This turns out great that most of pages in my react application only generate one request.