2022-05-04
2020
#nextjs#react
Muhammad Muhsin
2074
May 4, 2022 ⋅ 7 min read

Improve app performance with React server-side rendering

Muhammad Muhsin Fullstack engineer, writer, speaker, and open source contributor.

Recent posts:

react toastify

React-Toastify (2025 update): Setup, styling & real-world use cases

Learn how to use React-Toastify in 2025, from setup to styling and advanced use cases like API notifications, async toasts, and React-Toastify 11 updates.

Chimezie Innocent
Apr 18, 2025 ⋅ 18 min read
5 Best Open Source Tools For Cross-Browser CSS Testing

5 best open source tools for cross-browser CSS testing

Discover open source tools for cross-browser CSS testing like Playwright and BrowserStack to catch rendering errors, inconsistent styling, and more.

Peter Aideloje
Apr 18, 2025 ⋅ 11 min read
react suspense data fetching

How to handle data fetching with React Suspense

With the introduction of React Suspense, handling asynchronous operations like data fetching has become more efficient and declarative.

Ovie Okeh
Apr 18, 2025 ⋅ 10 min read
Use TypeScript Instead Of Python For ETL Pipelines

Use TypeScript instead of Python for ETL pipelines

Build a TypeScript ETL pipeline that extracts, transforms, and loads data using Prisma, node-cron, and modern async/await practices.

Muhammed Ali
Apr 17, 2025 ⋅ 6 min read
View all posts

11 Replies to "Improve app performance with React server-side rendering"

  1. Thank you! That was very helpful to understand SSR, especially with the framework recommendations.

  2. I don’t see why client-side rendered apps should not be able to include social meta tags or (limited) onpage seo.
    A bundled react app is embedded to an html page, so you could just include these in the wrapping html. You’re right about the dynamically rendered content inside of the react app though.

  3. “However, now, server-side rendered React apps use Node for the server, which is a key difference from traditional server-rendered apps (we’ll see how later on in this post).”
    In which way is that a key difference?

  4. Thanks for your comment, Mike!

    The main difference as a I see it: when you load React only on the client-side, it means your JavaScript files have to be loaded into your browser before it starts making calls – for example, to remote APIs. When it runs on the server-side, we can make those calls in the server and give the results from those calls in the initial render itself.

  5. Hello @muhammad Mushim,

    Is react by default server side or client side ?, I am new to react so please need your assistance

  6. As Mike mentioned, the sharing “issue” is very easily fixed with proper meta tag usage in a client-side rendered application. The line “This will not be possible when you have just client-side rendered apps.” in this article is just dead wrong in reference to social media sharing.

    1. what exactly is ‘proper usage’? just throwing meta tags in index.html in the public folder? good luck with that if you have multiple pages. react-helmet adds meta tags to other routes but none of the social media sharing sites can read from it since its client side.

  7. just 1 doubt,

    let say i have loaded the page with all the customer list using server side rendering and now i want to click on the customer and get the result of that customer by sending the customer ID in the payload (in the post api call). In this scenario how can we achieve this subsequent api calls as a server side rendering and without downloading the complete html page aging i just want to hydrate a piece of html page (the user info for the user which i have clicked) just below that clicked user ??

    is there a way to achieve this using server side rendering ?
    i know we can do this using client side rendering using vanilla reactjs

    thanks in advance 😀

Leave a Reply