Skip to main content

Learning web performance

Types of rendering patterns

Client side rendering

Client-side rendering is where JavaScript is loaded and used to dynamically insert all the HTML for a website.

  • pros: benefits from caching
  • cons: Bad for SEO, performance, and has large JS bundle size.

Server side rendering

HTML is generated on the server and sent to the client.

  • pros: super fast
  • cons: not as dynamic as client-side rendering, and no soft navigations.

Static rendering

Static rendering is when the HTML for a page gets generated at build time and gets cached by the browser. This means the HTML lives right there in the browser cache, without any JavaScript to run and load it.

This pattern is ideal for pages that don't change, like landing pages or About pages.

Incremental static regeneration

Uses caching and cache invalidation to update static pages if any changes occur.