・Srever-side rendering(SSR) in React is a technique where the application's HTML is generated on the server for each request, then sent to the client. This approach provides faster initial page loads and improves search engine optimization(SEO) compared to traditional client-side rendering(CSR).
How It Works
1. Initial Request: The user's browser sends a request to the server.
2. Server Renders: The server (typically running Node.js)executes the React code and generates the full HTML content.
3. HTML Sent to Client: The complete, ready-to-display HTML page is sent to the browser immediately. The user can see the content almost instantly.
4. Hydration: The browser downloads the JavaScript bundle, and React then "hydrates" the existing static HTML by attaching event handlers and making the page interactive, just like a standard client-side React app.
Benefits
・Improved Performance: Users see content sooner because they don't have to wait for the JavaScript bundle to download and execute before any UI appears.
・Better SEO: Search engine crawlers can easily read and index the fully rendered HTML content, which can be a problem with pure client-side applications that require JavaScript execution for content.
・Enhanced User Experience: Provides a more robust initial experience, especially for users on slow networks or devices with limited processing power.
Top comments (0)