Server render con Next.js

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

Contenido del curso

Bienvenido al curso

Fundamentos

Creación del proyecto

Implementación de Redux

Desafíos

Contenido bonus

Tomar examen

Comentarios

Marina Iglesia

student•

Se pueden hacer re direcciones con Next.js? (Por ejemplo, cuando terminas de hacer login te redirija a otra página).
Como se podría implementar rutas con esta forma localhost:3000/:nombre_de_usuario.

Gracias!

Sergio Daniel Xalambrí

student•

Sí, se puede, fijate en los ejemplos del repositorio.

Usuario anónimo

user•

¿Que otras alternativas hay a Next?
¿Para hacer una aplicación de alta escalabilidad y bastante robusta, recomiendas Next?

Sergio Daniel Xalambrí

student•

Con server-render incluido no conozco, existe create-react-app para iniciar proyecto rápidamente (pero solo con client-side render).

Recomiendo mucho Next.js si vas a empezar un proyecto desde cero. Con la versión 2 que va a salir dentro de poco se incluye la posibilidad de personalizar la configuración de Webpack y Babel que utiliza internamente para soportar cosas que Next.js por defecto no lo hace, y agrega otras funciones extras como poder personalizar las rutas del sitio, etc.

Igual si ya tenés un proyecto capaz usar Next.js no sea la mejor idea ya que es necesario adaptarse al proyecto que ya tenés, en esos casos (no tan comunes) recomiendo más hacer algo personalizado.

Diego José Molina Gonzalez

student•

Cómo se implementa Static File Server con Next? Es necesario?

Gracias!

Sergio Daniel Xalambrí

student•

No es necesario, crea una carpeta static en la raíz de tu proyecto y ahí coloca tus estaticos. En producción deberías usar un CDN.

Gabriel Alejandro Nuñez Natera

student•

La forma de utilizar estilos css cambia un poco con next.js 2.0, esta es la guia oficial de migracion de next:
😃

Marina Iglesia

student•

Cómo podría tener páginas donde la base de datos le pase un id.
Un link de ejemplo puede ser: localhost:3000/posts/:id

Gracias!

Sergio Daniel Xalambrí

student•

En los ejemplos del repositorio hay uno de como tener rutas con parámetros.

Miguel López Ariza

student•

podrían explicarme mejor el tema de hacer server-render con nextjs? realmente no me quedó claro como hacerlo vs usar nextjs en client-render.

Sergio Daniel Xalambrí

student•

Simplemente creas tus páginas en la carpeta pages y listo, Next.js se encarga de eso.

Usuario anónimo

user•

¿Que opiniones tienes de ?
¿Cuando usar Next y cuando usar esta?

Sergio Daniel Xalambrí

student•

No lo use, personalmente no recomiendo los boilerplates, los boilerplates tienen un problema, si hay un bug no hay forma de actualizar el boilerplate ya que uno los clona para poder usarlo, create-react-app que es un boilerplate se instala y si hay un error se actualiza y listo.

Sobre Next vs react-boilerplate, no creo que se puedan comparar ya que Next es un framework no un boilerplate, Next no solo hace que sea fácil crear una app universal con React, también define como desarrollar esa app.

Pablo Angel

student•

quiero saber algo please, porque cuando uso 'isomorphic-fetch’
tengo un server con express con una ruta asi:

server.get('/api/current-user', (req, res) => {
		let data_user = {}
		console.log(req.user)
		if(req.user){
			data_user.name = req.user.profile.displayName
			data_user.email = req.user.profile.emails[0].value
			data_user.avatar = req.user.profile.picture
		}
		res.json(data_user)
	})

y en nextjs tengo algo asi

static async getInitialProps ({ req }) {
		const response = await fetch('http://localhost:3000/api/current-user')
		const profile = await response.json()
		console.log(profile)
		//return { profile }
		return {  }
	}

si entro directo con el navegador a la ruta me parece el json con los datos, pero si hago fetch me aparece vacio y el console.log(req.user) me dice undefined, pero desde la ruta directa me dice que existe.

espero me entiendan help.

KaMi lml

student•

Para un proyecto que recién inicia, es recomendable usar Nextjs 2.x o la 3.beta defrente?

Sergio Daniel Xalambrí

student•

Inicia con la v2, cuando la v3 esté lista es solo cambiar la versión, simplemente agrega nuevas características, pero no cambia nada de lo anterior.

Dante Jauregui Yallico Jauregui Yallico

student•

Hola Sergio, entonces con NextJS sirve solo para proyectos pequeños? no es tan facil de escalar?

por otro lado como integrar con redux? por favor tus recomendaciones 😃

Sergio Daniel Xalambrí

student•

Next.js sirve perfecto para proyectos grandes, de hecho npm usa Next.js en su sitio web.

En el repositorio de Next.js hay ejemplos de como integrarlo con Redux y otras tecnologías.

Markoz Peña Mendez

student•

@Sergio Ahi alguna manera de que mi index este con extension JSX, si uso esa extension me da error next 😕

Solo funciona con JS 😦

Es unica duda que tengo amigo Sergio 😕

Saludos 😃

Sergio Daniel Xalambrí

student•

Next.js solo soporta archivos con extensión .js, no hay forma de usar archivos con extensión .jsx. Pero es la forma recomendada al usar Next.js, te recomiendo que uses .js y listo.

Denis Luyo

student•

Cual seria el stack recomendable para hacer aplicaciones web con React?¿

Sergio Daniel Xalambrí

student•

React + Next + Redux
Si tu backend usa GraphQL entonces Apollo como cliente de GQL.

El backend y la base de datos puede ser lo que quieras, eso es responsabilidad del backend no del frontend.

Denis Luyo

student•

A nivel corporativo tenemos servidores windos y usamos .net y c# en el backend y IIS como servidor web…

Queremos usar en el front end react, tendria una ventaja cambiar de asp a react?¿ sin utilizar node o next ?¿

Pablo Angel

student•

Alguna idea o como usar passportjs en nextjs

Sergio Daniel Xalambrí

student•

Desde la v2 podés crear un servidor personalizado, tendrías que hacer eso para iniciar un servidor de Express y configurar Passport ahí. Si revisas el repositorio de Next.js hay una carpeta de ejemplos y hay uno con un servidor de Express.

Pablo Angel

student•

tenia la sospecha de ello gracia profe

Juan Sebastián Zapata

student•

Hola Sergio! estoy haciendo un aplicación con NextJS y no se como implementar el middleware passport. ¿tienes algun ejemplo?

Sergio Daniel Xalambrí

student•

No tengo un ejemplo, pero revisá el ejemplo del repositorio de Next.js sobre como usarlo con Express e implementá Passport ahí.

Juan Sebastián Zapata

student•

Gracias Sergio!

Juan Luis Rojas León

student•

En next no se soporta la importación de archivos css

import 'react-datepicker/dist/react-datepicker.css'

Module parse failed: /Users/juanluisrojasleon/Desktop/app/node_modules/react-datepicker/dist/react-datepicker.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

¿Que loader se necesita configurar, y en donde se puede poner dicha configuración?

Sergio Daniel Xalambrí

student•

No, en Next no es posible importar CSS externo, en el vídeo vemos como hacer estilos directo en JS que es la forma recomendada por Next.

Diego José Molina Gonzalez

student•

A qué te refieres cuando dices de crear un CDN en producción?

Gracias!

Sergio Daniel Xalambrí

student•

Un CDN es un Content Delivery Network, es un servidor de estaticos pero distribuidos por todo el mundo. En producción deberías usar eso para tus estaticos, en desarrollo podés usar el servidor de estaticos de Next.js

Pablo Angel

student•

Sergio, una duda, estoy usando next.js mi pregunta es cada pages, sea index, about, etc. son independiente los datos de cada pages o index carga todos los datos en todas las pages tengo esa duda si se comporta como una page con router siglepage o cada index es una app con datos y about es otra app con datos.
espero me entiendas. gracias

Sergio Daniel Xalambrí

student•

Cada página carga sus datos propios usando getInitialProps, si necesitas compartir datos tenés que usar algo como Redux como guardar un estado global que se mantenga entre páginas.

Diego José Molina Gonzalez

student•

Hola! tengo una duda de conceptos, qué siginifica:

Code splitting
Hot module

Gracias!

Sergio Daniel Xalambrí

student•

Code splitting está explicado en el Glosario -> https://platzi.com/clases/react/concepto/contenido-bonus3872/glosario6336/material/
Hot Module Replacement (HMR) es que un componente se actualice sin recargar toda la página, manteniendo el estado de la aplicación.

Diego José Molina Gonzalez

student•

Gracias!

Diego José Molina Gonzalez

student•

Durante el proyecto del curso teníamos un archivo server en dónde se debiera hacer el server render con el html listo para la carga inicial y así mejorar la UX…
Mi pregunta es:
¿Dónde estaría el archivo server en Next para hacer el server render u otra configuración en nuestro BFF?

Sergio Daniel Xalambrí

student•

En Next.js no es necesario, el se encarga de eso, vos sólo tenes que colocar el código de tus páginas y listo.

Diego José Molina Gonzalez

student•

aguante Next entonces!

Guillermo Camarena Miramontes

student•

Hola, si quiero utilzar los templates como seria en este caso? Como los metas , header, footer?

server.get('/api/current-user', (req, res) => {
		let data_user = {}
		console.log(req.user)
		if(req.user){
			data_user.name = req.user.profile.displayName
			data_user.email = req.user.profile.emails[0].value
			data_user.avatar = req.user.profile.picture
		}
		res.json(data_user)
	})

static async getInitialProps ({ req }) {
		const response = await fetch('http://localhost:3000/api/current-user')
		const profile = await response.json()
		console.log(profile)
		//return { profile }
		return {  }
	}

Server render con Next.js

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