Server-Side Rendering (SSR)

How Does SSR Work? ⚙️

When a user requests a webpage, here’s what happens in an SSR setup:

1. Request to Server: The user's browser sends a request to the web server with the URL.
2. Server Generates HTML: The server processes the request, runs any required backend logic, pulls data from databases or APIs, and generates the fully-fledged HTML page as it is to be shown on the browser.
3. Send to Client: The server sends the pre-rendered HTML as the request response to the client’s browser.
4. Browser Renders Page: The browser displays the page almost instantly just like static pages, since it receives a fully-formed HTML document and no other processing is required unlike in ReactJS where the application hits APIs to populate data, and converts the final page.

Why Use Server Side Rendering? 📈

Now, why should you even care about SSR? Here are the main benefits:

1. Faster Initial Load Time: With SSR, the browser gets a fully-formed HTML page, which means the user sees content faster, especially for users with slower connections or with less powerful devices. This is very crucial for retaining visitors and reducing the bounce rates of the users.
2. SEO Benefits: Search engines like Google love SSR because it provides complete HTML content at the time of crawling and not a screen with a loader. This makes it easier for search engines to index the content of your pages and improves performance, which can improve your website’s ranking.
3. Better Social Sharing: SSR makes sharing your content on social media smoother. Social platforms pull metadata (like the title, description, and images) directly from your server-rendered HTML, ensuring that your shared links look great every time.
4. Improved Accessibility: Server-side rendering can enhance accessibility by delivering fully-formed content that can be easily interpreted by screen readers and other assistive technologies.

SSR vs. CSR vs. Static Site Generation (SSG) 🥊

So, where does SSR fit in the rendering group, and how does it compare with other rendering methods?

1. Client Side Rendering (CSR): CSR is when JavaScript on the client’s side (browser) does all the work of building the webpage. It’s more dynamic and interactive but can result in slower initial load times because of the processing on clients and less SEO-friendly pages since search engines might struggle to index dynamically generated content and slower to render. It is mostly used for interactive applications where SEO is not required, like Gmail.
2. Static Site Generation (SSG): SSG cook the HTML files for all pages at the time of building and not at the time of request. It is the fastest of the options and it’s great for sites with mostly static content that doesn’t change often, but not so much for dynamic content like user-specific dashboards or real-time data. People use a combination of SSG and CSR, where the static data comes directly as an HTML page while the other items like user comments get populated on the client side.
3. Server Side Rendering (SSR): SSR is like best of both worlds. It offers the benefits of faster initial load times and SEO-friendliness, like SSG, but retains the flexibility to serve dynamic content like CSR. The downside? It requires more server resources and can be complex to implement at scale and at every request the processing happens on the backend.

When Should You Use SSR? 🧐

• SSR is ideal when:
• You need fast initial page loads for content-heavy sites.
• SEO is a priority (think of blogs, e-commerce, or news websites). You have dynamic content that changes based on user input or interactions.
• You want to improve performance on slower devices for a better user experience and SEO.

Well, as you reached here, then it would be very rude of me not to mention NextJS here which gave us the ReactjS framework to serve SSR and SSG