What is Server-Side Rendering?

With client-side rendering (CSR), all the HTML, JavaScript, CSS, images, and other assets that make up the page are downloaded to the client, and then the computation required to produce the rendered page is done within the browser.

But with SSR, the browser doesn’t need to wait for all the JavaScript to download and execute before it can display the component markup. Moving computation to the server lets the resulting page get cached in the CDN for subsequent visitors.

More benefits of SSR include:

  • faster time-to-content
  • improved SEO data freshness — data will be available whenever search engines crawl the site

Diagram comparing the First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Time to Interactive (TTI) of client-side and server-side rendering processes.

Want to learn how to enable SSR on a page-by-page basis for your site? Follow the instructions in Configure Components for SSR, and then read Enable SSR for LWR Apps.

If you want more granular control over how specific components on a page get rendered, take a look at Understanding Islands. LWR supports islands architecture, which lets you determine whether components are server-rendered, server-rendered with hydration, or client-rendered.