Day 23
Server-Side
Rendering In React
@oluwakemi Oluwadahunsi
Introduction
Server-Side Rendering (SSR) is a technique used in
React applications to generate the initial HTML of
a page on the server rather than in the browser.
In a typical React application, the initial HTML is
usually a bare-bones structure, and the content is
populated by JavaScript after the page loads. This
is called Client-Side Rendering (CSR), majorly what
we have been doing since.
However, in SSR, the React components are
rendered on the server as HTML and sent to the
browser, where it is displayed immediately.
The server generates the complete HTML for the
page and sends it to the client. This approach
improves the page load time and is beneficial for
SEO because search engines can easily crawl the
fully-rendered HTML.
@oluwakemi Oluwadahunsi
How SSR Works in React
In a traditional React setup, the browser
downloads a minimal HTML file, loads JavaScript,
and then renders the content.
In contrast, with SSR, the following process
occurs:
1. Request: The client (browser) makes a request
for a web page.
2. Server: The server receives the request and runs
the React code.
3. Render: React renders the components into
HTML on the server.
4. Response: The server sends back a fully-
rendered HTML page to the client.
5. Hydration: The React app on the client-side
rehydrates, or attaches event listeners, to make
the app interactive.
@oluwakemi Oluwadahunsi
Setting Up Server-Side
Rendering in React
The easiest way to implement SSR in React is by
using Next.js, a popular React framework that
comes with SSR out-of-the-box. Next.js abstracts
the complexities of SSR and makes it simple to use.
Let's walk through the steps of setting up SSR with
Next.js.
Step 1: Setting Up a Next.js App
First, let’s create a new Next.js project.
In a new terminal, type:
This command creates a basic Next.js app and runs
it in development mode.
@oluwakemi Oluwadahunsi
Step 2: Creating a Simple Page with SSR
Next.js automatically enables SSR for each page in
the “app” directory.
Let’s create a simple page and fetch some data
from an API using SSR.
The goals of this example:
We want to create a React component that:
Renders on the server before it is sent to the
browser.
Fetches data from an API on the server.
Displays the fetched data immediately when the
user visits the page.
@oluwakemi Oluwadahunsi
@oluwakemi Oluwadahunsi
1. In the “Home” component
{data}: The data object comes as a prop, passed
from the server. We will fetch this data from an
API in the getServerSideProps function
(explained below).
<h1> and <p>: These are just basic HTML
elements to show that the page is rendered.
<pre>{JSON.stringify(data, null, 2)}</pre>: This
line is responsible for displaying the fetched
data as a formatted JSON string on the page.
The JSON.stringify(data, null, 2) converts the
JSON object into a readable format with
indentation. @oluwakemi Oluwadahunsi
2. getServerSideProps Function
What is getServerSideProps? This function is
special in Next.js because it runs only on the
server.
Before the component renders on the page, this
function executes and fetches the required data
from an external source (in this case, an API). .
The server fetches the data before sending the fully
rendered page to the client (browser).
@oluwakemi Oluwadahunsi
Fetching Data: The function makes an API call to
the endpoint. This API returns sample data (a
single blog post). Once the data is fetched using
await fetch(), it is converted to JSON format
using await res.json().
Returning Props: After fetching the data, it is
returned inside the props object. This means the
fetched data is passed as a prop to the Home
component. In this example, the data object is
passed and used inside the component to
display the fetched API data.
3. What Happens on the Server?
When a user requests the page, the Next.js
server executes the getServerSideProps
function.
The server fetches the data from the API,
composes the HTML by rendering the Home
component with the fetched data, and sends the
fully-rendered HTML to the client.
@oluwakemi Oluwadahunsi
4. What Happens in the Browser?
The client (browser) receives the HTML page
with the pre-rendered content. This means that
the data is already visible, and there is no need
for the browser to wait for JavaScript to fetch
the data.
After the HTML is loaded, React kicks in, and the
page is "hydrated," meaning React attaches its
event listeners and becomes interactive.
@oluwakemi Oluwadahunsi
Why Use Server-Side Rendering?
Here are the key reasons why developers opt for
SSR in React apps:
Improved Performance: SSR can deliver faster
initial page loads because the HTML is pre-
rendered on the server, and the user can see
content immediately.
Better SEO: Since the entire HTML content is
rendered on the server, search engines can
crawl and index the content more effectively,
leading to better SEO performance. This is
crucial for content-heavy websites like blogs, e-
commerce platforms, etc.
Optimized for Slow Networks: On slower
network connections, SSR ensures that users
receive a fully-rendered page even before the
JavaScript is downloaded and executed.
Reduced Time-to-Interactive: Since users see
meaningful content faster, SSR decreases the
time to interactive (TTI) metric, leading to a
smoother user experience.
@oluwakemi Oluwadahunsi
Tabular Differences (CSR) vs. (SSR)
Features Redux Thunk Redux Saga
Initial load time is Faster initial load
longer because the time since the page
Loading JavaScript bundle content is pre-
Time needs to be rendered on the
downloaded before server.
rendering.
SEO can be less Better for SEO as the
effective because content is available
SEO crawlers may not in HTML on the first
execute JavaScript request.
properly.
All rendering Initial rendering
happens in the happens on the
Rendering
browser. server, followed by
HTML
rehydration on the
client.
More dynamic, and Better for static
Dynanism real-time updates are content or content
efficient. that doesn't change
often.
@oluwakemi Oluwadahunsi
I hope you found this material
useful and helpful.
Remember to:
Like
Save for future reference
&
Share with your network, be
helpful to someone 👌
@oluwakemi Oluwadahunsi
Hi There!
Thank you for reading through
Did you enjoy this knowledge?
💼 Follow my LinkedIn page for more work-life
balancing and Coding tips.
🌐 LinkedIn: Oluwakemi Oluwadahunsi
kodemaven-portfolio.vercel.app
