Everything Know About React Server Side Rendering(SSR)

What Is React Server Side Rendering (SSR)?

React Server Side Rendering (SSR) stands out as a prevalent rendering approach, involving the initial rendering of web pages on the server prior to transmitting them to the user’s browser.  This is distinct from client-side rendering, where the bulk of rendering tasks is managed by the browser itself; instead, SSR carries out the rendering process on the server side.

1. Step 1: Create a new Next.js project. ... 2. Step 2: Add required dependencies. ... 3. Step 3: Set up the environment configuration. ... 4. Step 4: Create a new page. ... 5. Step 5: Create an API endpoint. ... 6. Step 6: Update the page to use server-side rendering.

Let’s Explore Two Potential Drawbacks Associated With SSR

1. Initial Waiting Time (TTFB) : One challenge is the time users must wait initially before content is displayed, known as Time to First Byte (TTFB). This delay is linked to the time it takes for the server to generate and transmit the initial HTML, potentially impacting the perceived speed of the website. 2. Interactive Delay (TTI) : Another concern is the delay in achieving interactivity, denoted by Time to Interactive (TTI). This delay occurs as the browser needs to execute JavaScript and complete hydration processes, potentially leading to a slower interactive experience for the user.