guillaumemorin/SSR.md

## SSR.md

      
    Raw
  

              SSR.md
            
          
	Server Side Rendering (SSR)

Definition

Server side rendering allows to generated initial content on the server, so browser can download a page with HTML content already in place. (instead of filling content thru JavaScript with Client Side Rendering)
Pros


SEO

Website using Client Side Rendering may not be indexed correctly by search engines and Server-side rendering is one solution to solve this problem.

Improve app performance

We usually say that around 50% of users will abandon a site if it takes longer than 3 seconds to load.
With SSR, user can start viewing the page (even if he can’t really interact with it until React load is done) while React will be downloaded and go through process of building a virtual dom and attaching events to make the page interactive.

Cons


SSR TTFB(Time To First Byte)is slower than CSR, because server will have more work to create HTML thru synchronous call instead of just sending out a relatively empty response.


Size of HTML will be increased and will take longer to download by browser.


SSR will increase the complexity of app.


SSR will be way more difficult to use if backend is not made with Node.


SSR with React

Basic server side rendering using Express.

import express from "express";
import path from "path";

import React from "react";
import { renderToString } from "react-dom/server";
import Layout from "./components/Layout";

const app = express();

app.use( express.static( path.resolve( __dirname, "../dist" ) ) );

app.get( "/*", ( req, res ) => {
    const jsx = ( <Layout /> );
    const reactDom = renderToString( jsx );

    res.writeHead( 200, { "Content-Type": "text/html" } );
    res.end( htmlTemplate( reactDom ) );
} );

app.listen( 2048 );

function htmlTemplate( reactDom ) {
    return `
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>React SSR</title>
        </head>

        <body>
            <div id="app">${ reactDom }</div>
            <script src="./app.bundle.js"></script>
        </body>
        </html>
    `;
}
github.com/mhart/react-server-example
github.com/alexnm/react-ssr/tree/basic
SSR with Vue

Basic server side rendering using Express.

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>The visited URL is: {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)
ssr.vuejs.org/en/basic.html
React SSR with Python

React, Flask and Jinja2 templates
github.com/nitely/python-react-v8
github.com/markfinger/python-react
github.com/mic159/react-render
Going Isomorphic with Python and React
Ressources

The Benefits of Server Side Rendering Over Client Side Rendering
Will Google find your React content ?
Next.js - React Server Side Rendering Done Right => github.com/zeit/next.js
Use "Fetch as Google" tool to check if React app is correctly crawled