Okay, imagine you are super hungry and you order a pizza online. Now, two things can happen. One: the pizza guy shows up with the full, hot pizza ready to eat - that's server-side rendering. Two: he shows up with raw dough, sauce, cheese, and a tiny oven, and says, "Hey, you make it" - that's client-side rendering (you are the browser in this case 😃).
With server-side rendering, the website is pretty much ready when it gets to your browser. So it loads faster, search engines can read it easily, and people with slow devices or internet connections have a smoother experience.
Client-side rendering is useful as well. It's like a customizable pizza kit. But it takes more time. But for sites where speed and loading experience matters, it can be slow. Also for sites where SEO matters, it can be complicated for search bots to decipher.
So for websites that need massive customizations (say administration dashboards), client-side rendering works well. But for SEO sensitive websites (say eCommerce platforms), server-side rendering is name of the game!
Alright, here are five ways to check for server-side rendering for your web pages:
1. Turn off JavaScript and reload
Open DevTools in Chrome, type "disable JavaScript", hit enter, and reload the page.
If stuff still shows up, like text, images, content — then boom, it's probably server-side rendered. If you see a blank page or a spinner, it's not.
2. Use the Online SSR Checker
Open this online SSR checker and enter the URL you want to verify. It displays the output of a server-side rendered version next to the regular version for a visual comparison. Parts of the page that don't appear in the server-side rendered version can be considered not rendered on the server-side.
3. View Page Source
Right-click anywhere and hit "View Page Source" (or enter in the browser url bar view-source:https://<your-webpage-url>).
You'll see HTML code. Now the part of your content that is appearing within this HTML can be considered served from the server. So, you can search for the parts you want to check for in this wall of HTML.
4. Check via Network tab in DevTools
Open DevTools → Network tab → reload the page.
Click the first file (should be your main HTML). If that first HTML already has the content you are looking for, SSR is working. But if it doesn't contain the content you are looking for, the content isn't being server-side rendered.
5. Use curl
Open your terminal and type:
curl -L https://<your-webpage-url> > output.html
Now, open up output.html and search for the content that you want to check for server-side rendering.If it has the content right there in the response, nice - SSR. If not, you need to solve it.
What content should be server side rendered
Each of the means above described verifying the content for server side rendering. But, what content on your web pages should generally be server side rendered? Let's decipher:
1. Stuff search engines need to see
Think: blog posts, product descriptions, article content, page titles, meta tags. This is because Google (and others) are better at crawling pre-rendered content. If your content only shows up after JavaScript runs, it might get missed or delayed in indexing.
2. Stuff you want to load super fast
Like your main content above the fold — hero section, key headlines, maybe even some initial product listings. Server-side rendering gets that content on screen ASAP, which feels snappy and helps with performance scores.
3. Stuff that doesn't change based on the user
Like a blog homepage, pricing page, or landing page. If it's the same for everyone, why wait for the browser to build it? Just send it ready-to-go.
What content should not be server side rendered
In general, most content for B2C sites can be server side rendered. But, there's still some content that shouldn't be:
1. Stuff that is personalized
Things like below items are better left to client-side rendering — load them after the main page is up:
- “You recently viewed” widgets
- Real-time chat windows
- Notifications
- Anything after user login that's unique to them
It's like setting the table before guests arrive — get the basics ready, and bring out the custom drinks and desserts once they are seated. 😃
Wrapping Up
Server side rendering is practical way to make your site faster, more visible to search engines, and more friendly to users (even the ones on slow connections or older devices).
Use the simple checks we talked about to see if your pages are actually server rendered. If they aren't and they should be, now you know where to start.
And remember - it's not about SSR vs CSR. It's about using both smartly, so your site works great and feels fast.
Top comments (0)