Fundamentos de SSR
驴Por qu茅 necesito aprender sobre SSR?
El problema de las Single Page Applications
Poniendo a prueba las Single Page Applications
驴Qu茅 es el Server Side Render?
Ventajas y desventajas del Server Side Render
Crea tu primer app con SSR
Tu nuevo proyecto: Helix Eye
Configurando Webpack para compilar TypeScript
Tu primer servidor con Express.js y TypeScript
Creando un template con HTML
Renderizando React desde el servidor
Hidratando la aplicaci贸n y separando el bundle del cliente
Initial Props y Consultas a la API desde el servidor
Consumiendo las Initial Props desde el cliente
Manejo de estilos desde el servidor
Bonus
Hot Module Replacement
Platzi Engine vs. Next.js
驴Quieres un Curso Avanzado de Server Side Render?
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
How to improve the rendering of styles in your web application?
It is essential that a web application not only works correctly, but also looks attractive and cohesive from the first moment the user sees it. A common challenge when rendering applications is the handling of styles from the server side (Server Side Rendering or SSR). Let's explore how to solve the problem of unpleasant styles in applications by using libraries such as styled-components and ensure that they look good from the start.
What is the initial problem with styles?
A common problem in web applications is the "flickering" of styles when the first snapshot of your HTML is sent from the server. That flickering is due to styles not loading correctly, making your application look bad before the JavaScript is fully executed on the client.
How can you fix style flickering?
To solve this problem, we use styled-components, a very popular library in the React development community. This library supports Server Side Rendering (SSR) and allows you to extract styles ready to be used on the server side. I will walk you through the implementation of this process.
Step 1: Create an instance of ServerStyleSheet
First, you must create an instance of ServerStyleSheet to capture the styles. This object will allow you to extract all the styles needed to render on the server.
import { ServerStyleSheet } from 'styled-components';
const sheet = new ServerStyleSheet();Step 2: Wrap the application with collectStyles
We must wrap the whole application with sheet.collectStyles to capture all the styles.
const app = sheet.collectStyles(<App/>);Step 3: Get the style tags
Use the getStyleTags method to transform these styles into valid CSS tags, which can be used inside your HTML template.
const styleTags = sheet.getStyleTags();Step 4: Inject the styles into the HTML template
Finally, you must inject these styles into the head of your HTML document, so that they are rendered before loading the JavaScript.
<!DOCTYPE html><html> <head> {styleTags} </head> <body> <div id="root">${app}</div> </body></html></html>What to check after implementation?
Once implemented, when you reload your application you should notice that the flickering disappears and the styles are applied correctly from the start. You can also disable JavaScript to ensure that the styles have been injected correctly.
What are some additional best practices?
-
Remove unnecessary tags: Once the DOM is fully loaded and the JavaScript is executed, consider removing style tags that are no longer needed. This can be done by manipulating the DOM as your app grows.
-
Use plugins for CSS optimization: Consider using Webpack plugins to more efficiently handle CSS extraction and injection in your app.
Keep exploring and experimenting with different configurations and tools. Continuous improvement is key in web development - keep researching and don't get discouraged if you encounter obstacles along the way!
Contributions 2
Questions 0
Want to see more contributions, questions and answers from the community?