Server Side Rendering in JavaScript – SSR vs CSR Explained
The concept of Server Side Rendering (SSR) is often misunderstood. So my aim in this article is to bring clarity to this process and how it works. Here's what we'll cover in this guide: We’ll cover each of these items in depth, so that by the end of this tutorial you have a firm grasp of server side rendering and how it fits into the ever-changing world of web development. We should also look at two key terms we’ll be using throughout, and what they mean: It’s important to understand the difference between HTML and the DOM. When you're reading through documentation it's easy to become confused and misinterpret the two. SSR is when you render your website's HTML on the server. This is as opposed to Client Side Rendering (CSR) when your website renders HTML in the browser by manipulating the DOM with JavaScript. There are certain times when you'll want to check whether a site is using server side rendering. For instance, both developers and SEO professionals often need this information t
By Scott Gary The concept of Server Side Rendering (SSR) is often misunderstood. So my aim in this article is to bring clarity to this process and how it works. Here's what we'll cover in this guide: What is server side rendering? What are its pros and cons when compared to other rendering methods such as Client Site Rendering (CSR)? How do you know if a site is rendered using SSR? How to use SSR, and things to keep in mind when choosing an SSR framework. How to leverage SSR to improve performance. We’ll cover each of these items in depth, so that by the end of this tutorial you have a firm gr
Explore this link on the map →related reading
- Making Sense of React Server Components • Josh W. Comeaujoshwcomeau.com
- Rendering on the Web | Articles | web.devweb.dev
- Web Applications 101 - Robin Wieruchrobinwieruch.de
- New Suspense SSR Architecture in React 18 · reactwg/react-18 · Discussion #37 · GitHubgithub.com
- Navigating the future of frontendfrontendmastery.com
- Fixing Gatsby's rehydration issue - LogRocket Blogblog.logrocket.com
- Five Data-Loading Patterns To Boost Web Performance — Smashing Magazinesmashingmagazine.com
- Which web frontend architecture fits best?workingsoftware.dev
- Populating the page: how browsers work - Performance | MDNdeveloper.mozilla.org
- App Router: Static and Dynamic Rendering | Next.jsnextjs.org
- Server Components – Reactreact.dev
- Building a single-page application with Next.js and React Routercolinhacks.com