Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Clase 47 de 58 • Curso Profesional de React con Redux 2016

Clase anteriorSiguiente clase

Miguel Ruiz Moreno

student•

¿Puedo realizar el desafío con JS puro o me tengo que basar en una librería?

Sergio Daniel Xalambrí

student•

Puedes hacerlo como quieras. Si querés hacerlo a mano o con una librería es decisión tuya.

Miguel Ruiz Moreno

student•

https://github.com/MiguhRuiz/PlatziReact/commit/841f4e59f7a38cd9b9a700ba3b73386659e3f7a4

Bryam Rodriguez

student•

Tengo un problema al cargar al aplicación, me dice que no está funcionando bien el server render porque es distinto el cliente y servidor:

(client) euaxvSy8fqW" href="/" data-reactid="6"><
(server) euaxvSy8fqW" href="//" data-reactid="6">

Parece que en el server se está generando un slash de más. Alguna forma de solucionarlo?

Mi repositorio es este https://github.com/bryamrrr/react-redux-blog

Sergio Daniel Xalambrí

student•

Actualiza react-router-dom, el error se arregla en la 4.0.0-beta.6, la actual es la 4.0.0-beta.7.

Bryam Rodriguez

student•

En el beta.6 no se me soluciona el error. Intente con el 7 y me sale otro:

Warning: Failed context type: The context router is marked as required in Link, but its value is undefined.

Gerard Fortea Fortea

student•

Yo he usado el paquete react-document-title. No se si es la forma más optima, pero funciona bastante bien.

En el render de cada componente añado el tag :

Para que tenga un valor por defecto, o cuando esta cargando los datos (no se si tiene que ver con lo que comentas del server-render) Pongo los tags en el Pages.jsx tal que :

<DocumentTitle title='Mi APP'>
    <main role="application">
      <Header />
      <Switch>
        {/* List de artículos */}
        <Route
          path="/"
          exact
          component={Home}
        />
        <Route
          path="/post/:id"
          exact
          component={Post}
        />
        <Route
          path="/vivienda/:id"
          exact
          component={detalleVivienda}
        />
        {/* Perfil de usuario */}
        <Route
          path="/user/:id"
          exact
          component={Profile}
        />
        {/* Error 404 */}
        <Route component={Error404} />
      </Switch>
    </main>
    </DocumentTitle>```

Simón Ottoniel González Acosta

student•

Hola brothers hice el desafio de esta manera, de verdad investigue y no pude hacer mas que esto para poder avanzar en el curso:

Para el render en el servidor hice una condicion dependiendo de la ruta solicitada:

let title = '';
  if (request.url === '/') {
    title = 'Home';
  } else if (request.url.substring(0, 6) === '/post/') {
    title = 'Post';
  } else if (request.url.substring(0, 6) === '/user/') {
    title = 'User';
  } else {
    title = 'Not Found';
  }

y del lado del cliente simplemente hice el set del document.title en el componentDidMount validando antes que el objeto window del DOM este disponible para no tener problemas con el render en el servidor:

if (typeof window !== 'undefined') {
    document.title = 'User';
}

Comenten si encontraron alguna solucion mejor o si de algo les sirvio jeje saludos compañeros.

Sergio Daniel Xalambrí

student•

La forma más fácil es usar react-helmet que soporta SSR.

Simón Ottoniel González Acosta

student•

vale sergio gracias 😃

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Bienvenido al curso

Actualizaremos este curso pronto

Bienvenido al curso de React

Fundamentos

¿Qué es React?

Hola Mundo con React

¿Qué es y cómo funciona el Virtual DOM?

Introducción a JSX

Creación de componentes

Componentes Puros vs de Estado

Ciclo de vida de un componente

Ciclo de vida de componentes

Manejo de eventos del DOM

Event handlers con parámetros personalizados

Contexto de la aplicación

Componentes de Alto Orden (HOC) y Mixins

Creación del proyecto

Presentación del proyecto

Instalación de Node.js y usando npm

Estructura de archivos

Iniciar un servidor de render básico - Render en Server

Module bundlers en JavaScript

Configurar Webpack para el servidor de render

Crear una app con React y React Router

Manejo de rutas en el servidor con React Router

Crear cliente para consumir el API

Iniciar la app en el navegador y configurar Webpack para producción

Iniciar un servidor de estáticos con zeit/list

Herramientas de desarrollo de React

Consumir el API y mostrar datos en la home

Perfil de usuarios

Estado de cargando y detalle de post

Paginación de posts mediante scroll infinito

Mostrar listado de comentarios en cada post

Estilizar componentes con CSS Modules

Linter y buenas prácticas con ESLint

Internacionalización con React Intl

Deploy a producción

Implementación de Redux

Patrones de arquitectura de aplicaciones Frontend

Implementación inicial con Redux para los posts

Uso de middlewares

Acciones asíncronas

Dividir el reducer en funciones más pequeñas y combinarlas

Datos inmutables con Immutable.js

Herramientas de desarrollo

Conclusiones

Pruebas automatizadas de reducers

Pruebas de componentes de React

Actualizando a la última versión de React Router

Desafíos

Cambiar el título de la página dependiendo de la ruta (en el servidor y cliente)

Implementar Redux en perfíl de usuario y detalle de un post

Cargar datos iniciales en el servidor

Desafío especial

Contenido bonus

Glosario

Evitar que webpack genere el CSS durante el build del servidor

LazyLoad de imágenes

Animaciones con ReactCSSTransitionGroup

Server render con Next.js

Aplicaciones universales/isomórficas

Iniciar proyectos con create-react-app

Diplomado de desarrollo de aplicaciones con ReactJS