Skip to content

Latest commit

 

History

History
59 lines (36 loc) · 3.92 KB

CSR-SSR-hydration.md

File metadata and controls

59 lines (36 loc) · 3.92 KB
Raw

Rendering Methods

Client-Side Rendering (CSR)

  • Rendering Location: HTML is generated in the browser using JavaScript.
  • Initial Load: The server sends a minimal HTML shell along with JavaScript files. The browser then downloads JavaScript and CSS files and renders the content dynamically.
  • Performance: The initial page load might be slower because the browser has to download and execute JavaScript to render the content. However, subsequent interactions can be faster as the page is already interactive.
  • SEO: Can be less SEO-friendly out of the box, as search engines might struggle with JavaScript-rendered content. This can be mitigated with techniques like server-side pre-rendering or using frameworks that handle SEO better.
  • User Experience: Users see a blank page or loading indicator until the JavaScript executes and renders the content.

Server-Side Rendering (SSR)

  • Rendering Location: HTML is generated on the server and sent to the browser fully rendered.
  • Initial Load: The server sends the complete HTML content, which allows the browser to display the fully rendered page immediately. JavaScript and CSS files are still needed for interactivity and styling.
  • Performance: The initial page load is generally faster because the user sees fully rendered content immediately. However, subsequent dynamic updates may require additional client-side rendering.
  • SEO: More SEO-friendly because search engines can crawl fully rendered HTML content sent from the server.
  • User Experience: Users see the fully rendered content sooner, improving perceived performance and reducing time to first contentful paint.

Key Differences

  • Where Rendering Occurs: CSR renders content in the browser; SSR renders content on the server.
  • Initial Load Speed: SSR usually provides faster initial content rendering; CSR may have a delay while JavaScript loads and renders content.
  • SEO: SSR is typically better for SEO out of the box; CSR may require additional effort to ensure SEO-friendliness.
  • User Perception: SSR improves the perceived speed of initial content display; CSR might initially show a blank or loading state.

Each rendering method has its own strengths and is often chosen based on the specific needs of the application, such as SEO requirements, initial load speed, and user experience.

Hydration in the Context of SSR

Hydration is the process where a server-rendered HTML page is enhanced with JavaScript on the client side to make it interactive.

Initial Render

With Server-Side Rendering (SSR), the server sends a fully rendered HTML page to the client. This HTML page contains the content that the user sees immediately upon loading.

Hydration Process

Once the HTML is loaded in the browser, JavaScript takes over to "hydrate" the page. This involves:

  • Adding event listeners.
  • Enabling interactive features.
  • Possibly injecting dynamic content that wasn’t initially rendered by the server.

Essentially, hydration makes the page interactive by attaching JavaScript behavior to the static HTML content.

Hydration Strategies

Selective Hydration

Selective hydration involves only hydrating parts of the page that need interactivity, rather than the entire page. Instead of hydrating the entire server-rendered HTML all at once, selective hydration targets specific components or regions of the page.

  • Example: Interactive components like buttons or forms are hydrated first, while static content remains unhydrated until necessary.

Progressive Hydration

Progressive hydration refers to a strategy where the hydration of a page is done in stages or progressively, based on the importance or visibility of content.

  • How It Works: Hydration happens incrementally as the user interacts with the page or as certain conditions are met. For instance, components that are in the viewport or about to come into view are hydrated first. The rest of the page is hydrated as needed.