Server Side Render de React

en Platzi

Server Side Render

Client Side Render

VS

¿Por qué no ambos?

Ventajas de combinarlos

  • El usuario obtiene el contenido deseado inmediatamente
  • Los cambios se reflejan inmediatamente
  • Actualizaciones optimistas
  • Fallback en caso de errores
  • Velocidad de carga percibida
  • Mejora progresiva

Servidor

Cliente

Petición HTTP

Navegador

Node.js

Cómo implementarlo

Consulta

API

import React from 'react';
import { renderToString } from 'react-dom/server';
import http from 'http';

import App from './App.jsx';


const server = http.createServer(async (request, response) => {
    // obtenemos los datos
    const data = await getData();

    // renderizamos React a HTML
    const html = renderToString(
      <App {...data} />
    );

    // enviamos la respuesta
    response.write(html);
    response.end();
});


server.listen(process.env.PORT);

Servidor

Cliente

Petición HTTP

Navegador

Django/RoR/etc.

Renderer as a Service

Consulta

Renderer

Node.js

Petición HTTP

API

markfinger/python-react

from react.render import render_component

rendered = render_component(
    '/path/to/component.jsx',
    {
        'foo': 'bar',
        'woz': [1,2,3],
    }
)

print(rendered)

PlatziDev/react-render-cli

react-render MyComponent.jsx -p '{"text":"Hello World"}'

nexe

Usando React.js en el servidor con Django

El futuro...

Servidor

Cliente

Petición HTTP

Navegador

Django

Full React Render

Consulta

Renderer

Node.js

Petición HTTP

API

Servidor

Cliente

Petición HTTP

Navegador

Django

Platzi SPA

Consulta

API

JSON

Server Side Render de React en Platzi

By Sergio Xalambrí

Made with Slides.com

Server Side Render de React en Platzi

Qué es Server Side Render (SSR), por qué es importante y como lo implementamos en Platzi.

  • 1,658

More from Sergio Xalambrí