SSR-React

SSR-React

hola

https://github.com/yogain123/React-SSR

Why SSR

CSR

The entire goal of SSR is to make content visible to user as fast as possible

SSR Overview

we still use react in the browser, we just defer loading up react app to be a little bit further along the process

Architecture Overview

---

---

The Render Function

The App we will be making

---

---

---

---

Boilerplate setup

---

---

RenderToString Function

---

---

we will get error becoz node env has no idea what jsx is.

JSX on Server

How things work on CSR:

---

---

The same can be achieved on the server by:

---

---

Server Side web pack

running webpack, the above script will create a new folder with bundle.js inside it

node build/bundle.js will run the app

---

---

Rebuilding and Restarting App

  "scripts": {
    "dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
    "dev:build-server": "webpack --config webpack.server.js --watch",
  }

SSR, Isomorphic JavaScript, Universal JavaScript

We can even do SSR without React, like using the handlebar, yeh Server Side templating/Rendering

SSR was not specific enough so we come up with IJ, UJ

Babel is also running in Server Side so we can also use New import way in Server as we do it in react

Events

Client side:

BUT SSR will only send plain HTML page, no JS and all, so how any event will occur, like button click and all

React Router in SSR

---

---

we will get an error with the above diagram, so

---

---

---

---

---

---

---

---

Redux with SSR

---

---

Client-Side Rehydration

The states are not preserver to client when communicated down to the browser

How to Solve?

---

---

---

---

---

---

Authentication Issue

CSR:

SSR:

The problem above might be node server and API server might be in different domain or subdomain, so because of CORS request and Auth will not work

So...

Then why we are not using JWT??

if you want to use authentication in SSR app then it has to be cookie-based so the auth details could be included in the initial request made to your server

Adding Proxy

whenever node server gets a request to .../api , it automatically sends off to http:// react-ssr-api.herokuapp.com

Adding an App Component

---

---

Better SEO using meta tag

Setting tag with Helmet

---

---

---

---

https://www.npmjs.com/package/react-helmet

RenderToString vs RenderToNodeStream

RenderToString

---

---

RenderToNodeStream

---

---

Time to first byte (TTFB)
It is used by Google for indexing

But in case we use RenderToNodeSteam, but when it starts sending snipped of auth protected route, and then realize later it was not supposed to do that, then things will be problematic.