Overview of Server-Side Rendering v.s. Client-Side Rendering and Next.js

Hanwen Zhang
3 min readAug 6, 2023

--

  • Use CSR if a site is under development, like a dynamic SPA handled by React
  • Use SSR if a site is stable, static, SEO focused, can pay for additional services
  • Use NextJS if a site is built as SPA for fast interactive UI but needs SSR feature

Server-side Rendering

  • The initial load rendered by the server converts HTML files on the server into a fully rendered HTML page for the client which is great for SEO & performance.
  • When a user makes a request to a webpage, the server prepares an HTML page by fetching user-specific data and sends it to the user’s machine over the internet. The browser then construes the content and displays the page.
  • Regenerated every time for incoming requests.

Pros & Cons

  • pros: faster page load (viewable but not interactable, render initial views faster while CSR loads), better for search engines (faster indexing), better with sites that have a lot of static content (blogs), consistent SEO performance.
  • cons: more server requests, slower render to interact, the full page reloads, and the document size is always bigger.

Client-side Rendering

  • It manages the routing dynamically without refreshing the page every time a user requests a different route.
  • Your browser downloads a minimal HTML page. It renders JavaScript and fills the content into it.
  • React uses client-side rendering for SPA single-page applications.

Pros & Cons

  • pros: faster render after initial load, best for web apps
  • cons: the initial load can require more time

CSR v.s. SSR

  • CSR: Server sending response to browser -> browser downloads JS -> browser executes React -> Page now viewable and interactable
  • Use CSR if the site is under development, and dynamic, SPA handled by React for fast interactive UI
  • SSR: server sending ready-to-be-rendered HTML response to browser -> browser renders the page, now viewable, and browser downloads JS -> browser execute React -> Page now interactable
  • Use SSR if a site is stable, static, SEO focused, can pay for additional services

Lazy Loading v.s. Eager Loading

  • Lazy Loading delays the initialization and only loads when needed.
  • Eager Loading loads all resources as soon as the code is executed.

Next.js

Next.js is a React framework for production created by Vercel, with key features/benefits including :

  • Server-side Rendering (initial load rendered by the server, great for SEO & performance)
  • File-based Routing next/router (define pages and routes with files and folders instead of code)
  • Full-stack Capabilities (backend API code using nodeJS)
  • Static-site Generation (pre-generate an HTML file)
  • API Routes (build your own API endpoints)
  • Typescript/Sass Support
  • Built-in CSS Support
  • Smart Bundling (Code Splitting & Bundling)
  • Route Pre-fetching (fast refresh, internationalized routing)
  • Image Optimization next/image
  • Project Structure (e.g. static assets public/)

Two forms of Data Fetching for Pre-rendering:

Static-site Generation:

  • contain full HTML code that is good for SEO during the build process
  • pre-generate an HTML file that can be stored that can be served by a CDN which is faster, can be cached, and reused

Server-side Rendering:

  • initial load rendered by the server
  • pre-render React components on the server which is great for SEO & performance
  • then SPA handled by React for fast interactive UI regenerated every time for incoming request

Functions

  • getStaticProps() - static-site generation, fetch data during build time, faster when data does not change all the time and no needs access to request object
  • getStaticPaths() - dynamically generate paths based on the data we are fetching, can only be used with getStaticProps
  • getServerSideProps() - server-side rendering, regenerating, and fetching data for every incoming request

Helper Function in WordPress

  • Render your page with WordPress data, and retrieve all the data you need beforehand =>getNextStaticProps and getNextServerSideProps
export async function getStaticProps(context: GetStaticPropsContext) {
return getNextStaticProps(context, {
Page,
client
});
}

--

--

Hanwen Zhang

Full-Stack Software Engineer at a Healthcare Tech Company | Document My Coding Journey | Improve My Knowledge | Share Coding Concepts in a Simple Way