¿Son dos formas distintas de crear la aplicación o se pueden utilizar juntas?
Se pueden usar juntos.
Si podemos usarlo juntos, ¿cómo hacerlo? ¿Necesitamos duplicar los mismos elementos en el lado del servidor y en el lado del cliente? O, ¿podemos simplemente construir las partes estáticas de nuestra aplicación en el servidor y las partes dinámicas en el lado del cliente, sin ninguna conexión con el lado del servidor que ya fue renderizado previamente?
Es mejor renderizar el mismo diseño para evitar operaciones de reflujo y repintado, menos parpadeos / parpadeos, su página será más fluida. Sin embargo, no es una limitación. Puede almacenar en caché el html SSR (algo que hace Electrode para reducir el tiempo de respuesta) / enviar un html estático que es sobrescrito por el CSR (render del lado del cliente).
Si recién está comenzando con SSR, le recomendaría comenzar simple, SSR puede volverse muy complejo muy rápidamente. Crear html en el servidor significa perder el acceso a objetos como ventana, documento (los tiene en el cliente), perder la capacidad de incorporar operaciones asíncronas (listas para usar) y, en general, muchas ediciones de código para que su código sea compatible con SSR ( ya que tendrá que usar webpack para empaquetar su bundle.js). Cosas como las importaciones de CSS, requieren vs importación de repente comienzan a morderlo (este no es el caso en la aplicación React predeterminada sin paquete web).
El patrón general de SSR se ve así. Un servidor Express que atiende solicitudes:
const app = Express();
const port = 8092;
// This is fired every time the server side receives a request
app.use(handleRender);
function handleRender(req, res) {
const fullUrl = req.protocol + '://' + req.get('host') + req.originalUrl;
console.log('fullUrl: ', fullUrl);
console.log('req.url: ', req.url);
// Create a new Redux store instance
const store = createStore(reducerFn);
const urlToRender = req.url;
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<StaticRouter location={urlToRender} context={{}}>
{routes}
</StaticRouter>
</Provider>
);
const helmet = Helmet.renderStatic();
// Grab the initial state from our Redux store
const preloadedState = store.getState();
// Send the rendered page back to the client
res.send(renderFullPage(helmet, html, preloadedState));
}
Mi sugerencia para las personas que comienzan con SSR sería ofrecer html estático. Puede obtener el HTML estático ejecutando la aplicación CSR SPA:
document.getElementById('root').innerHTML
No olvide que las únicas razones para usar SSR deben ser:
- SEO
- Cargas más rápidas (lo descartaría)
Hack: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc
