javascript - simple - react tutorial

Representación del lado del servidor ReactJS frente a la representación del lado del cliente

Question

Acabo de comenzar a estudiar ReactJS y descubrí que te da 2 formas de renderizar páginas: del lado del servidor y del lado del cliente. Pero, no puedo entender cómo usarlo juntos. ¿Son 2 formas separadas de construir la aplicación, o se pueden usar juntas?

Si podemos usarlo juntos, ¿cómo hacerlo? ¿Necesitamos duplicar los mismos elementos en el lado del servidor y del 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 al lado del servidor que ya fue renderizada previamente?

Answer 1

¿Son 2 formas separadas de construir la aplicación, o se pueden usar juntas?

Se pueden usar juntos.

Si podemos usarlo juntos, ¿cómo hacerlo? ¿Necesitamos duplicar los mismos elementos en el lado del servidor y del 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 al lado del servidor que ya fue renderizada previamente?

Es mejor tener el mismo diseño renderizado para evitar las operaciones de reflujo y repintado, menos parpadeo / parpadeos, su página será más fluida. Sin embargo, no es una limitación. Podría muy bien almacenar en caché el html SSR (algo que hace Electrode para reducir el tiempo de respuesta) / enviar un html estático que el CSR sobrescribe (renderizado del lado del cliente).

Si recién está comenzando con SSR, recomendaría comenzar de manera simple, SSR puede volverse muy complejo muy rápidamente. Construir html en el servidor significa perder el acceso a objetos como ventanas, documentos (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ás que usar webpack para empacar tu bundle.js). Cosas como las importaciones CSS, requieren vs importación repentinamente comienzan a morderte (este no es el caso en la aplicación React predeterminada sin webpack).

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 entregar 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 deberían ser:

1. SEO
2. Cargas más rápidas (lo descontaría)

Hack: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc

Answer 2

En realidad, me preguntaba bastante la misma investigación y aunque la respuesta que está buscando se dio en los comentarios, pero creo que debería ser más prominente, por lo tanto, estoy escribiendo esta publicación (que actualizaré una vez que pueda llegar a un mejor manera, ya que encuentro la solución arquitectónicamente al menos cuestionable).

Tendría que escribir sus componentes con ambas formas en mente , básicamente poniendo los interruptores if todas partes para determinar si está en el cliente o el servidor y luego hacer una consulta DB (o lo que sea apropiado en el servidor) o una llamada REST (en el cliente). Luego, tendría que escribir puntos finales que generen sus datos y los expongan al cliente y listo.

Una vez más, feliz de aprender sobre una solución más limpia.

Answer 3

Para un determinado sitio web / aplicación web, puede utilizar Reaccionar del lado del cliente , del servidor o de ambos .

Lado del cliente

Por aquí, estás ejecutando completamente ReactJS en el navegador. Esta es la configuración más simple e incluye la mayoría de los ejemplos (incluidos los que se encuentran en http://reactjs.org ). El HTML inicial representado por el servidor es un marcador de posición y toda la interfaz de usuario se representa en el navegador una vez que se cargan todos sus scripts.

Lado del servidor

Piense en ReactJS como un motor de plantillas del lado del servidor aquí (como jade, manillar, etc.). El HTML representado por el servidor contiene la interfaz de usuario como debería ser y no espere a que se carguen los scripts. Su página puede ser indexada por un motor de búsqueda (si no se ejecuta ningún javascript).

Como la interfaz de usuario se representa en el servidor, ninguno de sus controladores de eventos funcionaría y no hay interactividad (tiene una página estática).

Ambos

Aquí, el renderizado inicial está en el servidor. Por lo tanto, el HTML recibido por el navegador tiene la interfaz de usuario como debería ser. Una vez que se cargan los scripts, el DOM virtual se vuelve a representar una vez más para configurar los controladores de eventos de sus componentes.

Por aquí, debe asegurarse de volver a renderizar exactamente el mismo DOM virtual (componente ReactJS raíz) con los mismos props que utilizó en el servidor. De lo contrario, ReactJS se quejará de que los DOM virtuales del lado del servidor y del lado del cliente no coinciden.

Como ReactJS difiere los DOM virtuales entre los renderizados, el DOM real no está mutado. Solo los controladores de eventos están vinculados a los elementos DOM reales.

Answer 4

Fuente de la imagen: Blog de ingeniería de Walmart Labs

NB: SSR (Representación del lado del servidor), CSR (Representación del lado del cliente).

La principal diferencia es que con SSR, la respuesta del servidor al navegador del cliente, incluye el HTML de la página que se representará. También es importante tener en cuenta que, aunque con SSR, la página se procesa más rápido. La página no estará lista para la interacción del usuario hasta que los archivos JS se hayan descargado y el navegador haya ejecutado React.

Una desventaja es que el SSR TTFB (Tiempo hasta el primer byte) puede ser un poco más largo. Es comprensible, porque el servidor tarda un poco en crear el documento HTML, lo que a su vez aumenta el tamaño de respuesta del servidor.