Me parece que estos temas son mejor explicarlos con mucha teoría y ejemplos prácticos. Parecido al curso de nodejs, sólo copian mucho código sin hacer pruebas…
Conocimientos necesarios para aplicar SSR
Lo que aprenderás sobre server side render
Presentación del proyecto del curso y sus herramientas
¿Qué es Server Side Rendering?
Preparando entorno para aplicar SSR
Actualizando dependencias en NPM
Creación del servidor en Express
Usando Nodemon y Dotenv
Integración de Webpack con Express
Integración de Express con React
Servir React con Express
Abstrayendo React Router, creando history y haciendo initialState más accesible
Aplicar Server Side Rendering
Definición de la función principal para realizar el renderizado desde el servidor
Assets require hook
Hydrate y estado de Redux desde Express
Trabaja con entornos de desarrollo y producción
Configurando nuestro servidor para producción
Configurando webpack para producción
Optimización del Build
Aplicar hashes al nombre de nuestros builds
Buenas prácticas de Server Side Render
Vendorfiles en Webpack: definiendo cacheGroups
Vendorfiles en Webpack: generando el vendorfile
Configuración de ESLint
Alternativas al SSR con Express
Cómo implementar Next.js
Cómo usar Gatsby.js
Cuando usar cada una de las herramientas presentadas
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesión
Servir React con Express
8/22Recursos
Aportes 21
Preguntas 6
Ordenar por:
Servir React con Express
Para poder empezar a correr React sobre nuestro servidor de express debemos copiar el html que se encuentra en nuestra carpeta public y pegarlo en nuestra respuesta principal del servidor de Express. Esto se vera de la siguiente forma:
app.get('*', (req, res) => {
res.send(`<!DOCTYPE html>
<html>
<head>
<title>Platzi Video</title>
</head>
<body>
<div id="app"></div>
</body>
</html>`);
});
Luego en nuestra configuracion de Webpack eliminamos las siguientes lineas de codigo:
//El HTML plugin
const HtmlWebPackPlugin = require('html-webpack-plugin');
new HtmlWebPackPlugin({
template: './public/index.html',
filename: './index.html',
}),
Posteriormente alteramos las siguientes líneas:
//Alteramos el nombre del bundle de js por app.js
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'assets/app.js', //Cambio aqui
publicPath: '/',
},
//Cambiamos el nombre del bundle del css por app.js
new MiniCssExtractPlugin({
filename: 'assets/app.css', //Cambio aqui
}),
Por ultimo, modificamos el HTML que estamos enviando desde el servidor, agregando las líneas que hacen el llamado al bundle del css y del js.
Quedando de la siguiente forma:
app.get('*', (req, res) => {
res.send(`<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/app.css" type="text/css"/>
<title>Platzi Video</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="assets/app.js" type="text/javascript"></script>
</html>`);
});
Ahora sí, podemos montar nuestro servidor nuevamente y comprobar el resultado
Nota: Para saber si realmente estamos haciendo SSR podemos desactivar Javascript desde las configuraciones de desarrollador del navegador.
Asi me va quedando, modificando cada una de las imagenes.
Asi se ve cuando selecciono una pelicula.
Cuando no carga la pelicula parece asi.
y si no es ese el caso va a aparecer asi.
Wow genial
Esto se pone bueno 😄
malisima clase
vamos con todo che!
les dejo mi github
Tuve que usar: “const serverConfig = { serverSideRender: true };”
if (ENV === 'development') {
console.log(`${ENV} config`);
const webpackConfig = require('../../webpack.config');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const compiler = webpack(webpackConfig);
const serverConfig = { serverSideRender: true };
app.use(webpackDevMiddleware(compiler, serverConfig));
app.use(webpackHotMiddleware(compiler));
}
Si no se les refresca automaticamente el navegador les recomiendo borrar node_modules y package.json. Copiar el package.json igual del proyecto y ejecutar npm i para tener las mismas versiones que el profesor.
Al menos eso fue lo que me ayudó y aquí les dejo el enlace al commit de esta clase: https://github.com/platzi/PlatziVideo/tree/1a68285cdb55b9a2a79c534f69cee139269b20fa
Mi navegador no se refresca automaticamente, y mi compilacion sale compiled successfully, y no tengo errores en consola. alguna idea? y si lo estoy corriendo con nodemon.
A los nuevos que estamos llegando al curso, les recomiendo que repasen los módulos anteriores de la escuela de JS, ya que aquí ya se dan por sentadas cosas básicas que deberíamos dominar. Por el contrario nos podríamos desmotivar y frustrar por un avance atropellado. Por ejemplo repasen el curso de webpack que es muy necesario para entender las configs y también el de react para los próximos módulos.
El orden de los middlewares importa
Recuerden que es importante en qué línea mandan llamar a su middleware. En este caso debe ir antes del app.get()
if (ENV === 'development') {
console.log('Development config');
const webpackConfig = require('../../webpack.config');
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware');
const compiler = webpack(webpackConfig);
const serverConfig = { port: PORT, hot: true };
app.use(webpackDevMiddleware(compiler, serverConfig));
app.use(webpackHotMiddleware(compiler));
}
app.get('*', (req, res) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/app.css" type="text/css">
<title>Platzi Video</title>
</head>
<body>
<div id="app"></div>
<script src="assets/app.js" type="text/javascript"></script>
</body>
</html>
`);
});
Hola, tengo un problema y es que cuando ya he configurado todo, en la consola del navegador me dice :
app.js:2 Uncaught SyntaxError: Unexpected token ‘<’ y si examino el error me muestra el html que servimos como error, pensé que había usado las comillas incorrectas pero no es eso.
No me queda claro para que sirve @babel/register
Una pregunta, no sería mejor crear otro archivo “webpack.dev.config.js” y un script que ejecute una configuracion de desarrollo, para poder ejecutarlo sin crear la carpeta dist con todos los archivos, y no mezclar la configuracion de desarrollo con la configuracion de produccion???
¡¡Buenísimo!! 🤩🤩🤩
Server side rendering 🤩
Creo que debo repasar.
Genial!
Como dicen por ahi es mejor crearse un nuevo webpack.config para tener los antiguos como referencia.
En esta clase lo que hacemos: compilar la app que esta en frontend en un archivo “app.js” y asi desde el servidor enviamos un html con el script ejecutado.
🍏
Algo que e notado es que los bundles se cargan 2 veces , 1 cuando es SSR y la otra al momento de hacer el CSR, esto tiene mucho sentido que pase, pero si no ponemos atención en estos detalles podemos generar un errores.
Batalle un poco en poder hacer que funcionara mi app debido a que en el momento en que estoy tomando el curso Webpack lanzó su versión 5. Y con ello dejaron de funcionar las instrucciones, incluso desde la clase pasada.
.
Revisando las documentaciones tanto de webpack como del react-hot-loader realicé modificaciones tanto en los config como en el archivo del servidor y el índex de la app.
.
Les dejo mi GitHub en el branch que lo estoy trabajando por si quieren revisar un poco.
.
Saludos
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.