<h1>server-side-render</h1>
React v17, Router v6, Redux v4, Webpack v5, Babel v7
Decidi actualizar las dependencias del repositorio:
https://github.com/platzi/PlatziVideo/tree/feature/server-side-render-2020
Fue necesario:
- Actualizar importaciones de modulos para react-router-dom:
https://reactrouter.com/docs/en/v6/guides/ssr
- Importante comprender las actualizaciones de la version v5 -> v6:
https://reactrouter.com/docs/en/v6/upgrading/v5
- react-hot-loader esta obsoleto y ha sido reemplazado por react-refresh
- Se implementa react-refresh para Webpack a traves del pluggin:
https://github.com/pmmmwh/react-refresh-webpack-plugin
- Loaders de imagenes usando Webpack Assets Modules:
https://webpack.js.org/guides/asset-modules
- Destacar ademas que useEffect se ejecuta después del procesamiento. Por tanto no se ejecuta en el renderizado del lado del servidor.
https://redux.js.org/usage/server-rendering
https://www.npmjs.com/package/@redux-devtools/extension
- Se actualiza acceso a props, disponiendo acciones hacia el store desde el contenedor Player
import { useNavigate, useParams } from'react-router-dom';
import { useSelector, useStore } from'react-redux';
Resultado del codigo visible en el repositorio:
https://github.com/Maikpwwq/server-side-render/tree/feature/2022
Clonar el repositorio y ejecutar con:
npm run start:dev
Hay un error con el paquete react-refresh-webpack-plugin, lo removí y funcionó.
Me echas una mano. Tengo un proyecto que actualice desde estos conocimientos a SSR con express, y agregue ReactV18. Ahora tengo problemas con Nodemon para hacer que corra el proyecto. Repo: https://github.com/Maikpwwq/wavi-aeronautics
Pude solucionar en parte agregando @babel/eslint-parser, y desactivando como dices react-refresh, tambien añadi localstorage-polyfill y sessionstorage-polyfill para tener acceso a memoria dada la falta de un navegador en SSR, y, por lo tanto, no se tiene acceso a todas las API que proporciona el navegador, incluido localStorage y sessionStorage.
Importante notar que en react-router v6 dado que no se admite navegación en el renderizado inicial, aun tengo unos fallos usando la etiqueta Navigate y el metodo useNavigate. Y ahora con SSR tampoco me carga de manera adecuada los temas de stylos para @mui. Seguiré informando de futuros hallazgos.
Dada la version 5 de @mui debemos atender ciertos breakigChanges para solucionar nuestra actualizacion de stylos, los paquetes en esta version son llamados; import { makeStyles } from ‘@mui/material/styles’; sin embargo, MUI v5 también elimina el soporte para JSS (que están usando makeStyles / withStyles ), por lo que mueven esas API a un paquete heredado llamado @mui/styles. Estos dos paquetes ya no tienen efecto desde el Server Side Render para MUI, por lo que debemos en cambio; adoptar una solución de estilo más nueva ( sx , styled ) utilizando la emotion como motor de estilos predeterminado: import { styled, createTheme, ThemeProvider } from “@mui/material/styles”.