SSR: ¿Cúal es la diferencia entre SSR y Client Side Rendering (CSR)? ¿Por qué lo necesito? ¿Cómo se usa con redux?

En este artículo responderé a estas y muchas más interrogantes.

• En CSR tu navegador descarga una página HTML mínima, muestra el JavaScript y llena el contenido en él.
• Por otro lado, el SSR representa los componentes React en el servidor. La salida es contenido HTML.
• Puedes combinar estos dos (CSR + SSR) para crear una aplicación isomorfa

Contras del SSR:

• EL SSR puede mejorar el performance si la aplicación es pequeña pero haría lo
• Aumenta el tiempo de respuesta (y puede ser peor si el server está ocupado).
• Aumenta el tamaño de la respuesta, la página tardará más en cargar.
• Incrementa la complejidad de la aplicación.

Entonces, ¿Cuando debemos usar SSR?

1. SEO: Si quieres aparecer en los grandes buscadores debes usarlo.. Aún el javascript no es interpretado por los crawlers y lo que verán los buscadores como google será una página en blanco.
2. Mejorar el performance: El tiempo de primera interacción o “First user intereaction time” se reduce considerablemente en una media de 100ms.

Por tanto, ¿Cómo trabaja esto?…. En 3 simples pasos, te diré como:

1. Usando redux, crea un nuevo store en cada petición y opcionalmente dispara algunas acciones.
2. Saca el estado del store y realiza el SSR.
3. Manda el estado obtenido en la petición previa con la respuesta.

Ahora veremos en detalle como funcionan Redux y Next.js

Se asume que si estás aquí sabes lo que es Next y Redux. Next renderiza las páginas localizadas en ./pages usa getInitialProps para inyectar algunas propiedades a los componentes.

export default class Page extends Component {
  getInitialProps({pathname, query}) {        
    return {custom: 'custom'}; // pass some custom props to component
  }
  render() {
    return (
      <div>
        <div>Prop from getInitialProps {this.props.custom}</div>
      </div>
    )
  }
}
// OR in functional style
const Page = ({custom}) => (
  <div>
    <div>Prop from getInitialProps {this.props.custom}</div>
  </div>
);
Page.getInitialProps = ({pathname, query}) => ({        
  custom: 'custom' // pass some custom props to component
});
export default Page;


En el caso de redux necesitamos enviar algunas acciones antes de que se renderice el HTML, 
para ello lo mejor es el uso de getInitialProps

getInitialProps({store, pathname, query}) {
  // component will read it from store's state when rendered
  store.dispatch({type: 'FOO', payload: 'foo'});
  // pass some custom props to component
  return {custom: 'custom'}; 
}

Para trabajar apropiadamente con el store de Redux necesitaremos un HOC y para ello instalar un wrapper:

npm install next-redux-wrapper --save