Skip to main content

Server Side Rendering

Learn what server side rendering is and why it’s preferable to client-side (browser) rendering. You’ll also learn how Gatsby uses server-side rendering to create static websites.

What is Server-Side rendering?

Server-side rendering means using a server to generate HTML from JavaScript modules in response to a URL request. That’s in contrast to client-side rendering, which uses the browser to create HTML using the DOM.

Server-side rendering with JavaScript works similarly to other server-side languages such as PHP or .NET, but with Node.js as the runtime environment. When the server receives a request, it parses the JavaScript modules and data required to generate a response, and returns a rendered HTML page to the browser.

Single-page applications use client-side rendering. All URL requests are redirected to the same bare-bones HTML document, like the example that follows.

Client-side rendering fills in the rest. Views for specific URLs are managed by a JavaScript routing mechanism. Each URL request triggers a DOM update instead of a network request. As a result, sites that use client-side rendering can feel “snappier” and more responsive to user actions. However, client-side rendering has two significant drawbacks.

  1. Site visitors have to wait for the JavaScript bundle to load and for the browser to build the DOM before any content is visible. They may see a blank page or loading image while JavaScript loads.
  2. Your bare bones HTML document lacks the keyword, description, and social media metadata (e.g. OpenGraph) necessary for search engine optimization and social media sharing.

Server-side rendering addresses both concerns by creating HTML at run time, when the server receives a browser request). Search engines can index your URLs. Visitors can share them on Facebook or Twitter.

Instead of purely server-side rendering, Gatsby uses the same APIs to create static HTML at build time when you use gatsby build. Gatsby-rendered HTML pages give you the SEO and social sharing advantages of server-side rendering with the speed and security of a static site generator.

Learn more

Edit this page on GitHub