Renderizado y pre-renderizado para el servidor React

Es necesario utilizar la biblioteca reactiva-router-config, que puede hacer coincidir el componente correspondiente según la ruta. Obtener el componente correspondiente a la ruta actual es la clave para lograr la sincronización de la ruta. y luego lo obtiene a través del método API estático de los datos de la interfaz del componente.

Principalmente, el servidor obtiene los datos de la interfaz a través del método API estático del componente, crea un almacenamiento y luego los pasa al front-end a través de la ventana. tienda = tienda.

El objetivo principal es adjuntar el archivo js del front-end al archivo html de plantilla renderizado por el servidor.

Escenarios de aplicación de renderizado del servidor: generalmente, solo se realiza para páginas importantes, como la página de inicio, lo que puede mejorar la velocidad de carga de la primera pantalla y es beneficioso para el SEO. Otras páginas son en realidad RSE.

El renderizado previo no compila HTML en tiempo real como el renderizado del servidor. Solo genera varias páginas estáticas específicas para una ruta específica durante la construcción, lo que significa que podemos compilar algunos componentes de páginas específicos en archivos HTML al compilar a través del complemento Webpack y enviarlos directamente a los motores de búsqueda como recursos estáticos.

1. La ZEPA se convierte en AMP.

2. Se debe utilizar el enrutamiento histórico en lugar del enrutamiento hash, por lo que el servidor a menudo necesita configurar el enrutamiento para páginas que no están renderizadas previamente. Por ejemplo, la configuración de nginx es la siguiente:

3. El enrutamiento dinámico, como /detail/:id, no es compatible, pero puede reemplazarse por el enrutamiento de consultas, como /detail? id=

4. Los escenarios de aplicación son limitados y todo lo que podemos pensar son aplicaciones de pantalla esqueléticas, como la página de inicio. Por razones de velocidad, usaremos algunos componentes de pantalla esqueléticos. Si no se realiza la renderización previa, el componente de pantalla esqueleto esperará hasta que se cargue todo el archivo js antes de renderizar, lo cual no es una buena experiencia. Si se completa la renderización previa, la renderización comenzará cuando se cargue el archivo html.