As a newcomer, especially to Frontend development, the concept mentioned above may initially seem more code-heavy or akin to backend development. However, it's a concept for frontend developers. I know these words might sound scary, but trust me, it's not that hard. Let's take a closer look to make it easier.
What is Server-Side Rendering?
In Server-side rendering, when a user requests resources from the server, the server runs the necessary code and renders a complete web page, which it then sends to the client (in this context, the client refers to the browser). With each user interaction, the browser sends a request to the server, which then responds by sending the complete web page. This process is illustrated in the image below.
What is Client-Side Rendering?
In Client Side Rendering, the server initially sends the basic HTML/ CSS with Javascript to the browser, and then the browser renders the page accordingly to the user. For Example in client side rendered website, if a user interacts with the website, browser will re-render the page with help of javascript inside and will show the required view of the page to the user without making any request to the server.
Pros and Cons of Server-Side Rendering
Fast Initial Load: With SSR (Server-Side Rendering), when you ask for a webpage, the server sends you a ready-to-go HTML file. This means your browser doesn't have to spend time processing big JavaScript files, so the content shows up super quick, in just a few milliseconds.(Pro)
SEO Benefits: SSR is also good for SEO (Search Engine Optimization). To rank high on search engines, websites need to be easy for search engines to read. SSR sites are great because they instantly show all the information, mostly as text, which is what search engines like. (Pro)
Heavy server load: When a large number of visitors access your website at once, the server may become overloaded, causing delays in responding to user requests. This could annoy visitors because they have to wait longer, and they might decide to leave the site because of it. (Con)
Slower page transitions: Server-side rendered websites may have slower page transitions because every time you move to a new page, even if it's similar to the previous one, the entire page is rebuilt. For instance, when you're browsing a blog and switching between posts, the header and footer, which remain the same across all posts, still need to be rebuilt each time you visit a new post. (Con)
Pros and Cons of Client-Side Rendering
Low Server Load: Client-side rendering allows servers to use their resources efficiently, which is especially useful for sites with content that changes often. This reduces the strain on the server and makes the app work better for users.(Pro)
Fast website rendering after the initial load: When you first open a website, the server sends the necessary HTML, CSS and Javascript. After that, when you navigate around the site, your browser quickly renders the pages so you see them almost instantly. This makes the website feel really fast and makes it nicer to use.(Pro)
Low SEO: If client-side rendering isn't done right, it can hurt the website's visibility in search engines like Google, which can make it harder for people to find the site when they search for related topics.(Con)
Longer initial load Time: The first time you open a website, it might take longer to load because all the necessary code and content have to be downloaded to your device before you can see anything.(Con)
Final Thoughts
Now that I'm sure you're comfortable with client-side and server-side rendering, you'll be able to answer the question: What is the difference between client and server-side rendering? I know the answer in your mind is that the main difference between server-side and client-side rendering is where the website’s content is rendered. With SSR, content is rendered on the server, while with CSR, it’s rendered in a user’s browser.
Finally, determining the best approach depends on the specific requirements and features of the website. Besides the two mentioned approaches, there are also other options such as static-site generation and incremental site generation, which we'll cover in future blog post.
I hope I've cleared up some of your doubts. For more tech-related articles, you can follow me on Hashnode and LinkedIn at anas-Khaan.