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

• 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
  });
}